waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Touch up

This commit is contained in:
Franck Royer 2021-08-02 12:22:10 +10:00
parent dbc6662082
commit 499b3e7cc0
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
guides/reactjs-relay.md
View File

@ -164,7 +164,7 @@ async function sendMessage(message, timestamp, waku) {
} }
``` ```
Then, add a button to send messages to the `App` function: Then, add a button to the `App` function:
```js ```js
function App() { function App() {
@ -178,12 +178,14 @@ function App() {
}, [waku, wakuStatus]); }, [waku, wakuStatus]);
const sendMessageOnClick = () => { const sendMessageOnClick = () => {
// Check Waku is started and connected first.
if (wakuStatus !== 'Ready') return; if (wakuStatus !== 'Ready') return;
sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() => sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
console.log('Message sent') console.log('Message sent')
); );
// For demonstration purposes.
setSendCounter(sendCounter + 1); setSendCounter(sendCounter + 1);
}; };
@ -191,7 +193,7 @@ function App() {
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<p>{wakuStatus}</p> <p>{wakuStatus}</p>
<button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}> <button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}> // Grey the button is Waku is not yet ready.
Send Message Send Message
</button> </button>
</header> </header>
@ -203,9 +205,11 @@ function App() {
# Receive Messages # Receive Messages
To process incoming messages, you need to register an observer on Waku Relay. To process incoming messages, you need to register an observer on Waku Relay.
First, you need to define the function that acts as observer. First, you need to define the observer function.
As you are passing the function to Waku Relay, it is best to use `React.useCallback` so that the reference to the function remains the same: You will need to remove the observer when the component unmount.
Hence, you need the reference to the function to remain the same.
For that, use `React.useCallback`:
```js ```js
const processIncomingMessage = React.useCallback((wakuMessage) => { const processIncomingMessage = React.useCallback((wakuMessage) => {
@ -224,7 +228,7 @@ const processIncomingMessage = React.useCallback((wakuMessage) => {
}, []); }, []);
``` ```
Then, add this function as an observer to Waku Relay. Then, add this observer to Waku Relay.
Do not forget to delete the observer is the component is being unmounted: Do not forget to delete the observer is the component is being unmounted:
```js ```js
@ -247,7 +251,7 @@ The Waku work is now done.
Your dApp is able to send and receive messages using Waku. Your dApp is able to send and receive messages using Waku.
For the sake of completeness, let's display received messages on the page. For the sake of completeness, let's display received messages on the page.
First, modify the `App()` function to store incoming messages: First, add incoming messages to the state of the `App` component:
```js ```js
function App() { function App() {
@ -274,7 +278,7 @@ function App() {
// ... // ...
} }
``` ```
Then, add the messages to the rendering : Then, render the messages:
```js ```js
function App() { function App() {
@ -304,6 +308,7 @@ function App() {
} }
``` ```
And Voilà! You should now be able to send and receive messages from two different browsers. And Voilà! You should now be able to send and receive messages.
Try out by opening the app from different browsers.
You can see the complete code in the [Minimal JS Web Chat App](/examples/min-js-web-chat). You can see the complete code in the [Minimal JS Web Chat App](/examples/min-js-web-chat).