docs: revamp exchange files example

examples/exchange-files-in-browser/README.md

@@ -1,14 +1,14 @@
-# Tutorial - Transfer files between the browser and other IPFS nodes
+# Exchange files between the browser and other IPFS nodes
 
-> Welcome! This tutorial will help you exchange files between browser nodes and go-ipfs nodes.
+This tutorial will help you exchange files between browser nodes and go-ipfs or js-ipfs nodes!
 
-caveat: js-ipfs currently doesn't support DHT peer discovery, the peer from which you are fetching data should be within the reach (local or in public IP) of the browser node.
+**Note:** `js-ipfs` currently doesn't support DHT peer discovery, so the peer from which you are fetching data should be within the reach (local or in public IP) of the browser node.
 
-That being said, we will explain throughout this tutorial to circunvent the caveats and once they are fixed, we will update the tutorial as well.
+That being said, we will explain how to circumvent these caveats and once they are fixed, we'll update the tutorial as well.
 
 ## Application diagram
 
-The goal of this tutorial is to create a application with a IPFS node that dials to other instances of it using WebRTC, and at the same time dial and transfer files from a Desktop IPFS node using WebSockets as the transport.
+The goal of this tutorial is to create a simple application with an IPFS node that dials to other instances using WebRTC, and at the same time dial and transfer files from a browser IPFS node using WebSockets as the transport.
 
 ```
 ┌──────────────┐                ┌──────────────┐
@@ -23,59 +23,57 @@ The goal of this tutorial is to create a application with a IPFS node that dials
                 └──────────────┘
 ```
 
-## Check out the final state
+## Tutorial goal
 
-In the end, you should get an app running, something like this:
+The goal of this tutorial is for you to have something like this in the end:
 
