From 889f53be130d4613598fe001a29a0e4da01038e0 Mon Sep 17 00:00:00 2001 From: r-zig Date: Thu, 22 May 2025 09:42:21 +0300 Subject: [PATCH 1/4] Update README.md with hosting instructions --- .../README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/examples/js-libp2p-example-webrtc-private-to-private/README.md b/examples/js-libp2p-example-webrtc-private-to-private/README.md index 7ce560c..c66ec92 100644 --- a/examples/js-libp2p-example-webrtc-private-to-private/README.md +++ b/examples/js-libp2p-example-webrtc-private-to-private/README.md @@ -30,6 +30,13 @@ At this point the browsers are directly connected and the relay plays no further ## Running the Example +### Hosting and Network Configuration +- To allow external access to the web interface, host this example on a machine that exposes web connectivity over port 5173. +- #### If running on AWS EC2: + Open your EC2 instance’s Security Group settings and create an inbound TCP rule for port 5173. +- Tip: Assign a static public IP to your machine so it remains reachable at the same address. +- The web server scripts have been updated to listen on all network interfaces (0.0.0.0). This allows access from external clients, not just localhost. + ### Build the `@libp2p/example-webrtc-private-to-private` package Build example by calling `npm i && npm run build` in the repository root. @@ -64,6 +71,8 @@ Now open a second tab with the url `http://localhost:5173/`, perhaps in a differ Using the copied multiaddress from `Listening on` section in `Browser A`, paste it into the `Remote MultiAddress` input and click the `Connect` button. The peers are now connected to each other. +### Connection Type Indicator +- When a connection is established between peers, the UI now displays whether the connection is Direct or via Relay next to the connected address. Enter a message and click the `Send` button in either/both browsers and see the echo'd messages. From a76829a4d71b96a16192e1ed197ed8d2ad6ba1bd Mon Sep 17 00:00:00 2001 From: r-zig Date: Thu, 22 May 2025 09:44:56 +0300 Subject: [PATCH 2/4] Distinguish between direct and relayed connections in the UI --- .../index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/examples/js-libp2p-example-webrtc-private-to-private/index.js b/examples/js-libp2p-example-webrtc-private-to-private/index.js index 1eb1952..3d8dc1e 100644 --- a/examples/js-libp2p-example-webrtc-private-to-private/index.js +++ b/examples/js-libp2p-example-webrtc-private-to-private/index.js @@ -58,17 +58,27 @@ const node = await createLibp2p({ await node.start() -function updateConnList () { +function updateConnList() { // Update connections list const connListEls = node.getConnections() .map((connection) => { + const isRelayed = connection.remoteAddr.protoCodes().includes('p2p-circuit') + const connectionType = isRelayed ? 'Relay' : 'Direct' + if (connection.remoteAddr.protoCodes().includes(WEBRTC_CODE)) { ma = connection.remoteAddr sendSection.style.display = 'block' } const el = document.createElement('li') - el.textContent = connection.remoteAddr.toString() + el.textContent = `${connection.remoteAddr.toString()} (${connectionType})` + + // Set color based on connection type + el.style.color = isRelayed ? 'black' : 'green' + + const icon = document.createElement('span') + icon.textContent = isRelayed ? '🔄' : '✅' + el.appendChild(icon) return el }) document.getElementById('connections').replaceChildren(...connListEls) From c4ddf5f87d33558c67768b991920ef9bd52fa882 Mon Sep 17 00:00:00 2001 From: r-zig Date: Thu, 22 May 2025 09:45:51 +0300 Subject: [PATCH 3/4] Allow external callers by listening on all network interfaces --- .../js-libp2p-example-webrtc-private-to-private/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/js-libp2p-example-webrtc-private-to-private/package.json b/examples/js-libp2p-example-webrtc-private-to-private/package.json index df804f2..0bd46cf 100644 --- a/examples/js-libp2p-example-webrtc-private-to-private/package.json +++ b/examples/js-libp2p-example-webrtc-private-to-private/package.json @@ -4,7 +4,7 @@ "description": "Connect a browser to another browser", "type": "module", "scripts": { - "start": "vite", + "start": "vite --host 0.0.0.0", "build": "vite build", "relay": "node relay.js", "test:firefox": "npm run build && playwright test --browser=firefox test", @@ -27,4 +27,4 @@ "devDependencies": { "test-ipfs-example": "^1.0.0" } -} +} \ No newline at end of file From 6c81d60efd9b73630d0e152b45009f5b33139a5e Mon Sep 17 00:00:00 2001 From: r-zig Date: Thu, 22 May 2025 09:52:11 +0300 Subject: [PATCH 4/4] add missing it-byte-stream dependency --- .../js-libp2p-example-webrtc-private-to-private/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/js-libp2p-example-webrtc-private-to-private/package.json b/examples/js-libp2p-example-webrtc-private-to-private/package.json index 0bd46cf..1e9a253 100644 --- a/examples/js-libp2p-example-webrtc-private-to-private/package.json +++ b/examples/js-libp2p-example-webrtc-private-to-private/package.json @@ -20,6 +20,7 @@ "@libp2p/webrtc": "^5.0.0", "@libp2p/websockets": "^9.0.0", "@multiformats/multiaddr": "^12.0.0", + "it-byte-stream": "^2.0.2", "it-pushable": "^3.2.0", "libp2p": "^2.0.0", "vite": "^6.0.3" @@ -27,4 +28,4 @@ "devDependencies": { "test-ipfs-example": "^1.0.0" } -} \ No newline at end of file +}