add light-chat basic functionality + template for html

Signed-off-by: weboko <anon@mail.com>
2022-12-07 23:46:22 +01:00 · 2022-12-07 23:46:22 +01:00 · 0227dfe592
parent 8c8865896d
commit 0227dfe592
3 changed files with 97 additions and 0 deletions
--- a/light-chat/index.html
+++ b/light-chat/index.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8'/>
+        <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
+        <title>JS-Waku light chat</title>
+    </head>
+
+    <body>
+        <h2>Status</h2>
+        <div id='status'></div>
+
+        <h2>Local Peer Id</h2>
+        <div id='peer-id'></div>
+
+        <h2>Remote Peer Id</h2>
+        <div id='remote-peer-id'></div>
+
+        <h2>Remote peer's multiaddr</h2>
+        <div id='remote-multiaddr'></div>
+
+        <div id="messages"></div>
+
+        <div class="inputArea">
+            <input type="text" />
+        </div>
+
+        <div class="controls">
+            <button>Send</button>
+            <button>Exit chat</button>
+        </div>
+
+        <script type='module' src="./index.js"></script>
+    </body>
+</html>
--- a/light-chat/index.js
+++ b/light-chat/index.js
@ -0,0 +1,48 @@
+import * as utils from 'https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js';
+import * as wakuCreate from 'https://unpkg.com/@waku/create@0.0.4/bundle/index.js'
+import { waitForRemotePeer } from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js'
+import * as wakuMessage from 'https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js'
+
+const MULTI_ADDR = "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm";
+const CONTENT_TOPIC = "/js-waku-examples/1/chat/utf8";
+const PROTOCOLS = ["filter", "lightpush"];
+
+const { sendMessage, unsubscribeFromMessages } = await initializeWakuContext({
+    multiAddr: MULTI_ADDR,
+    protocols: PROTOCOLS,
+    contentTopic: CONTENT_TOPIC,
+    onMessageReceived: (message) => {
+        console.log(message);
+    },
+});
+
+async function initializeWakuContext({
+    multiAddr,
+    protocols,
+    contentTopic,
+    onMessageReceived,
+}) {
+    const Decoder = new wakuMessage.DecoderV0(contentTopic);
+    const Encoder = new wakuMessage.EncoderV0(contentTopic);
+
+    const node = await wakuCreate.createLightNode();
+
+    await node.start();
+
+    await node.dial(multiAddr, protocols);
+    await waitForRemotePeer(node, protocols);
+
+    const unsubscribeFromMessages = await node.filter.subscribe([Decoder], (wakuMessage) => {
+        const messageText = utils.bytesToUtf8(wakuMessage.payload);
+        onMessageReceived(messageText);
+    });
+
+    return {
+        unsubscribeFromMessages,
+        sendMessage: async (value) => {
+            await node.lightPush.push(Encoder, {
+                payload: utils.utf8ToBytes(value)
+            });
+        }
+    };
+}
--- a/light-chat/package.json
+++ b/light-chat/package.json
@ -0,0 +1,14 @@
+{
+    "name": "light-chat",
+    "version": "0.1.0",
+    "private": true,
+    "homepage": "/light-chat",
+    "devDependencies": {
+        "serve": "^14.1.2",
+        "gh-pages": "^4.0.0"
+    },
+    "scripts": {
+        "start": "serve .",
+        "deploy": "gh-pages -d ."
+    }
+}