Include ReactJS in name min web chat name
|
@ -12,7 +12,7 @@ jobs:
|
|||
examples_build_and_test:
|
||||
strategy:
|
||||
matrix:
|
||||
example: [ cli-chat, web-chat, eth-dm, min-js-web-chat ]
|
||||
example: [ cli-chat, web-chat, eth-dm, min-react-js-chat ]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
|
|
|
@ -5,4 +5,4 @@ Here is the list of the code examples and the features they demonstrate:
|
|||
- [Web Chat App](web-chat): Group chat, React/TypeScript, Relay, Store.
|
||||
- [CLI Chat App](cli-chat): Group chat, Node JS/TypeScript, Relay, Light Push, Store.
|
||||
- [Ethereum Direct Message Web App](eth-dm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
|
||||
- [Minimal JS Web Chat App](min-js-web-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
|
||||
- [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
|
||||
|
|
|
@ -15,7 +15,7 @@ To run a development version locally, do:
|
|||
git clone https://github.com/status-im/js-waku/ ; cd js-waku
|
||||
npm install # Install dependencies for js-waku
|
||||
npm run build # Build js-waku
|
||||
cd examples/min-js-web-chat
|
||||
cd examples/min-react-js-chat
|
||||
npm install # Install dependencies for the web app
|
||||
npm run start # Start development server to serve the web app on http://localhost:3000/
|
||||
```
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
@ -3,7 +3,7 @@ import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
|
|||
import * as React from 'react';
|
||||
import protons from 'protons';
|
||||
|
||||
const ContentTopic = `/min-js-web-chat/1/chat/proto`;
|
||||
const ContentTopic = `/min-react-js-chat/1/chat/proto`;
|
||||
|
||||
const proto = protons(`
|
||||
message SimpleChatMessage {
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -5,15 +5,15 @@ In this guide, we will demonstrate how your ReactJS dApp can use Waku Relay to s
|
|||
|
||||
Before starting, you need to choose a _Content Topic_ for your dApp.
|
||||
Check out the [how to choose a content topic guide](choose-content-topic.md) to learn more about content topics.
|
||||
For this guide, we are using a single content topic: `/min-js-web-chat/1/chat/proto`.
|
||||
For this guide, we are using a single content topic: `/min-react-js-chat/1/chat/proto`.
|
||||
|
||||
# Setup
|
||||
|
||||
Create a new react app:
|
||||
|
||||
```shell
|
||||
npx create-react-app min-js-web-chat
|
||||
cd min-js-web-chat
|
||||
npx create-react-app min-react-js-chat
|
||||
cd min-react-js-chat
|
||||
```
|
||||
|
||||
Then, install [js-waku](https://npmjs.com/package/js-waku):
|
||||
|
@ -145,7 +145,7 @@ Create a function that takes the Waku instance and a message to send:
|
|||
```js
|
||||
import { WakuMessage } from 'js-waku';
|
||||
|
||||
const ContentTopic = `/min-js-web-chat/1/chat/proto`;
|
||||
const ContentTopic = `/min-react-js-chat/1/chat/proto`;
|
||||
|
||||
async function sendMessage(message, timestamp, waku) {
|
||||
const time = timestamp.getTime();
|
||||
|
@ -311,4 +311,4 @@ function App() {
|
|||
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 ReactJS Chat App](/examples/min-react-js-chat).
|
||||
|
|