fix: update webrtc API usage

Updates example to use the libp2p api shipped last year.

Refs libp2p/docs#403

Author: achingbrain

package.json

@@ -23,26 +23,26 @@
     }
   },
   "dependencies": {
-    "@chainsafe/libp2p-gossipsub": "^13.1.0",
-    "@chainsafe/libp2p-noise": "^15.1.0",
-    "@chainsafe/libp2p-yamux": "^6.0.2",
+    "@chainsafe/libp2p-gossipsub": "^14.1.1",
+    "@chainsafe/libp2p-noise": "^16.1.4",
+    "@chainsafe/libp2p-yamux": "^7.0.4",
     "@headlessui/react": "^2.0.3",
-    "@libp2p/autonat": "^1.1.1",
-    "@libp2p/bootstrap": "^10.1.1",
-    "@libp2p/circuit-relay-v2": "^1.1.1",
-    "@libp2p/identify": "^2.1.1",
+    "@libp2p/autonat": "^2.0.37",
+    "@libp2p/bootstrap": "^11.0.43",
+    "@libp2p/circuit-relay-v2": "^3.2.20",
+    "@libp2p/identify": "^3.0.37",
     "@libp2p/interface-pubsub": "^4.0.1",
-    "@libp2p/logger": "^4.0.16",
+    "@libp2p/logger": "^5.1.21",
     "@libp2p/peer-id-factory": "^4.2.0",
-    "@libp2p/pubsub-peer-discovery": "^10.0.2",
-    "@libp2p/tcp": "^9.1.1",
-    "@libp2p/webrtc": "^4.1.1",
-    "@libp2p/websockets": "^8.1.1",
-    "@libp2p/webtransport": "^4.1.1",
+    "@libp2p/pubsub-peer-discovery": "^11.0.2",
+    "@libp2p/tcp": "^10.1.17",
+    "@libp2p/webrtc": "^5.2.20",
+    "@libp2p/websockets": "^9.2.17",
+    "@libp2p/webtransport": "^5.0.47",
     "@multiformats/multiaddr": "^12.3.0",
     "@multiformats/multiaddr-matcher": "^1.2.4",
     "date-fns": "^3.6.0",
-    "libp2p": "^1.8.0",
+    "libp2p": "^2.8.12",
     "pretty-ms": "^9.0.0"
   }
 }

src/index.js

@@ -7,36 +7,32 @@ import { multiaddr } from '@multiformats/multiaddr'
 import { gossipsub } from '@chainsafe/libp2p-gossipsub'
 import { webSockets } from '@libp2p/websockets'
 import { webTransport } from '@libp2p/webtransport'
-import { webRTC, webRTCDirect } from '@libp2p/webrtc'
-import { circuitRelayTransport, circuitRelayServer } from '@libp2p/circuit-relay-v2'
+import { webRTC } from '@libp2p/webrtc'
 import { enable, disable } from '@libp2p/logger'
 import { pubsubPeerDiscovery } from '@libp2p/pubsub-peer-discovery'
 import { PUBSUB_PEER_DISCOVERY } from './constants'
 import { update, getPeerTypes, getAddresses, getPeerDetails } from './utils'
 import { bootstrap } from '@libp2p/bootstrap'
 import * as filters from '@libp2p/websockets/filters'
