Skip to content

Commit 289b866

Browse files
Ghregoire12Ghregoire12
authored
Add files via upload
0 parents  commit 289b866

8 files changed

+2314
-0
lines changed

‎Mosquitto_test0.html

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><title>Mosquitto Websockets</title>
3+
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
6+
<style>
7+
.switch {
8+
position: relative;
9+
display: inline-block;
10+
width: 60px;
11+
height: 34px;
12+
}
13+
14+
.switch input {
15+
opacity: 0;
16+
width: 0;
17+
height: 0;
18+
}
19+
20+
.slider {
21+
position: absolute;
22+
cursor: pointer;
23+
top: 0;
24+
left: 0;
25+
right: 0;
26+
bottom: 0;
27+
background-color: #ccc;
28+
-webkit-transition: .4s;
29+
transition: .4s;
30+
}
31+
32+
.slider:before {
33+
position: absolute;
34+
content: "";
35+
height: 26px;
36+
width: 26px;
37+
left: 4px;
38+
bottom: 4px;
39+
background-color: white;
40+
-webkit-transition: .4s;
41+
transition: .4s;
42+
}
43+
44+
input:checked + .slider {
45+
background-color: #2196F3;
46+
}
47+
48+
input:focus + .slider {
49+
box-shadow: 0 0 1px #2196F3;
50+
}
51+
52+
input:checked + .slider:before {
53+
-webkit-transform: translateX(26px);
54+
-ms-transform: translateX(26px);
55+
transform: translateX(26px);
56+
}
57+
58+
/* Rounded sliders */
59+
.slider.round {
60+
border-radius: 34px;
61+
}
62+
63+
.slider.round:before {
64+
border-radius: 50%;
65+
}
66+
67+
</style>
68+
69+
70+
</head>
71+
<body style="direction: ltr;">
72+
<div class="container mt-5">
73+
<h1 class="mb-5">Mosquitto Websockets</h1>
74+
<div class="bg-light rounded p-5">
75+
<div class="input-group mb-5 mr-3">
76+
<div class="input-group-prepend">
77+
<label class="input-group-text" for="topic">Subscribed to </label>
78+
</div>
79+
<input id="topic" class="form-control" disabled="disabled" type="text"/>
80+
<div class="input-group-prepend">
81+
<label class="input-group-text" for="status">Status:</label>
82+
</div>
83+
<input id="status" class="form-control" disabled="disabled" type="text" />
84+
</div>
85+
<div class="d-flex flex-row mb-4 align-items-center">
86+
<span class="mr-3">Toggle Led : </span>
87+
<label class="switch">
88+
<input type="checkbox" onclick="sendMessage(this)" checked>
89+
<span class="slider round"></span>
90+
</label>
91+
</div>
92+
<ul id="ws" style="font-family: 'Courier New',Courier,monospace;">
93+
</ul>
94+
</div>
95+
</div>
96+
</body></html>
97+
98+
99+
<script src="mqttws31.js" type="text/javascript"></script>
100+
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
101+
<script src="bootstrap.min.js"></script>
102+
<script type="text/javascript">
103+
var mqtt;
104+
var reconnectTimeout = 2000;
105+
var port = 8000;
106+
function MQTTconnect() {
107+
mqtt = new Paho.MQTT.Client(localhost,port,"/mqtt","web_" + parseInt(Math.random() * 100, 10) );
108+
var options = {
109+
timeout: 3,
110+
useSSL: false,
111+
cleanSession: true,
112+
onSuccess: onConnect,
113+
onFailure: function (message) {
114+
$('#status').val("Connection failed: " + message.errorMessage + "Retrying");
115+
setTimeout(MQTTconnect, reconnectTimeout);
116+
}
117+
};
118+
mqtt.onConnectionLost = onConnectionLost;
119+
mqtt.onMessageArrived = onMessageArrived;
120+
mqtt.connect(options);
121+
}
122+
function onConnect() {
123+
$('#status').val('Connected to host ');
124+
// Connection succeeded; subscribe to our topic
125+
mqtt.subscribe("Gregoire/Led", {qos: 0});
126+
$('#topic').val("Gregoire/Led");
127+
}
128+
function onConnectionLost(response) {
129+
setTimeout(MQTTconnect, reconnectTimeout);
130+
$('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
131+
};
132+
function onMessageArrived(message) {
133+
var topic = message.destinationName;
134+
var payload = message.payloadString;
135+
$('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
136+
};
137+
function sendMessage(element){
138+
if(element.checked){
139+
var msg = new Paho.MQTT.Message('ON');
140+
} else {
141+
var msg = new Paho.MQTT.Message('OFF');
142+
}
143+
msg.destinationName = "Gregoire/Led";
144+
mqtt.send(msg);
145+
//alert(message);
146+
}
147+
148+
149+
$(document).ready(function() {
150+
MQTTconnect();
151+
});
152+
</script>

‎bootstrap.min.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bootstrap.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bootstrap/bootstrap.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bootstrap/bootstrap.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery-3.4.1.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)