docs: update delegate example to include ipfs setup instructions

examples/delegated-routing/README.md

@@ -10,18 +10,17 @@ The starting [Libp2p Bundle](./src/libp2p-bundle.js) in this example starts by d
 Once you've completed the example, you should try enabled the DHT and see what kind of results you get! You can also enable the
 various Peer Discovery modules and see the impact it has on your Peer count.
 
-## Prerequisite
-**NOTE**: This example is currently dependent on a clone of the [delegated routing support branch of go-ipfs](https://github.com/ipfs/go-ipfs/pull/4595).
 
 ## Running this example
 
-1. Install IPFS locally if you dont already have it. [Install Guide](https://docs.ipfs.io/introduction/install/)
-2. Run the IPFS daemon: `ipfs daemon`
-3. The daemon will output a line about its API address, like `API server listening on /ip4/127.0.0.1/tcp/8080`
-4. In another window output the addresses of the node: `ipfs id`. Make note of the websocket address, it will contain `/ws/` in the address.
-5. In `./src/libp2p-bundle.js` check if the host and port of your node are correct, according to the previous step. If they are different, replace them.
-6. In `./src/App.js` replace `BootstrapNode` with your nodes Websocket address from step 4.
-7. Start this example:
+1. Install go-ipfs locally if you dont already have it. [Install Guide](https://docs.ipfs.io/introduction/install/).
+1. Run the IPFS daemon: `ipfs daemon`.
+1. The daemon will output a line about its API address, like `API server listening on /ip4/127.0.0.1/tcp/8080`.
+1. In another window, while the daemon is running, Configure the IPFS Gateway to support delegate routing `ipfs config Gateway.APICommands --json '["dht/findprovs", "dht/findpeer", "refs", "swarm/connect"]'`.
+1. In the same window, output the addresses of the node: `ipfs id`. Make note of the websocket address, it will contain `/ws` in the address, like `/ip4/127.0.0.1/tcp/8081/ws`.
+1. In `./src/libp2p-bundle.js` check if the host and port of your node are correct, according to the previous step. If they are different, replace them.
+1. In `./src/App.js` replace `BootstrapNode` with your nodes Websocket address from step 3. **Also**, in `./src/App.js` set BootstrapNodeID to your nodes id, which is displayed when running `ipfs id` in the `ID` property.
+1. Start this example:
 
 ```sh
 npm install
@@ -47,3 +46,12 @@ This will do a few things:
 2. Copy one of the CIDs from the list of peer addresses, this will be the last portion of the address and will look something like `QmdoG8DpzYUZMVP5dGmgmigZwR1RE8Cf6SxMPg1SBXJAQ8`.
 3. In your browser, paste the CID into the *Peer* field and hit `Find`.
 4. You should see information about the peer including its addresses.
+
+### Adding Content via the Delegate
+1. In one browser, such as Firefox, enter some text in the `Add Data` field and click `Add`.
+2. Once added, JSON will be printed in the browser. Copy the value of `"hash"`.
+3. Close your Firefox tab. Open a new browser window in a **different** browser, such as Chrome.
+4. In the new window, copy the hash from step 2 into the `Hash` field and click `Find`.
+5. The text you entered in step 1 should display.
+
+**Note**: By closing the first window before fetching the content, you are ensuring that data cannot be retrieved from it, and instead the delegate must be relied on.

examples/delegated-routing/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "ipfs": "~0.34.4",
+    "ipfs": "~0.36.1",
     "libp2p": "github:libp2p/js-libp2p#master",
     "libp2p-delegated-content-routing": "~0.2.2",
     "libp2p-delegated-peer-routing": "~0.2.2",
-    "libp2p-kad-dht": "~0.14.12",
-    "libp2p-mplex": "~0.8.5",
+    "libp2p-kad-dht": "~0.15.0",
     "libp2p-secio": "~0.11.1",
-    "libp2p-webrtc-star": "~0.15.8",
+    "libp2p-webrtc-star": "~0.16.1",
     "libp2p-websocket-star": "~0.10.2",
     "libp2p-websockets": "~0.12.2",
+    "pull-mplex": "~0.1.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "2.1.8"

examples/delegated-routing/src/App.js

@@ -6,7 +6,10 @@ import Ipfs from 'ipfs'
 import libp2pBundle from './libp2p-bundle'
 const Component = React.Component
 
-const BootstrapNode = '/ip4/127.0.0.1/tcp/8081/ws/p2p/QmdoG8DpzYUZMVP5dGmgmigZwR1RE8Cf6SxMPg1SBXJAQ8'
+/* TODO: Add your go IPFS nodes ID here by running `ipfs id` */
+const BootstrapNodeID = 'Qm...'
+/* TODO: Ensure the IP and port match your nodes Websocket address shown when running the daemon `ipfs daemon` */
+const BootstrapNode = `/ip4/127.0.0.1/tcp/8081/ws/p2p/${BootstrapNodeID}`
 
 class App extends Component {
   constructor (props) {
@@ -17,6 +20,7 @@ class App extends Component {
       hash: 'QmPZ9gcCEpqKTo6aq61g2nXGUhM4iCL3ewB6LDXZCtioEB',
       // This peer is one of the Bootstrap nodes for IPFS
       peer: 'QmV6kA2fB8kTr6jc3pL5zbNsjKbmPUHAPKKHRBYe1kDEyc',
+      data: '',
       isLoading: 0
     }
     this.peerInterval = null
@@ -25,6 +29,8 @@ class App extends Component {
     this.handleHashSubmit = this.handleHashSubmit.bind(this)
     this.handlePeerChange = this.handlePeerChange.bind(this)
     this.handlePeerSubmit = this.handlePeerSubmit.bind(this)
+    this.handleDataChange = this.handleDataChange.bind(this)
+    this.handleDataSubmit = this.handleDataSubmit.bind(this)
   }
 
   handleHashChange (event) {
@@ -37,14 +43,19 @@ class App extends Component {
       peer: event.target.value
     })
   }
+  handleDataChange (event) {
+    this.setState({
+      data: event.target.value
+    })
+  }
 
   handleHashSubmit (event) {
     event.preventDefault()
     this.setState({
       isLoading: this.state.isLoading + 1
     })
 
-    this.ipfs.files.cat(this.state.hash, (err, data) => {
+    this.ipfs.cat(this.state.hash, (err, data) => {
       if (err) console.log('Error', err)
 
       this.setState({
@@ -59,7 +70,22 @@ class App extends Component {
       isLoading: this.state.isLoading + 1
     })
 
-    this.ipfs.dht.findpeer(this.state.peer, (err, results) => {
+    this.ipfs.dht.findPeer(this.state.peer, (err, results) => {
+      if (err) console.log('Error', err)
+
+      this.setState({
+        response: JSON.stringify(results, null, 2),
+        isLoading: this.state.isLoading - 1
+      })
+    })
+  }
+  handleDataSubmit (event) {
+    event.preventDefault()
+    this.setState({
+      isLoading: this.state.isLoading + 1
+    })
+
+    this.ipfs.add(Buffer.from(this.state.data), (err, results) => {
       if (err) console.log('Error', err)
 
       this.setState({
@@ -135,6 +161,13 @@ class App extends Component {
               <input type="submit" value="Find" />
             </label>
           </form>
+          <form onSubmit={this.handleDataSubmit}>
+            <label>
+              Add Data:
+              <input type="text" value={this.state.data} onChange={this.handleDataChange} />
+              <input type="submit" value="Add" />
+            </label>
+          </form>
         </section>
         <section className={[this.state.isLoading > 0 ? 'loading' : '', 'loader'].join(' ')}>
           <div className="lds-ripple"><div></div><div></div></div>

examples/delegated-routing/src/libp2p-bundle.js

@@ -5,7 +5,7 @@ const Libp2p = require('libp2p')
 const Websockets = require('libp2p-websockets')
 const WebSocketStar = require('libp2p-websocket-star')
 const WebRTCStar = require('libp2p-webrtc-star')
-const MPLEX = require('libp2p-mplex')
+const MPLEX = require('pull-mplex')
 const SECIO = require('libp2p-secio')
 const KadDHT = require('libp2p-kad-dht')
 const DelegatedPeerRouter = require('libp2p-delegated-peer-routing')
@@ -14,8 +14,9 @@ const DelegatedContentRouter = require('libp2p-delegated-content-routing')
 export default function Libp2pBundle ({peerInfo, peerBook}) {
   const wrtcstar = new WebRTCStar({id: peerInfo.id})
   const wsstar = new WebSocketStar({id: peerInfo.id})
+  /* TODO: Ensure the delegatedApiOptions match your IPFS nodes API server */
   const delegatedApiOptions = {
-    host: '0.0.0.0',
+    host: '127.0.0.1',
     protocol: 'http',
     port: '8080'
   }
@@ -25,7 +26,8 @@ export default function Libp2pBundle ({peerInfo, peerBook}) {
     peerBook,
     // Lets limit the connection managers peers and have it check peer health less frequently
     connectionManager: {
-      maxPeers: 10,
+      minPeers: 20,
+      maxPeers: 50,
       pollInterval: 5000
     },
     modules: {