diff --git a/examples/relay-reactjs-chat/package-lock.json b/examples/relay-reactjs-chat/package-lock.json index 9873f0d490..2a81ff4fc8 100644 --- a/examples/relay-reactjs-chat/package-lock.json +++ b/examples/relay-reactjs-chat/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "js-waku": "../../build/esm", + "protons": "^2.0.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", @@ -11072,6 +11073,11 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "node_modules/multiformats": { + "version": "9.5.8", + "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.5.8.tgz", + "integrity": "sha512-GY154q1yPPdHX4ArXHE8Z1Mm9BxZcJetzEqfwQg/ongo91qIJDHJEio3zboHIKGEvBLrhVqKwlRuDqwa7+xECQ==" + }, "node_modules/mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", @@ -12866,6 +12872,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" + }, + "node_modules/protons": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/protons/-/protons-2.0.3.tgz", + "integrity": "sha512-j6JikP/H7gNybNinZhAHMN07Vjr1i4lVupg598l4I9gSTjJqOvKnwjzYX2PzvBTSVf2eZ2nWv4vG+mtW8L6tpA==", + "dependencies": { + "protocol-buffers-schema": "^3.3.1", + "signed-varint": "^2.0.1", + "uint8arrays": "^3.0.0", + "varint": "^5.0.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14352,6 +14374,14 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==" }, + "node_modules/signed-varint": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/signed-varint/-/signed-varint-2.0.1.tgz", + "integrity": "sha1-UKmYnafJjCxh2tEZvJdHDvhSgSk=", + "dependencies": { + "varint": "~5.0.0" + } + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -15433,6 +15463,14 @@ "node": ">=4.2.0" } }, + "node_modules/uint8arrays": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz", + "integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==", + "dependencies": { + "multiformats": "^9.4.2" + } + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -15598,6 +15636,11 @@ "node": ">= 8" } }, + "node_modules/varint": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/varint/-/varint-5.0.2.tgz", + "integrity": "sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -24529,6 +24572,11 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "multiformats": { + "version": "9.5.8", + "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.5.8.tgz", + "integrity": "sha512-GY154q1yPPdHX4ArXHE8Z1Mm9BxZcJetzEqfwQg/ongo91qIJDHJEio3zboHIKGEvBLrhVqKwlRuDqwa7+xECQ==" + }, "mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", @@ -25712,6 +25760,22 @@ } } }, + "protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" + }, + "protons": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/protons/-/protons-2.0.3.tgz", + "integrity": "sha512-j6JikP/H7gNybNinZhAHMN07Vjr1i4lVupg598l4I9gSTjJqOvKnwjzYX2PzvBTSVf2eZ2nWv4vG+mtW8L6tpA==", + "requires": { + "protocol-buffers-schema": "^3.3.1", + "signed-varint": "^2.0.1", + "uint8arrays": "^3.0.0", + "varint": "^5.0.0" + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26816,6 +26880,14 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==" }, + "signed-varint": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/signed-varint/-/signed-varint-2.0.1.tgz", + "integrity": "sha1-UKmYnafJjCxh2tEZvJdHDvhSgSk=", + "requires": { + "varint": "~5.0.0" + } + }, "sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -27620,6 +27692,14 @@ "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", "peer": true }, + "uint8arrays": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz", + "integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==", + "requires": { + "multiformats": "^9.4.2" + } + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -27744,6 +27824,11 @@ } } }, + "varint": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/varint/-/varint-5.0.2.tgz", + "integrity": "sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/examples/relay-reactjs-chat/package.json b/examples/relay-reactjs-chat/package.json index bd55270646..41a8a38572 100644 --- a/examples/relay-reactjs-chat/package.json +++ b/examples/relay-reactjs-chat/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "js-waku": "../../build/esm", + "protons": "^2.0.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", diff --git a/examples/relay-reactjs-chat/src/App.js b/examples/relay-reactjs-chat/src/App.js index fecd84f8b1..6bb89e3781 100644 --- a/examples/relay-reactjs-chat/src/App.js +++ b/examples/relay-reactjs-chat/src/App.js @@ -1,9 +1,22 @@ import { Waku } from 'js-waku'; import * as React from 'react'; +import protons from 'protons'; +import { WakuMessage } from 'js-waku'; + +const ContentTopic = `/relay-reactjs-chat/1/chat/proto`; + +const proto = protons(` +message SimpleChatMessage { + uint64 timestamp = 1; + string text = 2; +} +`); function App() { const [waku, setWaku] = React.useState(undefined); const [wakuStatus, setWakuStatus] = React.useState('None'); + // Using a counter just for the messages to be different + const [sendCounter, setSendCounter] = React.useState(0); React.useEffect(() => { if (!!waku) return; @@ -20,13 +33,44 @@ function App() { }); }, [waku, wakuStatus]); + const sendMessageOnClick = () => { + // Check Waku is started and connected first. + if (wakuStatus !== 'Ready') return; + + sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() => + console.log('Message sent') + ); + + // For demonstration purposes. + setSendCounter(sendCounter + 1); + }; + return ( -
-
-

Waku node's status: {wakuStatus}

+
+
+

{wakuStatus}

+
); } +function sendMessage(message, waku, timestamp) { + const time = timestamp.getTime(); + + // Encode to protobuf + const payload = proto.SimpleChatMessage.encode({ + timestamp: time, + text: message + }); + + // Wrap in a Waku Message + return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) => + // Send over Waku Relay + waku.relay.send(wakuMessage) + ); +} + export default App;