update examples

pinax-network · Oct 1, 2023 · ae90498 · ae90498
1 parent ebf5a90
commit ae90498
Show file tree

Hide file tree

Showing 18 changed files with 44 additions and 291 deletions.
diff --git a/examples/bun/client.ts b/examples/bun/client.ts
@@ -1,8 +1,10 @@
+// bun run client.ts
+
 const ws = new WebSocket("ws://localhost:3000");
 
 ws.onopen = () => {
     console.log("Connected!");
-    ws.send("6aa24e6aa34db4a4faf55c69c6f612aeb06053c2")
+    ws.send("90a60a0dccc4ba24b84f93fb777af45cd7a70350")
 };
 
 ws.onmessage = (event) => {

diff --git a/examples/html/index.html b/examples/html/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Websocket Example</title>
+</head>
+<body>
+    <script type="module" src="./index.js"></script>
+    <h1>Substreams WebSocket</h1>
+    <div>Hash Module</div>
+    <form id="form">
+        <input type="text" id="message" size="45" placeholder="Hash Module" value="90a60a0dccc4ba24b84f93fb777af45cd7a70350">
+        <input type="button" id="send" value="Send">
+    </form>
+    <div id="messages"></div>
+</body>
+</html>
diff --git a/examples/html/index.js b/examples/html/index.js
@@ -0,0 +1,19 @@
+const messages = document.querySelector("#messages");
+const send = document.querySelector("#send");
+const message = document.querySelector("#message");
+
+const ws = new WebSocket("ws://localhost:3000");
+
+ws.onopen = () => {
+    console.log("Connected!");
+    ws.send("90a60a0dccc4ba24b84f93fb777af45cd7a70350");
+};
+
+ws.onmessage = (event) => {
+    console.log(`Message from server: ${event.data}`);
+    messages.innerHTML += `<li>${event.data}</li>`;
+};
+
+send.addEventListener("click", () => {
+    ws.send(message.value)
+})
diff --git a/examples/next/.gitignore b/examples/next/.gitignore
diff --git a/examples/next/README.md b/examples/next/README.md
diff --git a/examples/next/app/favicon.ico b/examples/next/app/favicon.ico
diff --git a/examples/next/app/globals.css b/examples/next/app/globals.css
diff --git a/examples/next/app/layout.tsx b/examples/next/app/layout.tsx
diff --git a/examples/next/app/page.tsx b/examples/next/app/page.tsx
diff --git a/examples/next/components.json b/examples/next/components.json
diff --git a/examples/next/components/component.tsx b/examples/next/components/component.tsx
diff --git a/examples/next/lib/utils.ts b/examples/next/lib/utils.ts
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
diff --git a/examples/next/package.json b/examples/next/package.json
diff --git a/examples/next/postcss.config.js b/examples/next/postcss.config.js
diff --git a/examples/next/tailwind.config.ts b/examples/next/tailwind.config.ts
diff --git a/examples/next/tsconfig.json b/examples/next/tsconfig.json
diff --git a/index.ts b/index.ts
@@ -99,7 +99,7 @@ Bun.serve<{key: string}>({
       prometheus.active_connections.inc(1);
       prometheus.connected.inc(1);
       console.log('open', {key: ws.data.key, remoteAddress: ws.remoteAddress});
-      ws.send("🎉 Connected!");
+      ws.send(JSON.stringify({message: "🎉 Connected!"}));
     },
     close(ws, code, reason) {
       prometheus.active_connections.dec(1);
@@ -121,17 +121,17 @@ Bun.serve<{key: string}>({
       // Handle Subscribe
       const moduleHash = String(message);
       if ( ws.isSubscribed(moduleHash) ) {
-        ws.send(`⚠️ Already subscribed to ${moduleHash}.`);
+        ws.send(JSON.stringify({message: `⚠️ Already subscribed to ${moduleHash}.`}));
         console.log('already subscribed', {key: ws.data.key, remoteAddress: ws.remoteAddress, moduleHash});
         return;
       }
       if ( !sqlite.exists(db, "moduleHash", moduleHash) ) {
-        ws.send(`❌ ModuleHash ${moduleHash} not found.`);
+        ws.send(JSON.stringify({message: `❌ ModuleHash ${moduleHash} not found.`}));
         console.log('moduleHash not found', {key: ws.data.key, remoteAddress: ws.remoteAddress, moduleHash});
         return;
       }
       ws.subscribe(moduleHash);
-      ws.send(`🚀 Subscribed to ${moduleHash}!`);
+      ws.send(JSON.stringify({message: `🚀 Subscribed to ${moduleHash}!`}));
       console.log('subscribed', {key: ws.data.key, remoteAddress: ws.remoteAddress, moduleHash});
     },
   },