feat: Testing with external peers

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.
 

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)

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"