docs(examples): libp2p in the browser 1

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

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

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) => {})
+    })
+  })
+})