docs(examples): Interop Example 1

Move interop-example1 to examples/access-go-ipfs-files/cat-a-file.
Remove dependency on ipfs-daemon and use ipfs.js.
Add start-ipfs function to handle the init dance.
Update instructions in README.

examples/access-go-ipfs-files/cat-a-file/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+public/ipfs.js

examples/access-go-ipfs-files/cat-a-file/README.md

@@ -0,0 +1,90 @@
+# access-go-ipfs-files - cat-a-file
+
+**WIP**
+
+## TODO
+
+- Add "connect to peer" input field and "connect" button under the "Peers" section in index.html
+- Add `connectToPeer` function which calls `ipfs.swarm.connect(multiaddr)`. See https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/src/DataStore.js#L82 and https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/README.md#start-an-interplanetary-file-exchange-daemon. The multiaddr to connect to looks like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/QmZGH8GeASSkSZoNLPEBu1MqtzLTERNUEwh9yTHLEF5kcW`
+- Hook up "connect" button's click event to `connectToPeer` function
+- Add instructions to this README on how to add a file in go-ipfs
+- Add instructions to this README on how to cat it in the UI
+- Make sure the "Start a go-ipfs daemon" instructions are correct
+- Make sure go-ipfs daemon and the example connect to each other
+
+## Step-by-step Instructions
+
+### Start a go-ipfs daemon
+
+1. Install go-ipfs from master (TODO: link). 
+
+2. Run `ipfs init`
+
+3. Edit your IPFS config file, located at `~/.ipfs/config`
+
+4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
+```
+"Addresses": {
+  "API": "/ip4/127.0.0.1/tcp/5001",
+  "Gateway": "/ip4/0.0.0.0/tcp/8080",
+  "Swarm": [
+    "/ip4/0.0.0.0/tcp/4001",
+    "/ip4/0.0.0.0/tcp/9999/ws"
+  ]
+},
+```
+
+5. Start the go-ipfs daemon with:
+```
+ipfs daemon
+```
+
+6. You should see the Websocket address in the output:
+```
+Initializing daemon...
+Swarm listening on /ip4/127.0.0.1/tcp/4001
+Swarm listening on /ip4/127.0.0.1/tcp/9999/ws
+Swarm listening on /ip4/192.168.10.38/tcp/4001
+Swarm listening on /ip4/192.168.10.38/tcp/9999/ws
+API server listening on /ip4/127.0.0.1/tcp/5001
+Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
+Daemon is ready
+```
+
+If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
+
+## Start the example
+
+**NOTE!** Before running the examples, you need to build `js-ipfs`. You can do this by following the instructions in https://github.com/ipfs/js-ipfs#clone-and-install-dependnecies and then building it as per https://github.com/ipfs/js-ipfs#build-a-dist-version.
+
+```
+npm install
+npm start
+```
+
+Open http://127.0.0.1:8080 in a browser.
+
+**TODO: add instructions how to cat a hash in the UI.**
+
+## Tutorial
+
+Steps
+1. create IPFS instance
+
+TODO. See `./start-ipfs.js`
+
+3. add a file in go-ipfs
+4. copy file's hash
+5. ipfs.files.cat
+
+TODO. add ipfs.files.cat code examples from index.html
+
+6. output the buffer to <img>
+
+```
+...
+stream.on('end', () => {
+  const blob = new Blob(buf)
+  picture.src = URL.createObjectURL(blob)
+})
+```

examples/access-go-ipfs-files/cat-a-file/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "cat-a-file",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "postinstall": "cp ../../../dist/index.js ./public/ipfs.js",
+    "start": "http-server -c-1"
+  },
+  "author": "Haad",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^0.9.0"
+  }
+}

examples/interop-examples/index.html → examples/access-go-ipfs-files/cat-a-file/public/index.html

@@ -3,7 +3,9 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="styles.css">
     <!-- Include IPFS -->
-    <script type="text/javascript" src="node_modules/ipfs-daemon/dist/ipfs-browser-daemon.js" charset="utf-8"></script>
+    <script src="ipfs.js"></script>
+    <!-- Include a helper script that starts IPFS -->
+    <script type="text/javascript" src="start-ipfs.js" charset="utf-8"></script>
   </head>
 
   <body>
