snowpack example

jdiamond · May 8, 2021 · b4084ff · b4084ff
1 parent d13c5ac
commit b4084ff
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 0 deletions.
diff --git a/examples/snowpack/.gitignore b/examples/snowpack/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/package-lock.json
diff --git a/examples/snowpack/index.css b/examples/snowpack/index.css
@@ -0,0 +1,16 @@
+fieldset {
+  margin: 1em 0;
+  border: 1px solid lightgray;
+  padding: 1em;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid lightgray;
+  padding: 1em;
+}
diff --git a/examples/snowpack/index.html b/examples/snowpack/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Snowpack Example</title>
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js" type="module"></script>
+  </head>
+  <body>
+    <h1>Snowpack Example</h1>
+
+    <fieldset>
+      <label for="urlInput">Host</label>
+      <input id="urlInput" type="text" value="ws://localhost:9001" />
+      <button id="connectButton">Connect</button>
+      <button id="disconnectButton">Disconnect</button>
+      <span id="connectOutput"></span>
+    </fieldset>
+
+    <fieldset>
+      <label for="topicFilterInput">Topic Filter</label>
+      <input id="topicFilterInput" type="text" value="foo/#" />
+      <button id="subscribeButton">Subscribe</button>
+      <button id="unsubscribeButton">Unsubscribe</button>
+      <span id="subscribeOutput"></span>
+    </fieldset>
+
+    <fieldset>
+      <label for="topicInput">Topic</label>
+      <input id="topicInput" type="text" value="foo/bar" />
+      <label for="payloadInput">Payload</label>
+      <input id="payloadInput" type="text" value="baz" />
+      <label for="qosInput">QoS</label>
+      <input id="qosInput" type="number" value="1" />
+      <button id="publishButton">Publish</button>
+      <span id="publishOutput"></span>
+    </fieldset>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Topic</th>
+          <th>Payload</th>
+        </tr>
+      </thead>
+      <tbody id="messagesOutput"></tbody>
+    </table>
+  </body>
+</html>
diff --git a/examples/snowpack/index.js b/examples/snowpack/index.js
@@ -0,0 +1,83 @@
+import { Client } from '@jdiamond/mqtt-browser';
+
+let client = null;
+
+const textDecoder = new TextDecoder();
+
+const urlInput = document.getElementById('urlInput');
+const topicFilterInput = document.getElementById('topicFilterInput');
+const topicInput = document.getElementById('topicInput');
+const payloadInput = document.getElementById('payloadInput');
+const qosInput = document.getElementById('qosInput');
+
+const connectOutput = document.getElementById('connectOutput');
+const subscribeOutput = document.getElementById('subscribeOutput');
+const publishOutput = document.getElementById('publishOutput');
+const messagesOutput = document.getElementById('messagesOutput');
+
+const connectButton = document.getElementById('connectButton');
+const disconnectButton = document.getElementById('disconnectButton');
+const subscribeButton = document.getElementById('subscribeButton');
+const unsubscribeButton = document.getElementById('unsubscribeButton');
+const publishButton = document.getElementById('publishButton');
+
+async function connect() {
+  const url = urlInput.value;
+
+  client = new Client({ url });
+
+  client.on('message', receiveMessage);
+
+  connectOutput.textContent = 'Connecting';
+
+  const response = await client.connect();
+
+  connectOutput.textContent = JSON.stringify(response);
+}
+
+async function disconnect() {
+  connectOutput.textContent = 'Disconnecting';
+
+  await client.disconnect();
+
+  connectOutput.textContent = 'Not Connected';
+}
+
+async function subscribe() {
+  const response = await client.subscribe(topicFilterInput.value);
+
+  subscribeOutput.textContent = JSON.stringify(response);
+}
+
+async function unsubscribe() {
+  const response = await client.unsubscribe(topicFilterInput.value);
+
+  subscribeOutput.textContent = JSON.stringify(response);
+}
+
+async function publish() {
+  const response = await client.publish(topicInput.value, payloadInput.value, {
+    qos: qosInput.valueAsNumber,
+  });
+
+  console.log(response);
+
+  publishOutput.textContent = JSON.stringify(response);
+}
+
+function receiveMessage(topic, payload) {
+  console.log(topic, payload);
+
+  const decodedPayload = textDecoder.decode(payload);
+
+  const tr = messagesOutput.insertRow();
+
+  tr.insertCell().textContent = topic;
+  tr.insertCell().textContent = decodedPayload;
+}
+
+connectButton.addEventListener('click', connect);
+disconnectButton.addEventListener('click', disconnect);
+subscribeButton.addEventListener('click', subscribe);
+unsubscribeButton.addEventListener('click', unsubscribe);
+publishButton.addEventListener('click', publish);
diff --git a/examples/snowpack/package.json b/examples/snowpack/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "mqtt-example-snowpack",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "snowpack dev",
+    "build": "snowpack build"
+  },
+  "keywords": [],
+  "author": "Jason Diamond",
+  "license": "ISC",
+  "dependencies": {
+    "@jdiamond/mqtt-browser": "^0.1.2"
+  },
+  "devDependencies": {
+    "snowpack": "^3.3.3"
+  }
+}