js-waku-examples/light-js/index.html

135 lines
4.9 KiB
HTML
Raw Normal View History

2022-09-13 14:12:39 +00:00
<!DOCTYPE html>
2022-12-12 04:59:35 +00:00
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
2022-09-13 14:12:39 +00:00
<title>JS-Waku light node example</title>
2023-01-04 20:15:56 +00:00
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
2022-12-12 04:59:35 +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>
2023-04-17 18:22:24 +00:00
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
2022-12-12 04:59:35 +00:00
<script type="module">
2023-04-17 18:22:24 +00:00
import * as utils from "https://unpkg.com/@waku/utils@0.0.4/bundle/bytes.js";
import { createLightNode } from "https://unpkg.com/@waku/create@0.0.12/bundle/index.js";
2022-12-12 04:59:35 +00:00
import {
2022-12-16 04:02:23 +00:00
waitForRemotePeer,
createEncoder,
createDecoder,
2023-04-17 18:22:24 +00:00
} from "https://unpkg.com/@waku/core@0.0.16/bundle/index.js";
2022-12-12 04:59:35 +00:00
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";
2022-12-16 04:02:23 +00:00
const decoder = createDecoder(ContentTopic);
2023-04-17 18:22:24 +00:00
const encoder = createEncoder({ contentTopic: ContentTopic });
2022-12-12 04:59:35 +00:00
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 14:12:39 +00:00
if (!ma) {
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
return;
2022-09-13 14:12:39 +00:00
}
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "<p>Dialing peer.</p>";
2023-04-17 18:22:24 +00:00
const multiaddr = MultiformatsMultiaddr.multiaddr(ma);
await node.dial(multiaddr, ["filter", "lightpush"]);
2022-09-13 14:12:39 +00:00
await waitForRemotePeer(node, ["filter", "lightpush"]);
const peers = await node.libp2p.peerStore.all();
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "<p>Peer dialed.</p>";
remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
2022-09-13 14:12:39 +00:00
textInput.disabled = false;
sendButton.disabled = false;
subscribeButton.disabled = false;
2022-12-12 04:59:35 +00:00
};
2022-09-13 14:12:39 +00:00
2022-12-12 04:59:35 +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 14:12:39 +00:00
2022-12-12 04:59:35 +00:00
subscribeButton.onclick = async () => {
unsubscribe = await node.filter.subscribe([decoder], callback);
2022-09-13 14:12:39 +00:00
unsubscribeButton.disabled = false;
2022-09-20 01:27:08 +00:00
subscribeButton.disabled = true;
2022-12-12 04:59:35 +00:00
};
2022-09-13 14:12:39 +00:00
2022-12-12 04:59:35 +00:00
unsubscribeButton.onclick = async () => {
2022-09-13 14:12:39 +00:00
await unsubscribe();
2022-12-12 04:59:35 +00:00
unsubscribe = undefined;
2022-09-13 14:12:39 +00:00
unsubscribeButton.disabled = true;
2022-09-20 01:27:08 +00:00
subscribeButton.disabled = false;
2022-12-12 04:59:35 +00:00
};
2022-09-13 14:12:39 +00:00
2022-12-12 04:59:35 +00:00
sendButton.onclick = async () => {
2022-09-13 14:12:39 +00:00
const text = textInput.value;
2023-04-17 18:22:24 +00:00
await node.lightPush.send(encoder, {
2022-12-12 04:59:35 +00:00
payload: utils.utf8ToBytes(text),
});
console.log("Message sent!");
2022-09-13 14:12:39 +00:00
textInput.value = null;
2022-12-12 04:59:35 +00:00
};
</script>
</body>
2022-09-13 14:12:39 +00:00
</html>