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. 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) 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..1e9a253 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", @@ -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"