feat: add direct relay-rtc example (#260)

* add relay-rtc example * add relay chat example * update readme and texts * add default node from go-waku prod fleet * add ci steps * update readme * rename to relay-direct-chat * rename to relay-direct-rtc
waku-org · Oct 2, 2023 · 1bd7597 · 1bd7597
1 parent c6e560a
commit 1bd7597
Show file tree

Hide file tree

Showing 12 changed files with 11,263 additions and 0 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,6 +20,7 @@ jobs:
             web-chat,
             noise-js,
             noise-rtc,
+            relay-direct-rtc
           ]
     runs-on: ubuntu-latest
     steps:

diff --git a/ci/Jenkinsfile b/ci/Jenkinsfile
@@ -42,6 +42,7 @@ pipeline {
         stage('web-chat') { steps { script { buildExample() } } }
         stage('noise-js') { steps { script { buildExample() } } }
         stage('noise-rtc') { steps { script { buildExample() } } }
+        stage('relay-direct-rtc') { steps { script { buildExample() } } }
       }
     }
 

diff --git a/examples/relay-direct-rtc/README.md b/examples/relay-direct-rtc/README.md
@@ -0,0 +1,25 @@
+# Direct WebRTC connection for Waku Relay
+
+**Demonstrates**:
+
+- Waku Relay node with direct WebRTC connection 
+- Pure Javascript/HTML.
+
+This example uses WebRTC transport and Waku Relay to exchange messages.
+
+To test the example run `npm install` and then `npm start`.
+
+The `master` branch's HEAD is deployed at https://examples.waku.org/relay-direct-chat/.
+
+### Steps to run an example: 
+1. Get a Waku node that implements `/libp2p/circuit/relay/0.2.0/hop` and `/libp2p/circuit/relay/0.2.0/stop`
+1.1. Find `go-waku` node or
+1.2. Build and then run `go-waku` node with following command: `./build/waku --ws true --relay true --circuit-relay true`
+2. Copy node's multiaddr (e.g `/ip4/192.168.0.101/tcp/60001/ws/p2p/16Uiu2HAm9w2xeDWFJm5eeGLZfJdaPtkNatQD1xrzK5EFWSeXdFvu`)
+3. In `relay-chat` example's folder run `npm install` and then `npm start`
+4. Use `go-waku`'s multiaddr for **Remote node multiaddr** and press dial. Repeat in two more tabs.
+5. In `tab2` copy **Local Peer Id** and use as **WebRTC Peer** in `tab1` and press dial.
+6. In `tab1` or `tab2` press **Ensure WebRTC Relay connection**
+7. In `tab1` press **Drop non WebRTC connections**
+8. In `tab1` enter **Nickname** and **Message** and send. 
+9. See the message in `tab3` which was connected only to `go-waku` node.
diff --git a/examples/relay-direct-rtc/favicon.ico b/examples/relay-direct-rtc/favicon.ico
diff --git a/examples/relay-direct-rtc/favicon.png b/examples/relay-direct-rtc/favicon.png
diff --git a/examples/relay-direct-rtc/index.html b/examples/relay-direct-rtc/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Relay direct chat</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="apple-touch-icon" href="./favicon.png" />
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="icon" href="./favicon.ico" />
+  </head>
+
+  <body>
+    <div class="content">
+      <div class="header">
+        <h3>Status: <span id="status"></span></h3>
+
+        <h4><label for="remoteNode">Remote node multiaddr</label></h4>
+        <div>
+          <input
+            id="remoteNode"
+            value="/dns4/node-01.ac-cn-hongkong-c.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm1fVVprL9EaDpDw4frNX3CPfZu5cBqhtk9Ncm6WCvprpv"
+          />
+          <button id="connectRemoteNode">Dial</button>
+        </div>
+
+        <h4><label for="webrtcPeer">WebRTC Peer</label></h4>
+        <div>
+          <input id="webrtcPeer" />
+          <button id="connectWebrtcPeer">Dial</button>
+        </div>
+
+        <div>
+          <button id="relayWebRTC">Ensure WebRTC Relay connection</button>
+          <button id="dropNonWebRTC">Drop non WebRTC connections</button>
+        </div>
+
+        <details open>
+          <summary>Peer's information</summary>
+
+          <h4>Content topic</h4>
+          <p id="contentTopic"></p>
+
+          <h4>Local Peer Id</h4>
+          <p id="localPeerId"></p>
+
+          <h4>Remote Peer Id</h4>
+          <p id="remotePeerId"></p>
+
+          <h4>Relay mesh's protocols</h4>
+          <p id="relayMeshInfo"></p>
+        </details>
+      </div>
+
+      <div id="messages"></div>
+
+      <div class="footer">
+        <div class="inputArea">
+          <input type="text" id="nickText" placeholder="Nickname" />
+          <textarea id="messageText" placeholder="Message"></textarea>
+        </div>
+
+        <div class="controls">
+          <button id="send">Send</button>
+          <button id="exit">Exit chat</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/protobuf.min.js"></script>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>