+import { circuitRelayTransport } from '@libp2p/circuit-relay-v2'
 
 const App = async () => {
   const libp2p = await createLibp2p({
     // addresses: {
     //   listen: [
+    //     // 👇 Required to create circuit relay reservations in order to hole punch browser-to-browser WebRTC connections
+    //     '/p2p-circuit',
     //     // 👇 Listen for webRTC connection
     //     '/webrtc',
     //   ],
     // },
     transports: [
-      webSockets({
-        // Allow all WebSocket connections inclusing without TLS
-        filter: filters.all,
-      }),
+      webSockets(),
       webTransport(),
       webRTC(),
-      // // 👇 Required to create circuit relay reservations in order to hole punch browser-to-browser WebRTC connections
-      // circuitRelayTransport({
-      //   discoverRelays: 1,
-      // }),
+      circuitRelayTransport(),
     ],
-    connectionEncryption: [noise()],
+    connectionEncrypters: [noise()],
     streamMuxers: [yamux()],
     connectionGater: {
       // Allow private addresses for local testing

src/relay.js

@@ -4,15 +4,9 @@ import { autoNAT } from '@libp2p/autonat'
 import { identify } from '@libp2p/identify'
 import { noise } from '@chainsafe/libp2p-noise'
 import { yamux } from '@chainsafe/libp2p-yamux'
-import { multiaddr } from '@multiformats/multiaddr'
 import { gossipsub } from '@chainsafe/libp2p-gossipsub'
 import { webSockets } from '@libp2p/websockets'
-import { webRTC, webRTCDirect } from '@libp2p/webrtc'
 import { tcp } from '@libp2p/tcp'
-import { enable, disable } from '@libp2p/logger'
-import { pubsubPeerDiscovery } from '@libp2p/pubsub-peer-discovery'
-// import { update, getPeerTypes, getAddresses, getPeerDetails } from './utils'
-import { bootstrap } from '@libp2p/bootstrap'
 import { circuitRelayServer } from '@libp2p/circuit-relay-v2'
 import { PUBSUB_PEER_DISCOVERY } from './constants.js'
 
@@ -29,12 +23,8 @@ async function main() {
       webSockets(),
       tcp(),
     ],
-    connectionEncryption: [noise()],
+    connectionEncrypters: [noise()],
     streamMuxers: [yamux()],
-    connectionGater: {
-      // Allow private addresses for local testing
-      denyDialMultiaddr: async () => false,
-    },
     services: {
       identify: identify(),
       autoNat: autoNAT(),

src/utils.js

@@ -1,6 +1,5 @@
-import { WebRTC, WebSockets, WebSocketsSecure, WebTransport, Circuit } from '@multiformats/multiaddr-matcher'
-import { protocols } from '@multiformats/multiaddr'
-import { bootstrapPeers } from './constants'
+import { WebRTC, WebSockets, WebSocketsSecure, WebTransport, Circuit, WebRTCDirect } from '@multiformats/multiaddr-matcher'
+import { bootstrapPeers } from './constants.js'
 
 export function getAddresses(libp2p) {
   return libp2p
@@ -14,6 +13,7 @@ export function getPeerTypes(libp2p) {
   const types = {
     'Circuit Relay': 0,
     WebRTC: 0,
+    'WebRTC Direct': 0,
     WebSockets: 0,
     'WebSockets (secure)': 0,
     WebTransport: 0,
@@ -24,8 +24,10 @@ export function getPeerTypes(libp2p) {
     .getConnections()
     .map((conn) => conn.remoteAddr)
     .forEach((ma) => {
-      if (WebRTC.exactMatch(ma) || ma.toString().includes('/webrtc/')) {
+      if (WebRTC.exactMatch(ma)) {
         types['WebRTC']++
+      } else if (WebRTCDirect.exactMatch(ma)) {
+        types['WebRTC Direct']++
       } else if (WebSockets.exactMatch(ma)) {
         types['WebSockets']++
       } else if (WebSocketsSecure.exactMatch(ma)) {
@@ -60,9 +62,9 @@ export function getPeerDetails(libp2p) {
       const relayMultiaddrs = libp2p.getMultiaddrs().filter((ma) => Circuit.exactMatch(ma))
       const relayPeers = relayMultiaddrs.map((ma) => {
         return ma
-          .stringTuples()
-          .filter(([name, _]) => name === protocols('p2p').code)
-          .map(([_, value]) => value)[0]
+          .getComponents()
+          .filter(({ name }) => name === 'p2p')
+          .map(({ value }) => value)
       })
 
       // detect if this is a relay we have a reservation on