docs: improve browser example connectability (#240)

Author: jacobheun

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

@@ -17,11 +17,12 @@
   },
   "dependencies": {
     "detect-dom-ready": "^1.0.2",
+    "libp2p-bootstrap": "~0.9.3",
     "libp2p-mplex": "~0.8.0",
-    "libp2p-railing": "~0.9.1",
     "libp2p-secio": "~0.10.0",
     "libp2p-spdy": "~0.12.1",
     "libp2p-webrtc-star": "~0.15.3",
+    "libp2p-websocket-star": "~0.8.1",
     "libp2p-websockets": "~0.12.0",
     "peer-info": "~0.14.1"
   }

examples/libp2p-in-the-browser/1/src/browser-bundle.js

@@ -2,10 +2,11 @@
 
 const WebRTCStar = require('libp2p-webrtc-star')
 const WebSockets = require('libp2p-websockets')
+const WebSocketStar = require('libp2p-websocket-star')
 const Mplex = require('libp2p-mplex')
 const SPDY = require('libp2p-spdy')
 const SECIO = require('libp2p-secio')
-const Bootstrap = require('libp2p-railing')
+const Bootstrap = require('libp2p-bootstrap')
 const defaultsDeep = require('@nodeutils/defaults-deep')
 const libp2p = require('../../../../')
 
@@ -26,12 +27,14 @@ const bootstrapers = [
 class Node extends libp2p {
   constructor (_options) {
     const wrtcStar = new WebRTCStar({ id: _options.peerInfo.id })
+    const wsstar = new WebSocketStar({ id: _options.peerInfo.id })
 
     const defaults = {
       modules: {
         transport: [
           wrtcStar,
-          new WebSockets()
+          WebSockets,
+          wsstar
         ],
         streamMuxer: [
           Mplex,
@@ -42,6 +45,7 @@ class Node extends libp2p {
         ],
         peerDiscovery: [
           wrtcStar.discovery,
+          wsstar.discovery,
           Bootstrap
         ]
       },
@@ -55,21 +59,24 @@ class Node extends libp2p {
           },
           bootstrap: {
             interval: 10000,
-            enabled: false,
+            enabled: true,
             list: bootstrapers
           }
         },
         relay: {
-          enabled: false,
+          enabled: true,
           hop: {
-            enabled: false,
+            enabled: true,
             active: false
           }
         },
         EXPERIMENTAL: {
           dht: false,
           pubsub: false
         }
+      },
+      connectionManager: {
+        maxPeers: 50
       }
     }
 

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

@@ -1,4 +1,5 @@
-/* eslint-disable no-console */
+/* eslint no-console: ["error", { allow: ["log"] }] */
+/* eslint max-nested-callbacks: ["error", 5] */
 'use strict'
 
 const domReady = require('detect-dom-ready')
@@ -13,13 +14,27 @@ domReady(() => {
       return console.log('Could not create the Node, check if your browser has WebRTC Support', err)
     }
 
+    let connections = {}
+
     node.on('peer:discovery', (peerInfo) => {
       console.log('Discovered a peer')
       const idStr = peerInfo.id.toB58String()
       console.log('Discovered: ' + idStr)
+      if (connections[idStr]) {
+        // If we're already trying to connect to this peer, dont dial again
+        return
+      }
 
+      connections[idStr] = true
       node.dial(peerInfo, (err, conn) => {
-        if (err) { return console.log('Failed to dial:', idStr) }
+        let timeToNextDial = 0
+        if (err) {
+          // Prevent immediate connection retries from happening
+          timeToNextDial = 30 * 1000
+          console.log('Failed to dial:', idStr)
+        }
+
+        setTimeout(() => delete connections[idStr], timeToNextDial)
       })
     })