docs: libp2p in browser example (#390)

* docs: improve browser example

* docs: remove bad ipfs link

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

@@ -17,7 +17,9 @@
   },
   "dependencies": {
     "detect-dom-ready": "^1.0.2",
+    "libp2p": "../../../",
     "libp2p-bootstrap": "~0.9.7",
+    "libp2p-kad-dht": "^0.15.3",
     "libp2p-mplex": "~0.8.5",
     "libp2p-secio": "~0.11.1",
     "libp2p-spdy": "~0.13.3",

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

@@ -8,8 +8,7 @@ const SPDY = require('libp2p-spdy')
 const SECIO = require('libp2p-secio')
 const Bootstrap = require('libp2p-bootstrap')
 const DHT = require('libp2p-kad-dht')
-const defaultsDeep = require('@nodeutils/defaults-deep')
-const libp2p = require('../../../../')
+const libp2p = require('libp2p')
 
 // Find this list at: https://github.com/ipfs/js-ipfs/blob/master/src/core/runtime/config-browser.json
 const bootstrapList = [
@@ -26,9 +25,9 @@ const bootstrapList = [
 ]
 
 class Node extends libp2p {
-  constructor (_options) {
-    const wrtcStar = new WebRTCStar({ id: _options.peerInfo.id })
-    const wsstar = new WebSocketStar({ id: _options.peerInfo.id })
+  constructor ({ peerInfo }) {
+    const wrtcStar = new WebRTCStar({ id: peerInfo.id })
+    const wsstar = new WebSocketStar({ id: peerInfo.id })
 
     const defaults = {
       modules: {
@@ -86,7 +85,7 @@ class Node extends libp2p {
       }
     }
 
-    super(defaultsDeep(_options, defaults))
+    super({ ...defaults, peerInfo })
   }
 }
 

examples/libp2p-in-the-browser/1/src/create-node.js

@@ -10,9 +10,11 @@ function createNode (callback) {
     }
 
     const peerIdStr = peerInfo.id.toB58String()
-    const ma = `/dns4/star-signal.cloud.ipfs.team/tcp/443/wss/p2p-webrtc-star/p2p/${peerIdStr}`
+    const webrtcAddr = `/dns4/star-signal.cloud.ipfs.team/tcp/443/wss/p2p-webrtc-star/p2p/${peerIdStr}`
+    const wsAddr = `/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star`
 
-    peerInfo.multiaddrs.add(ma)
+    peerInfo.multiaddrs.add(webrtcAddr)
+    peerInfo.multiaddrs.add(wsAddr)
 
     const node = new Node({
       peerInfo

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

@@ -46,6 +46,9 @@ domReady(() => {
       myPeerDiv.append(idDiv)
 
       console.log('Node is listening o/')
+      node.peerInfo.multiaddrs.toArray().forEach(ma => {
+        console.log(ma.toString())
+      })
 
       // NOTE: to stop the node
       // node.stop((err) => {})

examples/libp2p-in-the-browser/README.md

@@ -20,5 +20,3 @@ Then simply go into the folder [1](./1) and execute the following
 > npm start
 # open your browser in port :9090
 ```
-
-[Version Published on IPFS](http://ipfs.io/ipfs/Qmbc1J7ehw1dNYachbkCWPto4RsnVvqCKNVzmYEod2gXcy)