w33ble/mosca-playground
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: add form to client demo

Browse Source
This commit is contained in:
Joe Fleming
2018-01-16 19:57:35 -07:00
parent 06ffb32e0f
commit fc072781ae
4 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/index.html
View File

@@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>MQTT Demo with Mosca</title>
</head>
<body>
<h1>MQTT Demo with Mosca</h1>
<script src="/mqtt.js"></script>
<script>
/* eslint no-console: 0 */
/* eslint-env browser */
/* global mqtt */
// see https://github.com/mcollina/mosca/wiki/MQTT-over-Websockets
const client = mqtt.connect();
client.subscribe('mqtt/demo');
client.on('message', (topic, payload) => {
console.log([topic, payload].join(': '));
// client.end();
});
client.publish('mqtt/demo', `hello world! ${new Date().getTime()}`, {
retain: true,
});
</script>
</body>
</html>

33
src/public/client.js Normal file
View File

@@ -0,0 +1,33 @@
/* eslint no-console: 0 */
/* eslint-env browser */
/* global mqtt */
// see https://github.com/mcollina/mosca/wiki/MQTT-over-Websockets
const mqttTopic = '/mosca-playground/messages';
const messagesNode = document.querySelector('#messages');
const newMessageForm = document.querySelector('#newMessageForm');
const newMessageInput = document.querySelector('#newMessageInput');
const client = mqtt.connect();
// method to append messages to the stream
const addMessage = msg => {
const el = document.createElement('li');
el.innerText = msg;
messagesNode.append(el);
};
// form listener to post new messages
newMessageForm.addEventListener('submit', ev => {
ev.preventDefault();
// publish the message
client.publish(mqttTopic, newMessageInput.value, { retain: true });
// clear the input
newMessageInput.value = '';
});
// subscribe and setup message action
client.subscribe(mqttTopic);
client.on('message', (_, payload) => addMessage(payload));

28
src/public/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>MQTT Demo with Mosca</title>
</head>
<body>
<noscript>YOU NEED JAVASCRIPT ENABLED FOR THIS TO WORK!</noscript>
<h1>MQTT Demo with Mosca</h1>
<div>
<h3>Messages:</h3>
<ul id="messages">
</ul>
</div>
<div>
<form id="newMessageForm">
<label>New Message</label>
<input id="newMessageInput" type="text" name="message" value="">
<input type="submit" name="Add Message">
</form>
</div>
<script src="/mqtt.js"></script>
<script src="/client.js"></script>
</body>
</html>

7
src/server.mjs
View File

@@ -29,7 +29,12 @@ const webServer = http
switch (req.url) { switch (req.url) {
case '/': { case '/': {
sendFile(path.resolve(__dirname, 'index.html'), res, 'text/html'); sendFile(path.resolve(__dirname, 'public', 'index.html'), res, 'text/html');
break;
}
case '/client.js': {
sendFile(path.resolve(__dirname, 'public', 'client.js'), res, 'application/javascript');
break; break;
} }