feat: add form to client demo

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));