|
| 1 | +# Tutorial - Transfer files between the browser and other IPFS nodes |
| 2 | + |
| 3 | +> Welcome! This tutorial will help you exchange files between browser nodes and go-ipfs nodes. |
| 4 | +
|
| 5 | +There are a couple of caveats: |
| 6 | + |
| 7 | +- 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. |
| 8 | +- We need to use a signalling server to establish the WebRTC connections, this won't be necessary as soon as libp2p-relay gets developed |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | +## Application diagram |
| 13 | + |
| 14 | +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. |
| 15 | + |
| 16 | +``` |
| 17 | +┌──────────────┐ ┌──────────────┐ |
| 18 | +│ Browser │ │ Browser │ |
| 19 | +│ │ WebRTC │ │ |
| 20 | +│ │◀─────────────────▶│ │ |
| 21 | +└──────────────┘ └──────────────┘ |
| 22 | + ▲ ▲ |
| 23 | + │ │ |
| 24 | + │WebSockets WebSockets│ |
| 25 | + │ ┌──────────────┐ │ |
| 26 | + │ │ Desktop │ │ |
| 27 | + └───────▶│ │◀─────────┘ |
| 28 | + └──────────────┘ |
| 29 | +``` |
| 30 | + |
| 31 | +## Check out the final state |
| 32 | + |
| 33 | +In the end, you should get an app running, something like this: |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +## Step-by-step instructions |
| 38 | + |
| 39 | +Here's what we are going to be doing, today: |
| 40 | + |
| 41 | +- 1. Set up, install a go-ipfs node in your machine |
| 42 | +- 2. Make your daemons listen on WebSockets |
| 43 | +- 3. Start the WebApp |
| 44 | +- 4. Dial to a node using WebSockets (your Desktop ones) |
| 45 | +- 5. Transfer files between all of your nodes, have fun! |
| 46 | + |
| 47 | +Let's go. |
| 48 | + |
| 49 | +### 1. Set up |
| 50 | + |
| 51 | +You'll need to have an implementation of IPFS running on your machine. Currently, this means either go-ipfs or js-ipfs. |
| 52 | + |
| 53 | +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). |
| 54 | + |
| 55 | +Installing js-ipfs requires you to have node and [npm](https://www.npmjs.com). Then, you simply run: |
| 56 | + |
| 57 | +```sh |
| 58 | +> npm install --global ipfs |
| 59 | +... |
| 60 | +> jsipfs --help |
| 61 | +Commands: |
| 62 | +... |
| 63 | +``` |
| 64 | + |
| 65 | +This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`. |
| 66 | + |
| 67 | +At this point, you have either js-ipfs or go-ipfs running. Now, initialize it: |
| 68 | + |
| 69 | +```sh |
| 70 | +> ipfs init |
| 71 | +# or |
| 72 | +> jsipfs init |
| 73 | +``` |
| 74 | + |
| 75 | +This will set up your IPFS repo in your home directory. |
| 76 | + |
| 77 | +### 2. Make your daemons listen on WebSockets |
| 78 | + |
| 79 | +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. |
| 80 | + |
| 81 | +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: |
| 82 | + |
| 83 | +```json |
| 84 | + "Addresses": { |
| 85 | + "Swarm": [ |
| 86 | + "/ip4/0.0.0.0/tcp/4002" |
| 87 | + ], |
| 88 | + "API": "/ip4/127.0.0.1/tcp/5002", |
| 89 | + "Gateway": "/ip4/127.0.0.1/tcp/9090" |
| 90 | + } |
| 91 | +``` |
| 92 | + |
| 93 | +Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now, it should look like this: |
| 94 | + |
| 95 | +```json |
| 96 | + "Addresses": { |
| 97 | + "Swarm": [ |
| 98 | + "/ip4/0.0.0.0/tcp/4002", |
| 99 | + "/ip4/127.0.0.1/tcp/9999/ws" |
| 100 | + ], |
| 101 | + "API": "/ip4/127.0.0.1/tcp/5002", |
| 102 | + "Gateway": "/ip4/127.0.0.1/tcp/9090" |
| 103 | + } |
| 104 | +``` |
| 105 | + |
| 106 | +Now it should listen on Websockets. We're ready to start the daemon. |
| 107 | + |
| 108 | +```sh |
| 109 | +> ipfs daemon |
| 110 | +``` |
| 111 | + |
| 112 | +(Again, either `jsipfs` or `ipfs` works. I'll stop repeting this from here on out.) |
| 113 | + |
| 114 | +You should see the Websocket address in the output: |
| 115 | + |
| 116 | +```sh |
| 117 | +Initializing daemon... |
| 118 | +Swarm listening on /ip4/127.0.0.1/tcp/4001 |
| 119 | +Swarm listening on /ip4/127.0.0.1/tcp/9999/ws |
| 120 | +Swarm listening on /ip4/192.168.10.38/tcp/4001 |
| 121 | +Swarm listening on /ip4/192.168.10.38/tcp/9999/ws |
| 122 | +API server listening on /ip4/127.0.0.1/tcp/5001 |
| 123 | +Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080 |
| 124 | +Daemon is ready |
| 125 | +``` |
| 126 | + |
| 127 | +It's there in line 5 - see the `/ws`? Good. that means it is listening. |
| 128 | + |
| 129 | +### 3. Start the WebApp project |
| 130 | + |
| 131 | +Now, you'll need to make sure you are in `js-ipfs/examples/transfer-files`. 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: |
| 132 | + |
| 133 | +```sh |
| 134 | +> npm install |
| 135 | +> npm start |
| 136 | +``` |
| 137 | + |
| 138 | +You should see this text: |
| 139 | + |
| 140 | +```sh |
| 141 | +Starting up http-server, serving public |
| 142 | +Available on: |
| 143 | + http://127.0.0.1:12345 |
| 144 | + http://192.168.1.24:12345 |
| 145 | +Hit CTRL-C to stop the server |
| 146 | +``` |
| 147 | + |
| 148 | +Go to http://127.0.0.1:12345 in your browser; you're now in the webapp, if all went well. |
| 149 | + |
| 150 | +### 4. Dial to a node using WebSockets (your Desktop ones) |
| 151 | + |
| 152 | +On your local node, 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>". |
| 153 | + |
| 154 | + |
| 155 | + |
| 156 | + |
| 157 | +### 5. Transfer files between all of your nodes, have fun! |
| 158 | + |
| 159 | +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! |
| 160 | + |
| 161 | + |
| 162 | + |
0 commit comments