diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 7c6020d..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- MQTT Demo with Mosca
-
-
- MQTT Demo with Mosca
-
-
-
-
diff --git a/src/public/client.js b/src/public/client.js
new file mode 100644
index 0000000..e5e39b8
--- /dev/null
+++ b/src/public/client.js
@@ -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));
diff --git a/src/public/index.html b/src/public/index.html
new file mode 100644
index 0000000..46dffdc
--- /dev/null
+++ b/src/public/index.html
@@ -0,0 +1,28 @@
+
+
+
+ MQTT Demo with Mosca
+
+
+
+
+ MQTT Demo with Mosca
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/server.mjs b/src/server.mjs
index 51c1caa..1eb0ed3 100644
--- a/src/server.mjs
+++ b/src/server.mjs
@@ -29,7 +29,12 @@ const webServer = http
switch (req.url) {
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;
}