@@ -56,34 +58,45 @@ <h2>Files</h2>
       const multihashInput = document.getElementById("multihash")
       const catButton = document.getElementById("cat")
 
-      let ipfs, pollPeersTimer
+      let ipfs, peerInfo, pollPeersTimer
+
+      const ipfsOptions = {
+        // Directory to which save IPFS data to
+        IpfsDataDir: dirInput.value,
+        // IPFS dev server: webrtc-star-signalling.cloud.ipfs.team
+        SignalServer: signalServerInput.value,
+        // Local webrtc-star server, you can get it from:
+        // https://github.com/libp2p/js-libp2p-webrtc-star
+        // SignalServer: '127.0.0.1:9090',
+      }
 
       // Start IPFS instance
       const start = () => {
         if (!ipfs) {
-          // Create an IPFS instance
-          ipfs = new IpfsDaemon({
-            // Directory to which save IPFS data to
-            IpfsDataDir: dirInput.value,
-            // IPFS dev server: webrtc-star-signalling.cloud.ipfs.team
-            SignalServer: signalServerInput.value,
-          })
-
           // Update the UI with initial settings
           updateView('starting', ipfs)
 
-          // Wait for IPFS to start
-          ipfs.on('ready', () => {
-            // Update the UI
-            updateView('ready', ipfs)
+          // Create an IPFS instance
+          // window.startIpfs() is exposed in ./start-ipfs.js
+          window.startIpfs(ipfsOptions, (err, node) => {
+            if (err) {
+              onError(err)
+              return
+            }
 
-            // Poll for peers from IPFS and display them
-            pollPeersTimer = setInterval(updatePeers, 1000)
-            peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
-          })
+            ipfs = node
+
+            // Get our IPFS instance's info: ID and address
+            ipfs.id().then((id) => {
+              peerInfo = id
+              // Update the UI
+              updateView('ready', ipfs)
 
-          // Handle IPFS errors
-          ipfs.on('error', onError)
+              // Poll for peers from IPFS and display them
+              pollPeersTimer = setInterval(updatePeers, 1000)
+              peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
+            })
+          })
         }
       }
 
@@ -93,7 +106,7 @@ <h2>Files</h2>
           if (pollPeersTimer) 
             clearInterval(pollPeersTimer)
 
-          ipfs.stop()
+          ipfs.goOffline()
           ipfs = null
           updateView('stopped', ipfs)
         }
@@ -241,9 +254,9 @@ <h2>Files</h2>
           details.innerHTML = '<div>'
             + '<h2>IPFS Node</h2>'
             + '<b>ID</b><br>'
-            + ipfs.PeerId + '<br><br>'
+            + peerInfo.id + '<br><br>'
             + '<b>Address</b><br>' 
-            + ipfs.APIAddress[0] + '<br><br>'
+            + peerInfo.addresses[0] + '<br><br>'
             + '<b>IPFS Data Directory</b><br>' 
             + dirInput.value
           // Set the file status

examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js

@@ -0,0 +1,47 @@
+'use strict'
+
+// Start an IPFS instance
+window.startIpfs = (options, callback) => {
+  const repoPath = options.IpfsDataDir || '/tmp/ipfs'
+
+  const node = new window.Ipfs(repoPath)
+
+  node.init({ emptyRepo: true, bits: 2048 }, (err) => {
+    if (err && err.message !== 'repo already exists') {
+      return callback(err)
+    }
+
+    node.config.get((err, config) => {
+      if (err) {
+        return callback(err)
+      }
+
+      const host = options.SignalServer.split(':')[0] || '127.0.0.1'
+      const port = options.SignalServer.split(':')[1] || 9090
+      const signalServer = `/libp2p-webrtc-star/ip4/${host}/tcp/${port}/ws/ipfs/${config.Identity.PeerID}`
+
+      config.Addresses = {
+        Swarm: [
+          signalServer
+        ],
+        API: '',
+        Gateway: ''
+      }
+
+      config.Discovery.MDNS.Enabled = false
+
+      node.config.replace(config, (err) => {
+        if (err) { return callback(err) }
+
+        node.load((err) => {
+          if (err) { return callback(err) }
+          node.goOnline((err) => {
+            if (err) { return callback(err) }
+            console.log('IPFS node is ready')
+            callback(null, node)
+          })
+        })
+      })
+    })
+  })
+}