Merge pull request #105 from libp2p/docs/libp2p-browser-example

docs(examples): libp2p in the browser 1
This commit is contained in:
David Dias 2017-07-09 16:53:58 +01:00 committed by GitHub
commit fb0c64f9d4
9 changed files with 85 additions and 52 deletions

View File

@ -1,22 +1,29 @@
{ {
"name": "see-nodes", "name": "libp2p-in-the-browser",
"version": "0.0.0", "version": "0.1.0",
"description": "See other nodes in the network using WebRTC Star discovery mechanism", "description": "See other nodes in the network using WebRTC Star discovery mechanism",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {
"bundle": "browserify src/index.js > public/bundle.js", "bundle": "browserify src/index.js > public/bundle.js",
"serve": "static public -p 9090 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'", "serve": "static public -p 9090 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'",
"mon": "nodemon --exec \"npm run start\" --ignore public/bundle.js",
"start": "npm run bundle && npm run serve" "start": "npm run bundle && npm run serve"
}, },
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"browserify": "^14.0.0", "browserify": "^14.0.0",
"browserify-optional": "^1.0.0",
"concat-stream": "^1.6.0", "concat-stream": "^1.6.0",
"detect-dom-ready": "^1.0.2", "detect-dom-ready": "^1.0.2",
"node-static": "^0.7.9", "node-static": "^0.7.9"
"nodemon": "^1.11.0"
}, },
"dependencies": {} "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"
}
} }

View File

@ -2,10 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>p2p mapper</title> <title>libp2p in the browser</title>
</head> </head>
<body> <body>
<h1>p2p mapper</h1> <h1>libp2p node running \o/</h1>
<div id="my-peer"></div> <div id="my-peer"></div>
<div id="swarm"></div> <div id="swarm"></div>

View File

@ -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

View File

@ -1,7 +1,7 @@
'use strict' 'use strict'
const PeerInfo = require('peer-info') const PeerInfo = require('peer-info')
const Node = require('./libp2p-bundle') const Node = require('./browser-bundle')
function createNode (callback) { function createNode (callback) {
PeerInfo.create((err, peerInfo) => { PeerInfo.create((err, peerInfo) => {
@ -14,7 +14,7 @@ function createNode (callback) {
peerInfo.multiaddrs.add(ma) peerInfo.multiaddrs.add(ma)
const node = new Node(peerInfo, undefined, { webRTCStar: true }) const node = new Node(peerInfo)
node.idStr = peerIdStr node.idStr = peerIdStr
callback(null, node) callback(null, node)

View File

@ -1,2 +1,14 @@
# WIP - This example is still in the works # libp2p running in the Browser
![](http://1.bp.blogspot.com/-tNvSnCW0KlQ/U-KOKGVoJkI/AAAAAAAAA3Q/aiSLMeSJFtw/s1600/WIP-sign.jpg)
One of the primary goals with libp2p P2P was to get it fully working in the browser and interopable with the versions running in Go and in Node.js.
# 1. Setting up a simple app that lists connections to other nodes
Simple go into the folder [1](./1) and execute the following
```bash
> cd 1
> npm install
> npm start
# open your browser in port :9090
```

View File

@ -1,12 +0,0 @@
# See nodes
> See other nodes in the network using WebRTC Star Discovery
# Try it out
```
# After having run `npm install` at the root of the repo.
> npm install
> npm start
# open your browser in port :9090
```

View File

@ -1,27 +0,0 @@
'use strict'
const WebRTCStar = require('libp2p-webrtc-star')
const multiplex = require('libp2p-multiplex')
const spdy = require('libp2p-spdy')
const secio = require('libp2p-secio')
const libp2p = require('../../..')
class Node extends libp2p {
constructor (peerInfo, peerBook, options) {
options = options || {}
const wstar = new WebRTCStar()
const modules = {
transport: [wstar],
connection: {
muxer: [multiplex, spdy],
crypto: [secio]
},
discovery: [wstar.discovery]
}
super(modules, peerInfo, peerBook, options)
}
}
module.exports = Node