34 lines
968 B
JavaScript
34 lines
968 B
JavaScript
/* 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));
|