refactor: examples-browser (#508)

* refactor: examples-browser * chore: add information to use signalling server * chore: apply suggestions from code review Co-Authored-By: Jacob Heun <jacobheun@gmail.com> * chore: update deps * docs: refactor libp2p browser example * docs(examples): add back websockets and boostrap nodes docs(examples): redo the browser readme * fix: handle edge case of connections closing early * chore: fix lint * chore: update example deps and readme * chore: update webrtc-star * chore: apply suggestions from code review Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai> Co-authored-by: Jacob Heun <jacobheun@gmail.com> Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
2025-06-22 13:31:32 +00:00 · 2020-01-24 17:43:56 +07:00
parent d21b7ce4ff
commit 560d7084fe
14 changed files with 190 additions and 245 deletions
--- a/examples/libp2p-in-the-browser/index.js
+++ b/examples/libp2p-in-the-browser/index.js
@ -0,0 +1,73 @@
+import 'babel-polyfill'
+import Libp2p from 'libp2p'
+import Websockets from 'libp2p-websockets'
+import WebRTCStar from 'libp2p-webrtc-star'
+import Secio from 'libp2p-secio'
+import Mplex from 'libp2p-mplex'
+import Boostrap from 'libp2p-bootstrap'
+
+document.addEventListener('DOMContentLoaded', async () => {
+  // Create our libp2p node
+  const libp2p = await Libp2p.create({
+    modules: {
+      transport: [Websockets, WebRTCStar],
+      connEncryption: [Secio],
+      streamMuxer: [Mplex],
+      peerDiscovery: [Boostrap]
+    },
+    config: {
+      peerDiscovery: {
+        bootstrap: {
+          enabled: true,
+          list: [
+            '/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
+            '/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
+            '/dns4/sfo-3.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM',
+            '/dns4/sgp-1.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu',
+            '/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
+            '/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/p2p/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64'
+          ]
+        }
+      }
+    }
+  })
+
+  // UI elements
+  const status = document.getElementById('status')
+  const output = document.getElementById('output')
+
+  output.textContent = ''
+
+  function log (txt) {
+    console.info(txt)
+    output.textContent += `${txt.trim()}\n`
+  }
+
+  // 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
+  const webrtcAddr = '/ip4/0.0.0.0/tcp/9090/wss/p2p-webrtc-star'
+  libp2p.peerInfo.multiaddrs.add(webrtcAddr)
+
+  // Listen for new peers
+  libp2p.on('peer:discovery', (peerInfo) => {
+    log(`Found peer ${peerInfo.id.toB58String()}`)
+  })
+
+  // Listen for new connections to peers
+  libp2p.on('peer:connect', (peerInfo) => {
+    log(`Connected to ${peerInfo.id.toB58String()}`)
+  })
+
+  // Listen for peers disconnecting
+  libp2p.on('peer:disconnect', (peerInfo) => {
+    log(`Disconnected from ${peerInfo.id.toB58String()}`)
+  })
+
+  await libp2p.start()
+  status.innerText = 'libp2p started!'
+  log(`libp2p id is ${libp2p.peerInfo.id.toB58String()}`)
+
+  // Export libp2p to the window so you can play with the API
+  window.libp2p = libp2p
+})