diff --git a/relay-js/index.html b/relay-js/index.html index bedcbf1..8ec8633 100644 --- a/relay-js/index.html +++ b/relay-js/index.html @@ -26,15 +26,10 @@ * Recommended payload is protobuf. Using simple utf-8 string for demo purposes only. */ - import { - WakuMessage - } from 'https://unpkg.com/js-waku@0.28.1/bundle/index.js'; - import { - createPrivacyNode - } from 'https://unpkg.com/js-waku@0.28.1/bundle/lib/create_waku.js' - import { - waitForRemotePeer - } from 'https://unpkg.com/js-waku@0.28.1/bundle/lib/wait_for_remote_peer.js' + import {utils} from 'https://unpkg.com/js-waku@0.29.0/bundle/index.js'; + import {createPrivacyNode} from 'https://unpkg.com/js-waku@0.29.0/bundle/lib/create_waku.js' + import {waitForRemotePeer} from 'https://unpkg.com/js-waku@0.29.0/bundle/lib/wait_for_remote_peer.js' + import {DecoderV0, EncoderV0} from "https://unpkg.com/js-waku@0.29.0/bundle/lib/waku_message/version_0.js"; const statusDiv = document.getElementById('status'); const messagesDiv = document.getElementById('messages'); @@ -52,6 +47,11 @@ // for simplicity's sake. const contentTopic = '/js-waku-examples/1/chat/utf8'; + // Prepare encoder and decoder, `V0` for clear text messages. + + const encoder = new EncoderV0(contentTopic); + const decoder = new DecoderV0(contentTopic); + try { statusDiv.innerHTML = '

Starting

'; @@ -59,20 +59,20 @@ // `default: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes. // We are currently working on migrating this method to DNS Discovery. // - // https://js-waku.wakuconnect.dev/classes/waku.Waku.html#create + // https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html const waku = await createPrivacyNode({defaultBootstrap: true}); await waku.start(); // Had a hook to process all incoming messages on a specified content topic. // // https://js-waku.wakuconnect.dev/classes/waku_relay.WakuRelay.html#addObserver - waku.relay.addObserver((wakuMessage) => { + waku.relay.addObserver(decoder, (message) => { // Checks there is a payload on the message. // Waku Message is encoded in protobuf, in proto v3 fields are always optional. // // https://js-waku.wakuconnect.dev/classes/waku_message.WakuMessage.html#payload - if (!wakuMessage.payload) + if (!message.payload) return; // Helper method to decode the payload to utf-8. A production dApp should @@ -80,7 +80,7 @@ // structure of their choice. // // https://js-waku.wakuconnect.dev/classes/waku_message.WakuMessage.html#payloadAsUtf8 - const text = wakuMessage.payloadAsUtf8; + const text = utils.bytesToUtf8(message.payload); messagesDiv.innerHTML = `

${text}


` + messagesDiv.innerHTML; }, [contentTopic]); @@ -96,22 +96,8 @@ // function that sends the text input over Waku Relay, the gossipsub // protocol. sendButton.onclick = async () => { - const text = textInput.value; - - // Helper functions are available to create a Waku Message. - // These functions also provide native symmetric, asymmetric encryption, - // signing and signature verification. Check the `Options` object for details: - // https://js-waku.wakuconnect.dev/interfaces/waku_message.Options.html - // - // `WakuMessage.fromBytes` should be preferred for a production dApp to - // serialize a data structure. - // - // https://js-waku.wakuconnect.dev/classes/waku_message.WakuMessage.html#fromUtf8String - const wakuMessage = await WakuMessage.fromUtf8String(text, contentTopic); - // Once the message is constructed, send it over Waku Relay. - // - // https://js-waku.wakuconnect.dev/classes/waku_relay.WakuRelay.html#send - await waku.relay.send(wakuMessage); + const payload = utils.utf8ToBytes(textInput.value) + await waku.relay.send(encoder, {payload}); console.log('Message sent!'); // Reset the text input.