acid-info
/
docs.wakuconnect.dev
mirror of https://github.com/acid-info/docs.wakuconnect.dev.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace `protons` with `protobufs` in relay example (#50)

This commit is contained in:
Franck R 2022-04-01 17:55:01 +11:00 committed by GitHub
parent bef864ebae
commit 6fe3731f0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
content/docs/guides/07_reactjs_relay.md
View File

@ -235,23 +235,20 @@ React.useEffect(() => {
# Define Message Format # Define Message Format
To define the Protobuf message format, To define the Protobuf message format,
use [protons](https://www.npmjs.com/package/protons) you can use [protobufjs](https://www.npmjs.com/package/protobufjs):
```shell ```shell
npm install protons npm install protobufjs
``` ```
Define `SimpleChatMessage` with two fields: `timestamp` and `text`. Define `SimpleChatMessage` with two fields: `timestamp` and `text`.
```js ```js
import protons from "protons"; import protobuf from "protobufjs";
const proto = protons(` const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
message SimpleChatMessage { .add(new protobuf.Field("timestamp", 1, "uint64"))
uint64 timestamp = 1; .add(new protobuf.Field("text", 2, "string"));
string text = 2;
}
`);
``` ```
# Send Messages # Send Messages
@ -259,24 +256,25 @@ message SimpleChatMessage {
Create a function that takes the Waku instance and a message to send: Create a function that takes the Waku instance and a message to send:
```js ```js
import { WakuMessage } from "js-waku"; import {WakuMessage} from "js-waku";
const ContentTopic = `/relay-reactjs-chat/1/chat/proto`; const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;
function sendMessage(message, waku, timestamp) { function sendMessage(message, waku, timestamp) {
const time = timestamp.getTime(); const time = timestamp.getTime();
// Encode to protobuf // Encode to protobuf
const payload = proto.SimpleChatMessage.encode({ const protoMsg = SimpleChatMessage.create({
timestamp: time, timestamp: time,
text: message, text: message,
}); });
const payload = SimpleChatMessage.encode(protoMsg).finish();
// Wrap in a Waku Message // Wrap in a Waku Message
return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) => return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
// Send over Waku Relay // Send over Waku Relay
waku.relay.send(wakuMessage) waku.relay.send(wakuMessage)
); );
} }
``` ```
@ -329,18 +327,17 @@ For that, use `React.useCallback`:
```js ```js
const processIncomingMessage = React.useCallback((wakuMessage) => { const processIncomingMessage = React.useCallback((wakuMessage) => {
// Empty message? // Empty message?
if (!wakuMessage.payload) return; if (!wakuMessage.payload) return;
// Decode the protobuf payload // Decode the protobuf payload
const { timestamp, text } = proto.SimpleChatMessage.decode( const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
wakuMessage.payload
);
const time = new Date();
time.setTime(timestamp);
// For now, just log new messages on the console const time = new Date();
console.log(`message received at ${time.toString()}: ${text}`); time.setTime(timestamp);
// For now, just log new messages on the console
console.log(`message received at ${time.toString()}: ${text}`);
}, []); }, []);
``` ```
@ -371,27 +368,25 @@ First, add incoming messages to the state of the `App` component:
```js ```js
function App() { function App() {
//... //...
const [messages, setMessages] = React.useState([]); const [messages, setMessages] = React.useState([]);
const processIncomingMessage = React.useCallback((wakuMessage) => { const processIncomingMessage = React.useCallback((wakuMessage) => {
if (!wakuMessage.payload) return; if (!wakuMessage.payload) return;
const { text, timestamp } = proto.SimpleChatMessage.decode( const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
wakuMessage.payload
);
const time = new Date(); const time = new Date();
time.setTime(timestamp); time.setTime(timestamp);
const message = { text, timestamp: time }; const message = {text, timestamp: time};
setMessages((messages) => { setMessages((messages) => {
return [message].concat(messages); return [message].concat(messages);
}); });
}, []); }, []);
// ... // ...
} }
``` ```