docs(examples): libp2p in the browser 1

2025-06-13 01:01:23 +00:00 · 2017-07-09 16:52:37 +01:00
parent c23f147bda
commit 7ef1c0a598
9 changed files with 85 additions and 52 deletions
--- a/examples/libp2p-in-the-browser/1/.gitignore
+++ b/examples/libp2p-in-the-browser/1/.gitignore
@ -0,0 +1 @@
+bundle.js
--- a/examples/libp2p-in-the-browser/1/package.json
+++ b/examples/libp2p-in-the-browser/1/package.json
@ -0,0 +1,29 @@
+{
+  "name": "libp2p-in-the-browser",
+  "version": "0.1.0",
+  "description": "See other nodes in the network using WebRTC Star discovery mechanism",
+  "main": "src/index.js",
+  "scripts": {
+    "bundle": "browserify src/index.js > public/bundle.js",
+    "serve": "static public -p 9090 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
+    "start": "npm run bundle && npm run serve"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "browserify": "^14.0.0",
+    "concat-stream": "^1.6.0",
+    "detect-dom-ready": "^1.0.2",
+    "node-static": "^0.7.9"
+  },
+  "dependencies": {
+    "detect-dom-ready": "^1.0.2",
+    "libp2p": "^0.10.0",
+    "libp2p-multiplex": "^0.4.4",
+    "libp2p-railing": "^0.5.2",
+    "libp2p-secio": "^0.6.8",
+    "libp2p-spdy": "^0.10.6",
+    "libp2p-webrtc-star": "^0.11.0",
+    "libp2p-websockets": "^0.10.0",
+    "peer-info": "^0.9.3"
+  }
+}
--- a/examples/libp2p-in-the-browser/1/public/index.html
+++ b/examples/libp2p-in-the-browser/1/public/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>libp2p in the browser</title>
+  </head>
+  <body>
+    <h1>libp2p node running \o/</h1>
+    <div id="my-peer"></div>
+    <div id="swarm"></div>
+
+    <script src="bundle.js"></script>
+  </body>
+</html>
--- a/examples/libp2p-in-the-browser/1/src/browser-bundle.js
+++ b/examples/libp2p-in-the-browser/1/src/browser-bundle.js
@ -0,0 +1,53 @@
+'use strict'
+
+const WebRTCStar = require('libp2p-webrtc-star')
+const WebSockets = require('libp2p-websockets')
+
+const Multiplex = require('libp2p-multiplex')
+const SPDY = require('libp2p-spdy')
+const SECIO = require('libp2p-secio')
+
+const Railing = require('libp2p-railing')
+const libp2p = require('libp2p')
+
+// Find this list at: https://github.com/ipfs/js-ipfs/blob/master/src/core/runtime/config-browser.json
+const bootstrapers = [
+  '/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
+  '/dns4/sfo-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLju6m7xTh3DuokvT3886QRYqxAzb1kShaanJgW36yx',
+  '/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
+  '/dns4/sfo-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLnSGccFuZQJzRadHn95W2CrSFmZuTdDWP8HXaHca9z',
+  '/dns4/sfo-3.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM',
+  '/dns4/sgp-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu',
+  '/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
+  '/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64'
+]
+
+class Node extends libp2p {
+  constructor (peerInfo, peerBook, options) {
+    options = options || {}
+
+    const wstar = new WebRTCStar()
+
+    const modules = {
+      transport: [
+        wstar,
+        new WebSockets()
+      ],
+      connection: {
+        muxer: [
+          Multiplex,
+          SPDY
+        ],
+        crypto: [SECIO]
+      },
+      discovery: [
+        wstar.discovery,
+        new Railing(bootstrapers)
+      ]
+    }
+
+    super(modules, peerInfo, peerBook, options)
+  }
+}
+
+module.exports = Node
--- a/examples/libp2p-in-the-browser/1/src/create-node.js
+++ b/examples/libp2p-in-the-browser/1/src/create-node.js
@ -0,0 +1,24 @@
+'use strict'
+
+const PeerInfo = require('peer-info')
+const Node = require('./browser-bundle')
+
+function createNode (callback) {
+  PeerInfo.create((err, peerInfo) => {
+    if (err) {
+      return callback(err)
+    }
+
+    const peerIdStr = peerInfo.id.toB58String()
+    const ma = `/libp2p-webrtc-star/dns4/star-signal.cloud.ipfs.team/wss/ipfs/${peerIdStr}`
+
+    peerInfo.multiaddrs.add(ma)
+
+    const node = new Node(peerInfo)
+
+    node.idStr = peerIdStr
+    callback(null, node)
+  })
+}
+
+module.exports = createNode
--- a/examples/libp2p-in-the-browser/1/src/index.js
+++ b/examples/libp2p-in-the-browser/1/src/index.js
@ -0,0 +1,58 @@
+'use strict'
+
+const domReady = require('detect-dom-ready')
+const createNode = require('./create-node')
+
+domReady(() => {
+  const myPeerDiv = document.getElementById('my-peer')
+  const swarmDiv = document.getElementById('swarm')
+
+  createNode((err, node) => {
+    if (err) {
+      return console.log('Could not create the Node, check if your browser has WebRTC Support', err)
+    }
+
+    node.on('peer:discovery', (peerInfo) => {
+      console.log('Discovered a peer')
+      const idStr = peerInfo.id.toB58String()
+      console.log('Discovered: ' + idStr)
+
+      node.dial(peerInfo, (err, conn) => {
+        if (err) { return console.log('Failed to dial:', idStr) }
+      })
+    })
+
+    node.on('peer:connect', (peerInfo) => {
+      const idStr = peerInfo.id.toB58String()
+      console.log('Got connection to: ' + idStr)
+      const connDiv = document.createElement('div')
+      connDiv.innerHTML = 'Connected to: ' + idStr
+      connDiv.id = idStr
+      swarmDiv.append(connDiv)
+    })
+
+    node.on('peer:disconnect', (peerInfo) => {
+      const idStr = peerInfo.id.toB58String()
+      console.log('Lost connection to: ' + idStr)
+      document.getElementById(idStr).remove()
+    })
+
+    node.start((err) => {
+      if (err) {
+        return console.log('WebRTC not supported')
+      }
+
+      const idStr = node.peerInfo.id.toB58String()
+
+      const idDiv = document
+        .createTextNode('Node is ready. ID: ' + idStr)
+
+      myPeerDiv.append(idDiv)
+
+      console.log('Node is listening o/')
+
+      // NOTE: to stop the node
+      // node.stop((err) => {})
+    })
+  })
+})