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

132 lines
4.7 KiB
HTML
Raw Normal View History

2022-09-06 18:31:23 +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-06 18:31:23 +00:00
<title>JS-Waku Chat</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><h1>Waku Node Status</h1></div>
<div id="status"></div>
<label for="textInput">Message text</label>
<input
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send Message using Relay
</button>
<div><h1>Messages</h1></div>
<div id="messages"></div>
<script type="module">
/**
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
*/
import {
2022-12-16 04:02:23 +00:00
waitForRemotePeer,
createDecoder,
createEncoder,
2023-06-20 22:27:04 +00:00
bytesToUtf8,
utf8ToBytes,
createRelayNode,
} from "https://unpkg.com/@waku/sdk@0.0.16/bundle/index.js";
2022-12-12 04:59:35 +00:00
const statusDiv = document.getElementById("status");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// Recommendation: `/dapp-name/version/functionality/codec`
// We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = "/js-waku-examples/1/chat/utf8";
// Prepare encoder and decoder, `V0` for clear text messages.
2023-04-17 18:46:08 +00:00
const encoder = createEncoder({ contentTopic });
2022-12-16 04:02:23 +00:00
const decoder = createDecoder(contentTopic);
2022-12-12 04:59:35 +00:00
try {
statusDiv.innerHTML = "<p>Starting</p>";
2022-09-06 18:31:23 +00:00
// Create and starts a Waku node.
2023-04-17 18:46:08 +00:00
// `defaultBootstrap: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// `emitSelf`: emits event of sent message to itself and invokes subscribers by it
2022-09-06 18:31:23 +00:00
// We are currently working on migrating this method to DNS Discovery.
//
2022-09-23 16:00:46 +00:00
// https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html
2023-04-17 18:46:08 +00:00
const waku = await createRelayNode({
emitSelf: true,
defaultBootstrap: true,
});
2022-09-06 18:31:23 +00:00
await waku.start();
2022-12-07 09:35:30 +00:00
// Add a hook to process all incoming messages on a specified content topic.
2022-09-06 18:31:23 +00:00
//
2022-12-07 09:35:30 +00:00
// https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver
2023-04-17 18:46:08 +00:00
waku.relay.subscribe(
2022-12-12 04:59:35 +00:00
decoder,
(message) => {
2022-09-06 18:31:23 +00:00
// Checks there is a payload on the message.
// Waku Message is encoded in protobuf, in proto v3 fields are always optional.
//
2022-12-07 09:35:30 +00:00
// https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload
2022-12-12 04:59:35 +00:00
if (!message.payload) return;
2022-09-06 18:31:23 +00:00
// Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data
// structure of their choice.
//
2022-12-07 09:35:30 +00:00
// https://js.waku.org/functions/index.utils.bytesToUtf8.html
2022-11-20 01:31:52 +00:00
const text = bytesToUtf8(message.payload);
2022-12-12 04:59:35 +00:00
messagesDiv.innerHTML =
`<p>${text}</p><br />` + messagesDiv.innerHTML;
},
[contentTopic]
);
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "<p>Connecting to a peer</p>";
2022-09-06 18:31:23 +00:00
// Best effort method that waits for the Waku node to be connected to remote
// waku nodes (peers) and for appropriate handshakes to be done.
//
2022-12-07 09:35:30 +00:00
// https://js.waku.org/functions/lib_wait_for_remote_peer.waitForRemotePeer.html
2022-09-06 18:31:23 +00:00
await waitForRemotePeer(waku);
// We are now connected to a remote peer, let's define the `sendMessage`
// function that sends the text input over Waku Relay, the gossipsub
// protocol.
sendButton.onclick = async () => {
2022-12-12 04:59:35 +00:00
const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, { payload });
console.log("Message sent!");
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
// Reset the text input.
textInput.value = null;
2022-09-06 18:31:23 +00:00
};
// Ready to send & receive messages, enable text input.
textInput.disabled = false;
sendButton.disabled = false;
2022-12-12 04:59:35 +00:00
statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
statusDiv.innerHTML = "Failed to start application";
2022-09-06 18:31:23 +00:00
console.log(e);
2022-12-12 04:59:35 +00:00
}
</script>
</body>
2022-09-06 18:31:23 +00:00
</html>