feat: add form to client demo

2018-01-16 19:57:35 -07:00
parent 06ffb32e0f
commit fc072781ae
4 changed files with 67 additions and 31 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -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>
--- a/src/public/client.js
+++ 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));
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -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>
--- 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;
      }