-![](https://ipfs.io/ipfs/Qmbti2nBZWxQLhpggB7tC3HvcxTMivmMo3MVwQveAsHBAE)
+![](img/goal.png)
 
 ## Step-by-step instructions
 
-Here's what we are going to be doing, today:
+Here's what we are going to be doing:
 
-- 1. Set up, install a go-ipfs node in your machine
-- 2. Make your daemons listen on WebSockets
-- 3. Start the WebApp
-- 4. Dial to a node using WebSockets (your Desktop ones)
-- 5. Transfer files between all of your nodes, have fun!
+1. Install a `go-ipfs` or `js-ipfs` node in your machine
+2. Make your daemons listen on WebSockets
+3. Start the app
+4. Dial to a node using WebSockets (your desktop ones)
+5. Transfer files between all of your nodes!
 
-Let's go.
+Just follow the instructions below and it will be up and running in no time!
 
-### 1. Set up
+### 1. Install `go-ipfs` or `js-ipfs`
 
-You'll need to have an implementation of IPFS running on your machine. Currently, this means either go-ipfs or js-ipfs.
+If you already have `go-ipfs` or `js-ipfs` installed in your machine, you can skip this step. Otherwise, read on.
 
-Installing go-ipfs can be done by installing the binary [here](https://ipfs.io/ipns/dist.ipfs.io/#go-ipfs). Alternatively, you could follow the instructions in the README at [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs).
+This tutorial works with either `go-ipfs` or `js-ipfs`, so you can install one of your choosing.
 
-Installing js-ipfs requires you to have node and [npm](https://www.npmjs.com). Then, you simply run:
+`go-ipfs` can be installed via its binary [here](https://ipfs.io/ipns/dist.ipfs.io/#go-ipfs). Alternatively, you can follow the install instructions in [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs#install).
+
+`js-ipfs` requires you to have [node and npm](https://www.npmjs.com/get-npm) installed. Then, you simply run:
 
 ```sh
 > npm install --global ipfs
-...
-> jsipfs --help
-Commands:
-...
 ```
 
 This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`.
 
-At this point, you have either js-ipfs or go-ipfs running. Now, initialize it:
+At this point, you should have either `js-ipfs` or `go-ipfs` running. Now, initialize it:
 
 ```sh
 > ipfs init
 # or
 > jsipfs init
 ```
 
-This will set up your IPFS repo in your home directory.
+This will set up an IPFS repo in your home directory.
 
 ### 2. Make your daemons listen on WebSockets
 
-At this point, you need to edit your `config` file, the one you just set up with `{js}ipfs init`. It should be in either `~/.jsipfs/config` or `~/.ipfs/config`, depending on whether you're using JS or Go.
+Now you need to edit your `config` file, the one you just set up with `{js}ipfs init`. It should be in either `~/.jsipfs/config` or `~/.ipfs/config`, depending on whether you're using JS or Go.
 
-Note: js-ipfs sets up a websocket listener by default, if you are just using js-ipfs you can skip this test.
+**Note:** `js-ipfs` sets up a websocket listener by default, so if you're using the JS implementation you can skip this and just start the daemon.
 
-Since websockets support is currently not on by default, you'll need to add a WebSockets address manually. Look into your config file and find the `Addresses` section:
+Since websockets support is currently not on by default, you'll need to add a WebSockets address manually. Look into your config file to find the `Addresses` section:
 
 ```json
 "Addresses": {
@@ -87,7 +85,7 @@ Since websockets support is currently not on by default, you'll need to add a We
 }
 ```
 
-Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now, it should look like this: 
+Add the `/ip4/127.0.0.1/tcp/9999/ws` entry to your `Swarm` array. Now it should look like this:
 
 ```json
 "Addresses": {
@@ -100,14 +98,14 @@ Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now
 }
 ```
 
-Now it should listen on Websockets. We're ready to start the daemon.
+Save the file and it should be able to listen on Websockets. We're ready to start the daemon.
 
 ```sh
 > ipfs daemon
+# or
+> jsipfs daemon
 ```
 
-(Again, either `jsipfs` or `ipfs` works. I'll stop repeting this from here on out.)
-
 You should see the Websocket address in the output:
 
 ```sh
@@ -121,39 +119,85 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
 Daemon is ready
 ```
 
-It's there in line 5 - see the `/ws`? Good. that means it is listening.
+Check the `/ws` in line 5, that means it is listening. Cool.
 
-### 3. Start the WebApp project
+### 3. Start the app
 
-Now, you'll need to make sure you are in `js-ipfs/examples/exchange-files-in-browser`. You'll see a `package.json`: this manifest holds the information for which packages you'll need to install to run the webapp. Let's install them, and then start the project:
+Make sure you're in `js-ipfs/examples/exchange-files-in-browser`.
+
+We'll need to install and bundle the dependencies to run the app. Let's do it:
 
 ```sh
 > npm install
+...
+> npm run bundle
+...
 > npm start
 ```
 
-You should see this text:
+You should see something like this if all went well:
 
 ```sh
 Starting up http-server, serving public
 Available on:
   http://127.0.0.1:12345
-  http://192.168.1.24:12345
+  http://192.168.2.92:12345
 Hit CTRL-C to stop the server
 ```
 
-Go to http://127.0.0.1:12345 in your browser; you're now in the webapp, if all went well.
+Now go to http://127.0.0.1:12345 in a modern browser and you're on!
+
+### 4. Dial to a node using WebSockets (your desktop ones)
+
+Make sure you have a daemon running. If you don't, run:
+
+```sh
+> ipfs daemon
+# or
+> jsipfs daemon
+```
+
+Open another terminal window to find the websocket addresses that it is listening on:
+
+```sh
+> ipfs id
+# or
+> jsipfs id
+```
+
+It should look like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/<your_peer_id>`.
+
+Copy and paste the *multiaddr* to connect to that peer:
 
-### 4. Dial to a node using WebSockets (your Desktop ones)
+![](img/connect-1.png)
 
-On your terminal, run `ipfs id` to find the WebSockets address that it is listening on. Should look like this: `"/ip4/127.0.0.1/tcp/4003/ws/ipfs/<your peer id>". Important, your node must be running in order to have listeners, to do so, run in another tab of your terminal: `ipfs daemon`.
+Check that you got connected:
 
-![](https://ipfs.io/ipfs/Qme9RM3SSyb57PGA7n5bEhwhMwS8fDrMZ8zzKkrwncRcfm)
-![](https://ipfs.io/ipfs/QmdFX4wJkKpryisjGQGt88Yr8zaQM9zMPL3xzK2YGTUMNM)
+![](img/connect-2.png)
 
-### 5. Transfer files between all of your nodes, have fun!
+### 5. Transfer files between all of your nodes!
+
+Now you can add files through the CLI with:
+
+```sh
+> ipfs add <file>
+# or
+> jsipfs add <file>
+```
+
+Copy and paste the *multihash* and fetch the file in the browser!
+
+![](img/fetch.png)
+
+You can also open two browser tabs, drag and drop files in one of them, and fetch them in the other!
+
+But the coolest thing about this tutorial is `pubsub`! You can open two tabs that will share files through workspaces named after the url. Try opening two tabs with the following url:
+
+```
+http://127.0.0.1:12345/#file-exchange
+# You can substitute `file-exchange` with anything you like, just make sure the two tabs are in the same workspace.
+```
 
-Now you can drag an drop files on the browser or add them through the CLI with `ipfs add <file>` and with the fetch file box, you can retrieve the file to the browser or other browser tabs!
+Now every file that you upload in one tab will appear in the other! You can even open a new tab in that workspace and it will sync the files that were added before!
 
-![](https://ipfs.io/ipfs/QmcVNbhmMFzz9x2mY33GPGetibFGXXD7dYd3kDa7eKEUyw)
-![](https://ipfs.io/ipfs/QmZcRvGQtM7mnSWKqFwptCYoBitBJaGBKLLjvzENfzXFMi)
+![](img/pubsub.png)

examples/exchange-files-in-browser/package.json

@@ -3,16 +3,16 @@
   "version": "0.0.0",
   "scripts": {
     "bundle": "browserify public/app.js > public/bundle.js",
-    "dev": "npm run bundle && npm run start",
-    "start": "http-server -c-1 -p 12345 public"
+    "start": "http-server -c-1 -p 12345 public",
+    "dev": "npm run bundle && npm run start"
   },
   "license": "MIT",
   "devDependencies": {
-    "browserify": "^14.4.0",
-    "http-server": "~0.10.0"
+    "browserify": "^16.2.0",
+    "http-server": "^0.11.1"
   },
   "dependencies": {
-    "stream-buffers": "^3.0.1",
-    "ipfs": "file:../../"
+    "ipfs": "file:../../",
+    "stream-buffers": "^3.0.1"
   }
 }