Skip to content

Instantly share code, notes, and snippets.

@neon-ninja

neon-ninja/index.html

Created March 24, 2023 03:28
Show Gist options
  • Save neon-ninja/18c7de7f83a4d5de8af525c886ae9bb2 to your computer and use it in GitHub Desktop.
Save neon-ninja/18c7de7f83a4d5de8af525c886ae9bb2 to your computer and use it in GitHub Desktop.
Download ZIP
MQTT debug view
Raw
index.html
<html>
<head>
<title>MQTT debug view</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<th>Message recieved at</th>
<th>Topic</th>
<th>Message</th>
</thead>
<tbody id="messages">
</tbody>
</table>
<script>
const client = mqtt.connect("ws://clarity-data.cloud.edu.au:8080")
client.subscribe("#")
client.on("message", function (topic, payload) {
$("#messages").prepend(`<tr>
<td>${new Date()}</td>
<td>${topic}</td>
<td>${payload}</td>
</tr>`)
})
client.publish("test", "browser connected!")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment