From fc072781ae16072d4bb6dbf99bd5b3f174fdb8d8 Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Tue, 16 Jan 2018 19:57:35 -0700
Subject: [PATCH] feat: add form to client demo

---
 src/index.html        | 30 ------------------------------
 src/public/client.js  | 33 +++++++++++++++++++++++++++++++++
 src/public/index.html | 28 ++++++++++++++++++++++++++++
 src/server.mjs        |  7 ++++++-
 4 files changed, 67 insertions(+), 31 deletions(-)
 delete mode 100644 src/index.html
 create mode 100644 src/public/client.js
 create mode 100644 src/public/index.html
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 @@
-<!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>
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 @@
+<!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>
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;
       }
 
