Skip to content

Instantly share code, notes, and snippets.

@colrichie

colrichie/mqttjs_tester.html

Last active March 3, 2023 13:58
Show Gist options
  • Save colrichie/2335eb59e574bfa5bfbea10b1a573e27 to your computer and use it in GitHub Desktop.
Save colrichie/2335eb59e574bfa5bfbea10b1a573e27 to your computer and use it in GitHub Desktop.
Download ZIP
MQTT over WebSocket Client
Raw
mqttjs_tester.html
<!DOCTYPE html>
<html>
<head>
<!-- Written by colrichie (@col_richie) on 2023-03-03
The original source code is on the following page.
https://hikoleaf.hatenablog.jp/entry/2019/05/18/165038 -->
<title>MQTT.js Test</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT.js Test</h1>
<h2>HOST (Where is the Broker):</h2>
<div>
<dl>
<dt>URL:</dt>
<dd>
<select id="prot"><option selected="selected">ws</option><option>wss</option></select>://<input type="text" id="addr" value="localhost" size="20" />:<input type="text" id="port" value="11883" size="5" />/<input type="text" id="path" value="" size="20" /><br/>
<label style="font-size:smaller"><input type="button" id="hivemqurl" value="^" onclick="ForHiveMQ()" /><br/>Fill the setting for the HiveMQ Public broker (if you want to use it)</label>
</dd>
</dl>
<input type="button" id="connectionbutton" value="Connect" style="width:10em" onclick="Connect()" />
<input type="button" id="discconnectionbutton" value="Disconnect" style="width:10em" onclick="Disconnect()" />
</div>
<h2>SEND (Behave as a Publisher):</h2>
<div>
topic = <input type="text" id="sendtopic" value="test" size="20" /><br/>
<textarea id="sendbox" style="width:40em; height:5em;"></textarea><br/>
<input type="button" id="publishbutton" value="Publish" onclick="Publish()" disabled="disabled" />
</div>
<h2>RECV (Behave as a Subscriber):</h2>
<div>
topic = <input type="text" id="recvtopic" value="#" size="20" /><br/>
<textarea id="recvbox" style="width:40em; height:5em;" readonly="readonly"></textarea><br/>
<label><input type="checkbox" id="recvtopicname" value="1" /><span style="font-size:smaller">Include the received topic name as a prefix</span></label><br/>
<input type="button" id="recvstart" value="Start" style="width:7em" onclick="StartSub()" disabled="disabled" />
<input type="button" id="recvstop" value="Stop" style="width:7em" onclick="StopSub()" disabled="disabled" />
<input type="button" id="recvclear" value="Clear" style="width:7em" onclick="ClearSub()" />
</div>
<script>
<!-- Broker Host Name or IP Address : Port -->
var client;
var eConn = document.getElementById('connectionbutton');
var ePub = document.getElementById('publishbutton' );
var eProt = document.getElementById('prot' );
var eAddr = document.getElementById('addr' );
var ePort = document.getElementById('port' );
var ePath = document.getElementById('path' );
var eSendbox = document.getElementById('sendbox' );
var eSendtopic = document.getElementById('sendtopic' );
var eRecvbox = document.getElementById('recvbox' );
var eRecvtopic = document.getElementById('recvtopic' );
var eRecvtopicname = document.getElementById('recvtopicname' );
var eRecvstart = document.getElementById('recvstart' );
var eRecvstop = document.getElementById('recvstop' );
var eRecvclear = document.getElementById('recvclear' );
function Connect() {
client = mqtt.connect(eProt.value + '://' + eAddr.value + ':' + ePort.value + '/' + ePath.value);
if (! client) { alert('Failed to connect'); return; };
client.on('connect', () => {
eProt.item(1-eProt.selectedIndex).disabled = true;
eAddr.readOnly = true;
ePort.readOnly = true;
ePath.readOnly = true;
eConn.value = 'NOW CONNECTED';
eConn.disabled = true;
ePub.disabled = false;
eRecvstart.disabled = false;
eRecvstop.disabled = true;
});
client.on('message', (topic, message) => {
eRecvbox.value += ((eRecvbox.value!='')?'\n':'')
+ ((eRecvtopicname.checked)?topic+' : ':'')
+ message;
eRecvbox.scrollTop = eRecvbox.scrollHeight;
});
}
function Disconnect() {
if (! client) { return; }
client.end();
eProt.item(1-eProt.selectedIndex).disabled = false;
eAddr.readOnly = false;
ePort.readOnly = false;
ePath.readOnly = false;
eRecvtopic.readOnly = false;
eConn.value = 'connect';
eConn.disabled = false;
ePub.disabled = true;
eRecvstart.disabled = true;
eRecvstop.disabled = true;
}
function Publish() {
var msg = eSendbox.value;
if (msg === '') { alert('An empty message is not allowed!');return; }
client.publish(eSendtopic.value, eSendbox.value);
}
function StartSub() {
var topic = eRecvtopic.value;
if (topic === '') {
eSendbox.value = 'NOT Subscribe due to no topic';
return;
}
client.subscribe(topic);
eRecvtopic.readOnly = true;
eRecvstart.disabled = true;
eRecvstop.disabled = false;
}
function StopSub() {
var topic = eRecvtopic.value;
client.unsubscribe(topic);
eRecvtopic.readOnly = false;
eRecvstart.disabled = false;
eRecvstop.disabled = true;
}
function ClearSub() {
eRecvbox.value = '';
}
function ForHiveMQ() {
if ( typeof(client)==='undefined' ||
(typeof(client)==='object'&&client.connected===false) ) {
eProt.selectedIndex = 0;
eAddr.value = 'broker.hivemq.com';
ePort.value = '8000';
ePath.value = 'mqtt';
}
}
</script>
<h2>README (What is this?):</h3>
<p>This is a control panel to try to use the MQTT.js library. This library makes your web browser an MQTT-over-WebSocket speaker. And then the protocol is <strong>very helpful to send/receive text data (also byte stream) from/to the UNIX stdin/stdout.</strong></p>
<p>Only one simple application is required to connect to the stdin/stdout. That is <a href="https://mosquitto.org/">"Mosquitto."</a></p>
<p>Try to use me by the following steps.</p>
<h2>How to Use Me:</h2>
<h3>0-1) [PREP.] Install Mosquitto</h3>
<p>The installation instructions are on <a href="https://mosquitto.org/download/">this page.</a><p>
<h3>0-2) [PREP.] Write the configuration for Mosquitto</h3>
<p>Copy and save the following text as the file "mosquitto.local.conf" in your favor directory.<br/>
<textarea style="width:15em; height:3em;" readonly="readonly">listener 1883
listener 11883
protocol websockets</textarea></p>
<h3>1) Start MQTT broker by Mosquitto</h3>
<p>Type the following command on your UNIX host.<br/><textarea style="width:40em; height:1em;" readonly="readonly">$ mosquitto -c mosquitto.local.conf</textarea></p>
<h3>2) Connect me to the MQTT broker</h3>
<p>Fill in the URL form and push the "Connect" button. Then, wait for the button name to be "CONNECTED."</p>
<h3>3) Start subscribing</h3>
<p>If you want to send text data from this web page to the UNIX host, type the following command on the host to start subscribing.<br/><textarea style="width:40em; height:1em;" readonly="readonly">$ mosquitto_sub -h localhost -t "TOPIC_NAME"</textarea><br/>"TOPIC_NAME" is the name of the MQTT topic you have to decide on. MQTT topic is like a kind of channel name you want to subscribe to.</p>
<p>Or, if you want to send text data from the UNIX host to this web page, input the topic name into the topic form in the "RECV" section, and push the start button on the same section.</p>
<h3>4) Publish a message</h3>
<p>If you want to send text data from this web page to the UNIX host, write some message into the form in the "SEND" section, and push the "Publish" button on the same section.</p>
<p>Or, if you want to send text data from the UNIX host to this web page, type the following command on the host to publish a message.<br/><textarea style="width:40em; height:1em;" readonly="readonly">$ echo "Hello, world!" | mosquitto_pub -l -h localhost -t "TOPIC_NAME"</textarea></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment