chore(light-chat): bump @waku/core to 0.0.7
This commit is contained in:
fryorcraken.eth
parent
644e8ff703
commit
a6f292fb04
|
|
@ -1,164 +1,171 @@
|
||||||
import * as utils from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
|
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 * as wakuCreate from "https://unpkg.com/@waku/create@0.0.5/bundle/index.js";
|
||||||
import { waitForRemotePeer } from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/wait_for_remote_peer.js";
|
import {
|
||||||
import * as wakuMessage from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
|
waitForRemotePeer,
|
||||||
|
createDecoder,
|
||||||
|
createEncoder,
|
||||||
|
} from "https://unpkg.com/@waku/core@0.0.7/bundle/index.js";
|
||||||
|
|
||||||
const MULTI_ADDR = "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm";
|
const MULTI_ADDR =
|
||||||
|
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm";
|
||||||
const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
|
const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
|
||||||
const PROTOCOLS = ["filter", "lightpush"];
|
const PROTOCOLS = ["filter", "lightpush"];
|
||||||
|
|
||||||
const ui = initUI();
|
const ui = initUI();
|
||||||
runApp(ui).catch((err) => {
|
runApp(ui).catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
ui.setStatus(`error: ${err.message}`, "error");
|
ui.setStatus(`error: ${err.message}`, "error");
|
||||||
});
|
});
|
||||||
|
|
||||||
async function runApp(ui) {
|
async function runApp(ui) {
|
||||||
ui.setStatus("connecting...", "progress");
|
ui.setStatus("connecting...", "progress");
|
||||||
|
|
||||||
const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({
|
const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({
|
||||||
protocols: PROTOCOLS,
|
protocols: PROTOCOLS,
|
||||||
multiAddr: MULTI_ADDR,
|
multiAddr: MULTI_ADDR,
|
||||||
contentTopic: CONTENT_TOPIC,
|
contentTopic: CONTENT_TOPIC,
|
||||||
onMessageReceived: ui.renderMessage,
|
onMessageReceived: ui.renderMessage,
|
||||||
});
|
});
|
||||||
|
|
||||||
ui.setStatus("connected", "success");
|
ui.setStatus("connected", "success");
|
||||||
|
|
||||||
ui.setLocalPeer(info.localPeerId);
|
ui.setLocalPeer(info.localPeerId);
|
||||||
ui.setRemotePeer(info.remotePeerIds);
|
ui.setRemotePeer(info.remotePeerIds);
|
||||||
ui.setRemoteMultiAddr(info.multiAddr);
|
ui.setRemoteMultiAddr(info.multiAddr);
|
||||||
ui.setContentTopic(info.contentTopic);
|
ui.setContentTopic(info.contentTopic);
|
||||||
|
|
||||||
ui.onSendMessage(sendMessage);
|
ui.onSendMessage(sendMessage);
|
||||||
|
|
||||||
ui.onExit(async () => {
|
ui.onExit(async () => {
|
||||||
ui.setStatus("disconnecting...", "progress");
|
ui.setStatus("disconnecting...", "progress");
|
||||||
await unsubscribeFromMessages();
|
await unsubscribeFromMessages();
|
||||||
ui.setStatus("disconnected", "terminated");
|
ui.setStatus("disconnected", "terminated");
|
||||||
ui.resetMessages();
|
ui.resetMessages();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function initWakuContext({
|
async function initWakuContext({
|
||||||
multiAddr,
|
multiAddr,
|
||||||
protocols,
|
protocols,
|
||||||
contentTopic,
|
contentTopic,
|
||||||
onMessageReceived,
|
onMessageReceived,
|
||||||
}) {
|
}) {
|
||||||
const Decoder = new wakuMessage.DecoderV0(contentTopic);
|
const Decoder = createDecoder(contentTopic);
|
||||||
const Encoder = new wakuMessage.EncoderV0(contentTopic);
|
const Encoder = createEncoder(contentTopic);
|
||||||
|
|
||||||
const ChatMessage = new protobuf.Type("ChatMessage")
|
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||||
.add(new protobuf.Field("nick", 2, "string"))
|
.add(new protobuf.Field("nick", 2, "string"))
|
||||||
.add(new protobuf.Field("text", 3, "bytes"));
|
.add(new protobuf.Field("text", 3, "bytes"));
|
||||||
|
|
||||||
const node = await wakuCreate.createLightNode({ defaultBootstrap: true });
|
const node = await wakuCreate.createLightNode({ defaultBootstrap: true });
|
||||||
|
|
||||||
await node.start();
|
await node.start();
|
||||||
await waitForRemotePeer(node, protocols);
|
await waitForRemotePeer(node, protocols);
|
||||||
|
|
||||||
// Set a filter by using Decoder for a given ContentTopic
|
// Set a filter by using Decoder for a given ContentTopic
|
||||||
const unsubscribeFromMessages = await node.filter.subscribe([Decoder], (wakuMessage) => {
|
const unsubscribeFromMessages = await node.filter.subscribe(
|
||||||
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
[Decoder],
|
||||||
onMessageReceived({
|
(wakuMessage) => {
|
||||||
...messageObj,
|
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||||
text: utils.bytesToUtf8(messageObj.text),
|
onMessageReceived({
|
||||||
});
|
...messageObj,
|
||||||
});
|
text: utils.bytesToUtf8(messageObj.text),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const localPeerId = node.libp2p.peerId.toString();
|
const localPeerId = node.libp2p.peerId.toString();
|
||||||
|
|
||||||
const remotePeers = await node.libp2p.peerStore.all();
|
const remotePeers = await node.libp2p.peerStore.all();
|
||||||
const remotePeerIds = remotePeers.map(peer => peer.id.toString());
|
const remotePeerIds = remotePeers.map((peer) => peer.id.toString());
|
||||||
|
|
||||||
return {
|
return {
|
||||||
unsubscribeFromMessages,
|
unsubscribeFromMessages,
|
||||||
info: {
|
info: {
|
||||||
multiAddr,
|
multiAddr,
|
||||||
contentTopic,
|
contentTopic,
|
||||||
localPeerId,
|
localPeerId,
|
||||||
remotePeerIds,
|
remotePeerIds,
|
||||||
},
|
},
|
||||||
sendMessage: async ({ text, nick }) => {
|
sendMessage: async ({ text, nick }) => {
|
||||||
if (!text || !nick) {
|
if (!text || !nick) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const protoMessage = ChatMessage.create({
|
const protoMessage = ChatMessage.create({
|
||||||
nick,
|
nick,
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
text: utils.utf8ToBytes(text),
|
text: utils.utf8ToBytes(text),
|
||||||
});
|
});
|
||||||
|
|
||||||
await node.lightPush.push(Encoder, {
|
await node.lightPush.push(Encoder, {
|
||||||
payload: ChatMessage.encode(protoMessage).finish(),
|
payload: ChatMessage.encode(protoMessage).finish(),
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// UI adapter
|
// UI adapter
|
||||||
function initUI() {
|
function initUI() {
|
||||||
const exitButton = document.getElementById("exit");
|
const exitButton = document.getElementById("exit");
|
||||||
const sendButton = document.getElementById("send");
|
const sendButton = document.getElementById("send");
|
||||||
|
|
||||||
const statusBlock = document.getElementById("status");
|
const statusBlock = document.getElementById("status");
|
||||||
const localPeerBlock = document.getElementById("localPeerId");
|
const localPeerBlock = document.getElementById("localPeerId");
|
||||||
const remotePeerId = document.getElementById("remotePeerId");
|
const remotePeerId = document.getElementById("remotePeerId");
|
||||||
const remoteMultiAddr = document.getElementById("remoteMultiAddr");
|
const remoteMultiAddr = document.getElementById("remoteMultiAddr");
|
||||||
const contentTopicBlock = document.getElementById("contentTopic");
|
const contentTopicBlock = document.getElementById("contentTopic");
|
||||||
|
|
||||||
const messagesBlock = document.getElementById("messages");
|
const messagesBlock = document.getElementById("messages");
|
||||||
|
|
||||||
const nickText = document.getElementById("nickText");
|
const nickText = document.getElementById("nickText");
|
||||||
const messageText = document.getElementById("messageText");
|
const messageText = document.getElementById("messageText");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// UI events
|
// UI events
|
||||||
onExit: (cb) => {
|
onExit: (cb) => {
|
||||||
exitButton.addEventListener("click", cb);
|
exitButton.addEventListener("click", cb);
|
||||||
},
|
},
|
||||||
onSendMessage: (cb) => {
|
onSendMessage: (cb) => {
|
||||||
sendButton.addEventListener("click", async () => {
|
sendButton.addEventListener("click", async () => {
|
||||||
await cb({
|
await cb({
|
||||||
nick: nickText.value,
|
nick: nickText.value,
|
||||||
text: messageText.value,
|
text: messageText.value,
|
||||||
});
|
});
|
||||||
messageText.value = "";
|
messageText.value = "";
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// UI renderers
|
// UI renderers
|
||||||
setStatus: (value, className) => {
|
setStatus: (value, className) => {
|
||||||
statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
|
statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
|
||||||
},
|
},
|
||||||
setLocalPeer: (id) => {
|
setLocalPeer: (id) => {
|
||||||
localPeerBlock.innerText = id.toString();
|
localPeerBlock.innerText = id.toString();
|
||||||
},
|
},
|
||||||
setRemotePeer: (ids) => {
|
setRemotePeer: (ids) => {
|
||||||
remotePeerId.innerText = ids.join("\n");
|
remotePeerId.innerText = ids.join("\n");
|
||||||
},
|
},
|
||||||
setRemoteMultiAddr: (multiAddr) => {
|
setRemoteMultiAddr: (multiAddr) => {
|
||||||
remoteMultiAddr.innerText = multiAddr.toString();
|
remoteMultiAddr.innerText = multiAddr.toString();
|
||||||
},
|
},
|
||||||
setContentTopic: (topic) => {
|
setContentTopic: (topic) => {
|
||||||
contentTopicBlock.innerText = topic.toString();
|
contentTopicBlock.innerText = topic.toString();
|
||||||
},
|
},
|
||||||
renderMessage: (messageObj) => {
|
renderMessage: (messageObj) => {
|
||||||
const { nick, text, timestamp } = messageObj;
|
const { nick, text, timestamp } = messageObj;
|
||||||
const date = new Date(timestamp);
|
const date = new Date(timestamp);
|
||||||
|
|
||||||
// WARNING: XSS vulnerable
|
// WARNING: XSS vulnerable
|
||||||
messagesBlock.innerHTML += `
|
messagesBlock.innerHTML += `
|
||||||
<div class="message">
|
<div class="message">
|
||||||
<p>${nick} <span>(${date.toDateString()})</span>:</p>
|
<p>${nick} <span>(${date.toDateString()})</span>:</p>
|
||||||
<p>${text}</p>
|
<p>${text}</p>
|
||||||
<div>
|
<div>
|
||||||
`;
|
`;
|
||||||
},
|
},
|
||||||
resetMessages: () => {
|
resetMessages: () => {
|
||||||
messagesBlock.innerHTML = "";
|
messagesBlock.innerHTML = "";
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue