Send message

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",

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",

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 (
-    <div className='App'>
+    <div className="App">
-      <header className='App-header'>
+      <header className="App-header">
-        <p>Waku node's status: {wakuStatus}</p>
+        <p>{wakuStatus}</p>
+        <button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}>
+          Send Message
+        </button>
       </header>
     </div>
   );
 }
 
+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;