From 8cbf0ca0e677e7131490825dd84c5ebe1e2bf127 Mon Sep 17 00:00:00 2001 From: "fryorcraken.eth" Date: Fri, 2 Sep 2022 15:04:05 +1000 Subject: [PATCH 1/2] feat(store-reactjs-chat): replace protons with protobufjs for protobuf serialization Proto files must be used for latest version of protons. This is not ideal when build an example and iterating fast. --- store-reactjs-chat/README.md | 2 +- store-reactjs-chat/package.json | 2 +- store-reactjs-chat/pnpm-lock.yaml | 33 +++++-------------------------- store-reactjs-chat/src/App.js | 17 +++++++--------- 4 files changed, 14 insertions(+), 40 deletions(-) diff --git a/store-reactjs-chat/README.md b/store-reactjs-chat/README.md index cd68618..ecd75e0 100644 --- a/store-reactjs-chat/README.md +++ b/store-reactjs-chat/README.md @@ -3,7 +3,7 @@ - React/JavaScript, - `create-react-app`/`react-scripts` 5.0.0 - Waku Store, -- Protobuf using `protons`. +- Protobuf using `protobufjs`. - No async/await syntax. A simple app that retrieves chat messages using [Waku Store](https://rfc.vac.dev/spec/13/) diff --git a/store-reactjs-chat/package.json b/store-reactjs-chat/package.json index 6bd9010..a2ba8ea 100644 --- a/store-reactjs-chat/package.json +++ b/store-reactjs-chat/package.json @@ -8,7 +8,7 @@ "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^14.1.1", "js-waku": "0.24.0-e3bef47", - "protons": "^2.0.3", + "protobufjs": "^7.1.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", diff --git a/store-reactjs-chat/pnpm-lock.yaml b/store-reactjs-chat/pnpm-lock.yaml index 896a344..890ffd3 100644 --- a/store-reactjs-chat/pnpm-lock.yaml +++ b/store-reactjs-chat/pnpm-lock.yaml @@ -6,7 +6,7 @@ specifiers: '@testing-library/react': ^13.2.0 '@testing-library/user-event': ^14.1.1 js-waku: 0.24.0-e3bef47 - protons: ^2.0.3 + protobufjs: ^7.1.0 react: ^18.1.0 react-dom: ^18.1.0 react-scripts: 5.0.1 @@ -18,7 +18,7 @@ dependencies: '@testing-library/react': 13.3.0_biqbaboplfbrettd7655fr4n2y '@testing-library/user-event': 14.4.2_znfriv3ismgf3ybh2woqwlpfea js-waku: 0.24.0-e3bef47_typescript@4.7.4 - protons: 2.0.3 + protobufjs: 7.1.0 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-scripts: 5.0.1_qtbnez4q7bzoc4eqybg3efzzxe @@ -7603,7 +7603,7 @@ packages: it-length-prefixed: 7.0.1 it-pipe: 2.0.4 js-sha3: 0.8.0 - libp2p: 0.38.0-1f38ab7 + libp2p: 0.38.0-0e7096d p-event: 5.0.1 protons-runtime: 1.0.4 uint8arrays: 3.1.0 @@ -7792,8 +7792,8 @@ packages: type-check: 0.4.0 dev: false - /libp2p/0.38.0-1f38ab7: - resolution: {integrity: sha512-pVJiy/eKKPdjUBrNcemNdTKSc+4Edo89STzO6opPzpcGr25CidptBfJtPwWz+CKVtvxzW7BkiVgH2CTDf0bPwg==} + /libp2p/0.38.0-0e7096d: + resolution: {integrity: sha512-OrdnREspiwmgFdd2WagZcwZsRnks/EwWOTOql2Kg5cmpdbrGP/SEElbC/kUiYIQVVj8PjA4HQhxyD0q8wFGm9w==} engines: {node: '>=16.0.0', npm: '>=7.0.0'} dependencies: '@achingbrain/nat-port-mapper': 1.0.7 @@ -9548,10 +9548,6 @@ packages: long: 5.2.0 dev: false - /protocol-buffers-schema/3.6.0: - resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==} - dev: false - /protons-runtime/1.0.4: resolution: {integrity: sha512-DSKWjAgwaXhtYO5Jo/MrU8n/75I/P2IhxU0Fk/lSrXx6Gxl5DH+I6cHcbGAYFmAlOBmU4QRa0mvVme8VXlDeUg==} engines: {node: '>=16.0.0', npm: '>=7.0.0'} @@ -9579,15 +9575,6 @@ packages: uint8arraylist: 2.3.2 dev: false - /protons/2.0.3: - resolution: {integrity: sha512-j6JikP/H7gNybNinZhAHMN07Vjr1i4lVupg598l4I9gSTjJqOvKnwjzYX2PzvBTSVf2eZ2nWv4vG+mtW8L6tpA==} - dependencies: - protocol-buffers-schema: 3.6.0 - signed-varint: 2.0.1 - uint8arrays: 3.1.0 - varint: 5.0.2 - dev: false - /proxy-addr/2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} @@ -10320,12 +10307,6 @@ packages: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: false - /signed-varint/2.0.1: - resolution: {integrity: sha512-abgDPg1106vuZZOvw7cFwdCABddfJRz5akcCcchzTbhyhYnsG31y4AlZEgp315T7W3nQq5P4xeOm186ZiPVFzw==} - dependencies: - varint: 5.0.2 - dev: false - /sisteransi/1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: false @@ -11167,10 +11148,6 @@ packages: source-map: 0.7.4 dev: false - /varint/5.0.2: - resolution: {integrity: sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==} - dev: false - /varint/6.0.0: resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==} dev: false diff --git a/store-reactjs-chat/src/App.js b/store-reactjs-chat/src/App.js index 78a6049..e65acb9 100644 --- a/store-reactjs-chat/src/App.js +++ b/store-reactjs-chat/src/App.js @@ -1,17 +1,14 @@ import { waitForRemotePeer, utils } from "js-waku"; import * as React from "react"; -import protons from "protons"; +import protobuf from "protobufjs"; import { createWaku } from "js-waku/lib/create_waku"; const ContentTopic = "/toy-chat/2/huilong/proto"; -const proto = protons(` -message ChatMessage { - uint64 timestamp = 1; - string nick = 2; - bytes text = 3; -} -`); +const ProtoChatMessage = new protobuf.Type("ChatMessage") + .add(new protobuf.Field("timestamp", 1, "uint64")) + .add(new protobuf.Field("nick", 2, "string")) + .add(new protobuf.Field("text", 3, "bytes")); function App() { const [waku, setWaku] = React.useState(undefined); @@ -92,14 +89,14 @@ export default App; function decodeMessage(wakuMessage) { if (!wakuMessage.payload) return; - const { timestamp, nick, text } = proto.ChatMessage.decode( + const { timestamp, nick, text } = ProtoChatMessage.decode( wakuMessage.payload ); if (!timestamp || !text || !nick) return; const time = new Date(); - time.setTime(timestamp); + time.setTime(Number(timestamp)); const utf8Text = utils.bytesToUtf8(text); From 41aace02f702511ed0b9491d63758594232d8456 Mon Sep 17 00:00:00 2001 From: "fryorcraken.eth" Date: Fri, 2 Sep 2022 15:04:26 +1000 Subject: [PATCH 2/2] doc(web-chat): update readme, protons is used --- web-chat/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/web-chat/README.md b/web-chat/README.md index 6011a69..343f14a 100644 --- a/web-chat/README.md +++ b/web-chat/README.md @@ -7,6 +7,7 @@ - Waku Filter - Waku Light Push - Waku Store +- Protobuf using `protons` A ReactJS chat app is provided as a showcase of the library used in the browser. It implements [Waku v2 Toy Chat](https://rfc.vac.dev/spec/22/) protocol.