-
Notifications
You must be signed in to change notification settings - Fork 25
/
Mqtt-serverless-Paho-broker
175 lines (157 loc) · 7.35 KB
/
Mqtt-serverless-Paho-broker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!--
Author: Pradeep Singh
Date: 11th January 2017
Version: 1.0
Description: This is sample code for sending and receiving MQTT messages over WebSockets
Blog: https://iotbytes.wordpress.com/
-->
<!DOCTYPE HTML>
<html>
<head>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Include JQuery library from CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Include Paho JavaScript MQTT Client from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script type="text/javascript">
// Variables
var WebSocket_MQTT_Broker_URL = "";
var MQTT_Client_ID = "";
var MQTT_Topic = "";
var MQTT_Client = "";
function mqtt_Connect_with_Broker(){
// Set variables
WebSocket_MQTT_Broker_URL = document.getElementById("txt_MQTT_Broker_URL").value;
MQTT_Client_ID = document.getElementById("txt_MQTT_Client_ID").value;
// Create a MQTT Client nstance
MQTT_Client = new Paho.MQTT.Client(WebSocket_MQTT_Broker_URL, MQTT_Client_ID);
// set callback handlers
MQTT_Client.onConnectionLost = onConnectionLost;
MQTT_Client.onMessageArrived = onMessageArrived;
MQTT_Client.connect({onSuccess:onConnect});
}
// Subscribe to MQTT Topic
function mqtt_Subscribe_to_Topic(){
MQTT_Subscribe_Topic = document.getElementById("txt_MQTT_Subscribe_Topic").value;
MQTT_Client.subscribe(MQTT_Subscribe_Topic);
Set_New_Console_Msg("Subscribed to MQTT Topic: " + "\"" + MQTT_Subscribe_Topic + "\"" );
}
// Send MQTT Message
function mqtt_Publish_Message(){
message = new Paho.MQTT.Message(document.getElementById("txt_MQTT_Msg").value);
message.destinationName = document.getElementById("txt_MQTT_Publish_Topic").value;
MQTT_Client.send(message);
Set_New_Console_Msg("Published " + "\"" + document.getElementById("txt_MQTT_Msg").value + "\"" + "to MQTT Topic: " + "\"" + document.getElementById("txt_MQTT_Publish_Topic").value + "\"");
}
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
Set_New_Console_Msg("Connected with MQTT Broker: " + "\"" + document.getElementById("txt_MQTT_Broker_URL").value + "\"");
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
Set_New_Console_Msg("Connection Lost with MQTT Broker. Error: " + "\"" +responseObject.errorMessage + "\"");
}
}
// called when a message arrives
function onMessageArrived(message) {
Set_New_Console_Msg("MQTT Message Recieved. " + " Message: " + "\"" + message.payloadString + "\"" + " MQTT Topic: " + "\"" + message.destinationName + "\"" + " QoS Value: " + "\"" + message.qos + "\"");
}
// Document Ready Event
$(document).ready( function() {
//Set default MQTT Broker WebSocket URL
document.getElementById("txt_MQTT_Broker_URL").value = "ws://broker.hivemq.com:8000/mqtt";
//Generate Random MQTT Clinet ID
gen_MQTT_Client_ID();
})
// Set MQTT Messages to TextArea
function Set_New_Console_Msg(text) {
document.getElementById("txtAr_Console").value = document.getElementById("txtAr_Console").value + get_Fromatted_Time().toString() + ": " + text + "\n";
document.getElementById("txtAr_Console").scrollTop = document.getElementById("txtAr_Console").scrollHeight;
}
//Clear Console
function clear_Console(){
document.getElementById("txtAr_Console").value = "";
}
// Get Formatted time in Hour:Minute:Seconds AM/PM format
function get_Fromatted_Time() {
var dt = new Date();
var hours = dt.getHours() == 0 ? "12" : dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var minutes = (dt.getMinutes() < 10 ? "0" : "") + dt.getMinutes();
var seconds = dt.getSeconds();
var ampm = dt.getHours() < 12 ? "AM" : "PM";
var formattedTime = hours + ":" + minutes + ":" + seconds + " " + ampm;
return formattedTime;
}
// Randomly generate Client ID
function gen_MQTT_Client_ID(){
document.getElementById("txt_MQTT_Client_ID").value = Math.floor(100000000000 + Math.random() * 900000000000);
}
</script>
</head>
<body>
<hr>
<form class="form-horizontal">
<div class="form-group">
<label for="txt_MQTT_Broker_URL" class="col-sm-2 control-label">WebSocket MQTT Broker URL:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txt_MQTT_Broker_URL">
</div>
</div>
<div class="form-group">
<label for="txt_MQTT_Client_ID" class="col-sm-2 control-label">MQTT Client ID:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txt_MQTT_Client_ID">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success col-sm-4" id="btn_Connect_to_Broker" onclick="mqtt_Connect_with_Broker();">Connect</button>
</div>
</div>
<hr>
<div class="form-group">
<label for="txt_MQTT_Subscribe_Topic" class="col-sm-2 control-label">MQTT Topic (Subscribe):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txt_MQTT_Subscribe_Topic" placeholder="Type MQTT Topic here...">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary col-sm-4" onclick="mqtt_Subscribe_to_Topic();">Subscribe</button>
</div>
</div>
</form>
<hr>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="txt_MQTT_Publish_Topic">MQTT Topic (Publish):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txt_MQTT_Publish_Topic" placeholder="Type MQTT Topic here...">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="txt_MQTT_Msg">MQTT Message:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txt_MQTT_Msg" placeholder="Type MQTT Message here...">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary col-sm-4" onclick="mqtt_Publish_Message();" >Publish</button>
</div>
</div>
</form>
<hr>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="txtAr_Console">Console:</label>
<div class="col-sm-9">
<textarea ype="textarea" class="form-control" rows="12" cols="100" id="txtAr_Console"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="btn_Clear_Console"></label>
<div class="col-sm-4">
<button type="button" id="btn_Clear_Console" class="btn btn-warning col-sm-4" onclick="clear_Console();" >Clear Console</button>
</div>
</div>
</form>
</body>
</html>