+
- Status:
-Local Peer Id
- +
+
+ Peer's information
-Remote Peer Id
- +Content topic
+ -Remote peer's multiaddr
- +Local Peer Id
+ - +Remote Peer Id
+ -
-
-
+ Remote peer's multiaddr
+ +
-
-
+
+
+
diff --git a/light-chat/index.js b/light-chat/index.js
index 5b35c1a..aafbc95 100644
--- a/light-chat/index.js
+++ b/light-chat/index.js
@@ -7,16 +7,41 @@ const MULTI_ADDR = "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/
const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
const PROTOCOLS = ["filter", "lightpush"];
-const { sendMessage, unsubscribeFromMessages } = await initializeWakuContext({
- protocols: PROTOCOLS,
- multiAddr: MULTI_ADDR,
- contentTopic: CONTENT_TOPIC,
- onMessageReceived: ({ nick, timestamp, text }) => {
- console.log(timestamp, '\t', nick, ": ", text);
- },
+runApp().catch((err) => {
+ console.error(err);
});
-async function initializeWakuContext({
+async function runApp() {
+ const ui = initUI();
+
+ ui.setStatus("connecting...");
+
+ const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({
+ protocols: PROTOCOLS,
+ multiAddr: MULTI_ADDR,
+ contentTopic: CONTENT_TOPIC,
+ onMessageReceived: ui.renderMessage,
+ });
+
+ ui.setStatus("connected");
+
+ ui.setLocalPeer(info.localPeerId);
+ ui.setRemotePeer(info.remotePeerId);
+ ui.setRemoteMultiAddr(info.multiAddr);
+ ui.setContentTopic(info.contentTopic);
+
+ ui.onSendMessage(sendMessage);
+
+ ui.onExit(() => {
+ ui.setStatus("disconnecting...");
+ unsubscribeFromMessages().then(() => {
+ ui.setStatus("disconnected");
+ ui.resetMessages();
+ });
+ });
+}
+
+async function initWakuContext({
multiAddr,
protocols,
contentTopic,
@@ -46,9 +71,24 @@ async function initializeWakuContext({
});
});
+ const localPeerId = node.libp2p.peerId.toString();
+
+ const remotePeers = await node.libp2p.peerStore.all();
+ const remotePeerId = remotePeers[0].id.toString();
+
return {
unsubscribeFromMessages,
+ info: {
+ multiAddr,
+ contentTopic,
+ localPeerId,
+ remotePeerId,
+ },
sendMessage: async ({ text, nick }) => {
+ if (!text || !nick) {
+ return;
+ }
+
const protoMessage = ChatMessage.create({
nick,
timestamp: Date.now(),
@@ -61,3 +101,68 @@ async function initializeWakuContext({
}
};
}
+
+// UI adapter
+function initUI() {
+ const exitButton = document.getElementById("exit");
+ const sendButton = document.getElementById("send");
+
+ const statusBlock = document.getElementById("status");
+ const localPeerBlock = document.getElementById("localPeerId");
+ const remotePeerId = document.getElementById("remotePeerId");
+ const remoteMultiAddr = document.getElementById("remoteMultiAddr");
+ const contentTopicBlock = document.getElementById("contentTopic");
+
+ const messagesBlock = document.getElementById("messages");
+
+ const nickText = document.getElementById("nickText");
+ const messageText = document.getElementById("messageText");
+
+ return {
+ // UI events
+ onExit: (cb) => {
+ exitButton.addEventListener("click", cb);
+ },
+ onSendMessage: (cb) => {
+ sendButton.addEventListener("click", () => {
+ cb({
+ nick: nickText.value,
+ text: messageText.value,
+ }).then(() => {
+ messageText.value = "";
+ });
+ });
+ },
+ // UI renderers
+ setStatus: (value) => {
+ statusBlock.innerText = value.toString();
+ },
+ setLocalPeer: (id) => {
+ localPeerBlock.innerText = id.toString();
+ },
+ setRemotePeer: (id) => {
+ remotePeerId.innerText = id.toString();
+ },
+ setRemoteMultiAddr: (multiAddr) => {
+ remoteMultiAddr.innerText = multiAddr.toString();
+ },
+ setContentTopic: (topic) => {
+ contentTopicBlock.innerText = topic.toString();
+ },
+ renderMessage: (messageObj) => {
+ const { nick, text, timestamp } = messageObj;
+ const date = new Date(timestamp);
+
+ // WARNING: XSS vulnerable
+ messagesBlock.innerHTML += `
+