2022-09-13 12:46:34 +00:00
|
|
|
<!DOCTYPE html>
|
2022-12-09 11:29:11 +00:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
2022-09-13 12:46:34 +00:00
|
|
|
<title>JS-Waku light node example</title>
|
2022-12-09 11:29:11 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div><h2>Status</h2></div>
|
|
|
|
|
<div id="status"></div>
|
|
|
|
|
|
|
|
|
|
<div><h2>Local Peer Id</h2></div>
|
|
|
|
|
<div id="peer-id"></div>
|
|
|
|
|
|
|
|
|
|
<div><h2>Remote Peer Id</h2></div>
|
|
|
|
|
<div id="remote-peer-id"></div>
|
|
|
|
|
|
|
|
|
|
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
|
|
|
|
<input
|
|
|
|
|
id="remote-multiaddr"
|
|
|
|
|
type="text"
|
|
|
|
|
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
|
|
|
|
|
/>
|
|
|
|
|
<button disabled id="dial" type="button">Dial</button>
|
|
|
|
|
<br />
|
|
|
|
|
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
|
|
|
|
|
<button disabled id="unsubscribe" type="button">
|
|
|
|
|
Unsubscribe with Filter
|
|
|
|
|
</button>
|
|
|
|
|
<br />
|
|
|
|
|
<label for="textInput">Message text</label>
|
|
|
|
|
<input id="textInput" placeholder="Type your message here" type="text" />
|
|
|
|
|
<button disabled id="sendButton" type="button">
|
|
|
|
|
Send message using Light Push
|
|
|
|
|
</button>
|
|
|
|
|
<br />
|
|
|
|
|
<div id="messages"></div>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import * as utils from "https://unpkg.com/@waku/byte-utils@0.0.2/bundle/index.js";
|
|
|
|
|
import { createLightNode } 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 {
|
|
|
|
|
EncoderV0,
|
|
|
|
|
DecoderV0,
|
|
|
|
|
} from "https://unpkg.com/@waku/core@0.0.6/bundle/lib/waku_message/version_0.js";
|
|
|
|
|
|
|
|
|
|
const peerIdDiv = document.getElementById("peer-id");
|
|
|
|
|
const remotePeerIdDiv = document.getElementById("remote-peer-id");
|
|
|
|
|
const statusDiv = document.getElementById("status");
|
|
|
|
|
const remoteMultiAddrDiv = document.getElementById("remote-multiaddr");
|
|
|
|
|
const dialButton = document.getElementById("dial");
|
|
|
|
|
const subscribeButton = document.getElementById("subscribe");
|
|
|
|
|
const unsubscribeButton = document.getElementById("unsubscribe");
|
|
|
|
|
const messagesDiv = document.getElementById("messages");
|
|
|
|
|
const textInput = document.getElementById("textInput");
|
|
|
|
|
const sendButton = document.getElementById("sendButton");
|
|
|
|
|
|
|
|
|
|
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
|
|
|
|
const decoder = new DecoderV0(ContentTopic);
|
|
|
|
|
const encoder = new EncoderV0(ContentTopic);
|
|
|
|
|
let messages = [];
|
|
|
|
|
let unsubscribe;
|
|
|
|
|
|
|
|
|
|
const updateMessages = (msgs, div) => {
|
|
|
|
|
div.innerHTML = "<ul>";
|
|
|
|
|
messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
|
|
|
|
|
div.innerHTML += "</ul>";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
|
|
|
|
|
const node = await createLightNode();
|
|
|
|
|
|
|
|
|
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
|
|
|
|
await node.start();
|
|
|
|
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
|
|
|
|
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
|
|
|
|
|
dialButton.disabled = false;
|
|
|
|
|
|
|
|
|
|
dialButton.onclick = async () => {
|
|
|
|
|
const ma = remoteMultiAddrDiv.value;
|
2022-09-13 12:46:34 +00:00
|
|
|
if (!ma) {
|
2022-12-09 11:29:11 +00:00
|
|
|
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
|
|
|
|
|
return;
|
2022-09-13 12:46:34 +00:00
|
|
|
}
|
2022-12-09 11:29:11 +00:00
|
|
|
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
|
|
|
|
await node.dial(ma, ["filter", "lightpush"]);
|
2022-09-13 12:46:34 +00:00
|
|
|
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
|
|
|
|
const peers = await node.libp2p.peerStore.all();
|
2022-12-09 11:29:11 +00:00
|
|
|
statusDiv.innerHTML = "<p>Peer dialed.</p>";
|
|
|
|
|
remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
|
2022-09-13 12:46:34 +00:00
|
|
|
textInput.disabled = false;
|
|
|
|
|
sendButton.disabled = false;
|
|
|
|
|
subscribeButton.disabled = false;
|
2022-12-09 11:29:11 +00:00
|
|
|
};
|
2022-09-13 12:46:34 +00:00
|
|
|
|
2022-12-09 11:29:11 +00:00
|
|
|
const callback = (wakuMessage) => {
|
|
|
|
|
const text = utils.bytesToUtf8(wakuMessage.payload);
|
|
|
|
|
const timestamp = wakuMessage.timestamp.toString();
|
|
|
|
|
messages.push(text + " - " + timestamp);
|
|
|
|
|
updateMessages(messages, messagesDiv);
|
|
|
|
|
};
|
2022-09-13 12:46:34 +00:00
|
|
|
|
2022-12-09 11:29:11 +00:00
|
|
|
subscribeButton.onclick = async () => {
|
|
|
|
|
unsubscribe = await node.filter.subscribe([decoder], callback);
|
2022-09-13 12:46:34 +00:00
|
|
|
unsubscribeButton.disabled = false;
|
2022-09-20 01:16:17 +00:00
|
|
|
subscribeButton.disabled = true;
|
2022-12-09 11:29:11 +00:00
|
|
|
};
|
2022-09-13 12:46:34 +00:00
|
|
|
|
2022-12-09 11:29:11 +00:00
|
|
|
unsubscribeButton.onclick = async () => {
|
2022-09-13 12:46:34 +00:00
|
|
|
await unsubscribe();
|
2022-12-09 11:29:11 +00:00
|
|
|
unsubscribe = undefined;
|
2022-09-13 12:46:34 +00:00
|
|
|
unsubscribeButton.disabled = true;
|
2022-09-20 01:16:17 +00:00
|
|
|
subscribeButton.disabled = false;
|
2022-12-09 11:29:11 +00:00
|
|
|
};
|
2022-09-13 12:46:34 +00:00
|
|
|
|
2022-12-09 11:29:11 +00:00
|
|
|
sendButton.onclick = async () => {
|
2022-09-13 12:46:34 +00:00
|
|
|
const text = textInput.value;
|
|
|
|
|
|
2022-12-09 11:29:11 +00:00
|
|
|
await node.lightPush.push(encoder, {
|
|
|
|
|
payload: utils.utf8ToBytes(text),
|
|
|
|
|
});
|
|
|
|
|
console.log("Message sent!");
|
2022-09-13 12:46:34 +00:00
|
|
|
textInput.value = null;
|
2022-12-09 11:29:11 +00:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2022-09-13 12:46:34 +00:00
|
|
|
</html>
|
