Merge pull request #161 from waku-org/weboko/default-example
feat: light-chat example
This commit is contained in:
Sasha
GitHub
commit
afcdee5af6
|
|
@ -0,0 +1,50 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<h3>Status: <span id='status'></span></h3>
|
||||
|
||||
<details>
|
||||
<summary>Peer's information</summary>
|
||||
|
||||
<h4>Content topic</h4>
|
||||
<p id='contentTopic'></p>
|
||||
|
||||
<h4>Local Peer Id</h4>
|
||||
<p id='localPeerId'></p>
|
||||
|
||||
<h4>Remote Peer Id</h4>
|
||||
<p id='remotePeerId'></p>
|
||||
|
||||
<h4>Remote peer's multiaddr</h4>
|
||||
<p id='remoteMultiAddr'></p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div id="messages"></div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="inputArea">
|
||||
<input type="text" id="nickText" placeholder="Nickname" />
|
||||
<textarea id="messageText" placeholder="Message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="send">Send</button>
|
||||
<button id="exit">Exit chat</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js"></script>
|
||||
<script type='module' src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
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 = "/toy-chat/2/huilong/proto";
|
||||
const PROTOCOLS = ["filter", "lightpush"];
|
||||
|
||||
const ui = initUI();
|
||||
runApp(ui).catch((err) => {
|
||||
console.error(err);
|
||||
ui.setStatus(`error: ${err.message}`, "error");
|
||||
});
|
||||
|
||||
async function runApp(ui) {
|
||||
ui.setStatus("connecting...", "progress");
|
||||
|
||||
const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({
|
||||
protocols: PROTOCOLS,
|
||||
multiAddr: MULTI_ADDR,
|
||||
contentTopic: CONTENT_TOPIC,
|
||||
onMessageReceived: ui.renderMessage,
|
||||
});
|
||||
|
||||
ui.setStatus("connected", "success");
|
||||
|
||||
ui.setLocalPeer(info.localPeerId);
|
||||
ui.setRemotePeer(info.remotePeerIds);
|
||||
ui.setRemoteMultiAddr(info.multiAddr);
|
||||
ui.setContentTopic(info.contentTopic);
|
||||
|
||||
ui.onSendMessage(sendMessage);
|
||||
|
||||
ui.onExit(async () => {
|
||||
ui.setStatus("disconnecting...", "progress");
|
||||
await unsubscribeFromMessages();
|
||||
ui.setStatus("disconnected", "terminated");
|
||||
ui.resetMessages();
|
||||
});
|
||||
}
|
||||
|
||||
async function initWakuContext({
|
||||
multiAddr,
|
||||
protocols,
|
||||
contentTopic,
|
||||
onMessageReceived,
|
||||
}) {
|
||||
const Decoder = new wakuMessage.DecoderV0(contentTopic);
|
||||
const Encoder = new wakuMessage.EncoderV0(contentTopic);
|
||||
|
||||
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("nick", 2, "string"))
|
||||
.add(new protobuf.Field("text", 3, "bytes"));
|
||||
|
||||
const node = await wakuCreate.createLightNode({ defaultBootstrap: true });
|
||||
|
||||
await node.start();
|
||||
await waitForRemotePeer(node, protocols);
|
||||
|
||||
// Set a filter by using Decoder for a given ContentTopic
|
||||
const unsubscribeFromMessages = await node.filter.subscribe([Decoder], (wakuMessage) => {
|
||||
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||
onMessageReceived({
|
||||
...messageObj,
|
||||
text: utils.bytesToUtf8(messageObj.text),
|
||||
});
|
||||
});
|
||||
|
||||
const localPeerId = node.libp2p.peerId.toString();
|
||||
|
||||
const remotePeers = await node.libp2p.peerStore.all();
|
||||
const remotePeerIds = remotePeers.map(peer => peer.id.toString());
|
||||
|
||||
return {
|
||||
unsubscribeFromMessages,
|
||||
info: {
|
||||
multiAddr,
|
||||
contentTopic,
|
||||
localPeerId,
|
||||
remotePeerIds,
|
||||
},
|
||||
sendMessage: async ({ text, nick }) => {
|
||||
if (!text || !nick) {
|
||||
return;
|
||||
}
|
||||
|
||||
const protoMessage = ChatMessage.create({
|
||||
nick,
|
||||
timestamp: Date.now(),
|
||||
text: utils.utf8ToBytes(text),
|
||||
});
|
||||
|
||||
await node.lightPush.push(Encoder, {
|
||||
payload: ChatMessage.encode(protoMessage).finish(),
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 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", async () => {
|
||||
await cb({
|
||||
nick: nickText.value,
|
||||
text: messageText.value,
|
||||
});
|
||||
messageText.value = "";
|
||||
});
|
||||
},
|
||||
// UI renderers
|
||||
setStatus: (value, className) => {
|
||||
statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
|
||||
},
|
||||
setLocalPeer: (id) => {
|
||||
localPeerBlock.innerText = id.toString();
|
||||
},
|
||||
setRemotePeer: (ids) => {
|
||||
remotePeerId.innerText = ids.join("\n");
|
||||
},
|
||||
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 += `
|
||||
<div class="message">
|
||||
<p>${nick} <span>(${date.toDateString()})</span>:</p>
|
||||
<p>${text}</p>
|
||||
<div>
|
||||
`;
|
||||
},
|
||||
resetMessages: () => {
|
||||
messagesBlock.innerHTML = "";
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -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 ."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
details p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
line-height: 1rem;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 800px;
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
#messages {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.message + .message {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.message :first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.message span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.inputArea {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#send {
|
||||
background-color: #32d1a0;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
#send:hover {
|
||||
background-color: #3abd96;
|
||||
}
|
||||
#send:active {
|
||||
background-color: #3ba183;
|
||||
}
|
||||
|
||||
#exit {
|
||||
color: white;
|
||||
border: none;
|
||||
background-color: #ff3a31;
|
||||
}
|
||||
#exit:hover {
|
||||
background-color: #e4423a;
|
||||
}
|
||||
#exit:active {
|
||||
background-color: #c84740;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #3ba183;
|
||||
}
|
||||
|
||||
.progress {
|
||||
color: #9ea13b;
|
||||
}
|
||||
|
||||
.terminated {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c84740;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
}
|
||||
Loading…
Reference in New Issue