docs: update browser example and remove webrtc-direct example (#1751)

Add new transports to the browser example and remove the outdated webrtc-direct example as it uses a deprecated transport.

Refs: #1488

.github/workflows/examples.yml

@@ -42,8 +42,7 @@ jobs:
           pnet,
           protocol-and-stream-muxing,
           pubsub,
-          transports,
-          webrtc-direct
+          transports
         ]
       fail-fast: true
     steps:

doc/CONFIGURATION.md

@@ -69,12 +69,11 @@ Bear in mind that a **transport** and **connection encryption** module are **req
 Some available transports are:
 
 - [@libp2p/tcp](https://github.com/libp2p/js-libp2p-tcp) (not available in browsers)
-- [@libp2p/webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star)
-- [@libp2p/webrtc-direct](https://github.com/libp2p/js-libp2p-webrtc-direct)
+- [@libp2p/webrtc](https://github.com/libp2p/js-libp2p-webrtc)
 - [@libp2p/websockets](https://github.com/libp2p/js-libp2p-websockets)
 - [@libp2p/webtransport](https://github.com/libp2p/js-libp2p-webtransport) (Work in Progress)
 
-If none of the available transports fulfills your needs, you can create a libp2p compatible transport. A libp2p transport just needs to be compliant with the [Transport Interface](https://github.com/libp2p/js-interfaces/tree/master/src/transport).
+If none of the available transports fulfils your needs, you can create a libp2p compatible transport. A libp2p transport just needs to be compliant with the [Transport Interface](https://github.com/libp2p/js-interfaces/tree/master/src/transport).
 
 If you want to know more about libp2p transports, you should read the following content:
 

examples/libp2p-in-the-browser/index.js

@@ -1,33 +1,33 @@
 import { createLibp2p } from 'libp2p'
+import { circuitRelayTransport } from 'libp2p/circuit-relay'
+import { identifyService } from 'libp2p/identify'
+import { kadDHT } from '@libp2p/kad-dht'
 import { webSockets } from '@libp2p/websockets'
-import { webRTCStar } from '@libp2p/webrtc-star'
+import { webTransport } from '@libp2p/webtransport'
+import { webRTCDirect, webRTC } from '@libp2p/webrtc'
 import { noise } from '@chainsafe/libp2p-noise'
 import { mplex } from '@libp2p/mplex'
 import { yamux } from '@chainsafe/libp2p-yamux'
 import { bootstrap } from '@libp2p/bootstrap'
 
 document.addEventListener('DOMContentLoaded', async () => {
-  const wrtcStar = webRTCStar()
-
   // Create our libp2p node
   const libp2p = await createLibp2p({
-    addresses: {
-      // Add the signaling server address, along with our PeerId to our multiaddrs list
-      // libp2p will automatically attempt to dial to the signaling server so that it can
-      // receive inbound connections from other peers
-      listen: [
-        '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
-        '/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
-      ]
-    },
+    // transports allow us to dial peers that support certain types of addresses
     transports: [
       webSockets(),
-      wrtcStar.transport
+      webTransport(),
+      webRTC(),
+      webRTCDirect(),
+      circuitRelayTransport({
+        // use content routing to find a circuit relay server we can reserve a
+        // slot on
+        discoverRelays: 1
+      })
     ],
     connectionEncryption: [noise()],
     streamMuxers: [yamux(), mplex()],
     peerDiscovery: [
-      wrtcStar.discovery,
       bootstrap({
         list: [
           '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
@@ -37,7 +37,18 @@ document.addEventListener('DOMContentLoaded', async () => {
           '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
         ]
       })
-    ]
+    ],
+    services: {
+      // the identify service is used by the DHT and the circuit relay transport
+      // to find peers that support the relevant protocols
+      identify: identifyService(),
+
+      // the DHT is used to find circuit relay servers we can reserve a slot on
+      dht: kadDHT({
+        // browser node ordinarily shouldn't be DHT servers
+        clientMode: true
+      })
+    }
   })
 
   // UI elements

examples/libp2p-in-the-browser/package.json

@@ -9,11 +9,15 @@
   },
   "license": "ISC",
   "dependencies": {
+    "@chainsafe/libp2p-gossipsub": "^7.0.0",
     "@chainsafe/libp2p-noise": "^12.0.0",
+    "@chainsafe/libp2p-yamux": "^4.0.1",
     "@libp2p/bootstrap": "^8.0.0",
+    "@libp2p/kad-dht": "^9.3.3",
     "@libp2p/mplex": "^8.0.1",
-    "@libp2p/webrtc-star": "^7.0.0",
+    "@libp2p/webrtc": "^1.2.0",
     "@libp2p/websockets": "^6.0.1",
+    "@libp2p/webtransport": "^2.0.1",
     "libp2p": "file:../../"
   },
   "devDependencies": {