Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

Commit da63633

Browse files
committed
docs: update readme
1 parent 2aace57 commit da63633

File tree

14 files changed

+88
-58
lines changed

14 files changed

+88
-58
lines changed
Lines changed: 79 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
# Tutorial - Transfer files between the browser and other IPFS nodes
1+
# Exchange files between the browser and other IPFS nodes
22

3-
> Welcome! This tutorial will help you exchange files between browser nodes and go-ipfs nodes.
3+
This tutorial will help you exchange files between browser nodes and go-ipfs or js-ipfs nodes!
44

5-
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.
5+
**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.
66

7-
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.
7+
That being said, we will explain how to circumvent these caveats and once they are fixed, we'll update the tutorial as well.
88

99
## Application diagram
1010

11-
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.
11+
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.
1212

1313
```
1414
┌──────────────┐ ┌──────────────┐
@@ -23,59 +23,57 @@ The goal of this tutorial is to create a application with a IPFS node that dials
2323
└──────────────┘
2424
```
2525

26-
## Check out the final state
26+
## Tutorial goal
2727

28-
In the end, you should get an app running, something like this:
28+
The goal of this tutorial is for you to have something like this in the end:
2929

30-
![](https://ipfs.io/ipfs/Qmbti2nBZWxQLhpggB7tC3HvcxTMivmMo3MVwQveAsHBAE)
30+
![](img/goal.png)
3131

3232
## Step-by-step instructions
3333

34-
Here's what we are going to be doing, today:
34+
Here's what we are going to be doing:
3535

36-
- 1. Set up, install a go-ipfs node in your machine
37-
- 2. Make your daemons listen on WebSockets
38-
- 3. Start the WebApp
39-
- 4. Dial to a node using WebSockets (your Desktop ones)
40-
- 5. Transfer files between all of your nodes, have fun!
36+
1. Install a `go-ipfs` or `js-ipfs` node in your machine
37+
2. Make your daemons listen on WebSockets
38+
3. Start the app
39+
4. Dial to a node using WebSockets (your desktop ones)
40+
5. Transfer files between all of your nodes!
4141

42-
Let's go.
42+
Just follow the instructions below and it will be up and running in no time!
4343

44-
### 1. Set up
44+
### 1. Install `go-ipfs` or `js-ipfs`
4545

46-
You'll need to have an implementation of IPFS running on your machine. Currently, this means either go-ipfs or js-ipfs.
46+
If you already have `go-ipfs` or `js-ipfs` installed in your machine, you can skip this step. Otherwise, read on.
4747

48-
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).
48+
This tutorial works with either `go-ipfs` or `js-ipfs`, so you can install one of your choosing.
4949

50-
Installing js-ipfs requires you to have node and [npm](https://www.npmjs.com). Then, you simply run:
50+
`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).
51+
52+
`js-ipfs` requires you to have [node and npm](https://www.npmjs.com/get-npm) installed. Then, you simply run:
5153

5254
```sh
5355
> npm install --global ipfs
54-
...
55-
> jsipfs --help
56-
Commands:
57-
...
5856
```
5957

6058
This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`.
6159

62-
At this point, you have either js-ipfs or go-ipfs running. Now, initialize it:
60+
At this point, you should have either `js-ipfs` or `go-ipfs` running. Now, initialize it:
6361

6462
```sh
6563
> ipfs init
6664
# or
6765
> jsipfs init
6866
```
6967

70-
This will set up your IPFS repo in your home directory.
68+
This will set up an IPFS repo in your home directory.
7169

7270
### 2. Make your daemons listen on WebSockets
7371

74-
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.
72+
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.
7573

76-
Note: js-ipfs sets up a websocket listener by default, if you are just using js-ipfs you can skip this test.
74+
**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.
7775

78-
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:
76+
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:
7977

8078
```json
8179
"Addresses": {
@@ -87,7 +85,7 @@ Since websockets support is currently not on by default, you'll need to add a We
8785
}
8886
```
8987

90-
Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now, it should look like this:
88+
Add the `/ip4/127.0.0.1/tcp/9999/ws` entry to your `Swarm` array. Now it should look like this:
9189

9290
```json
9391
"Addresses": {
@@ -100,14 +98,14 @@ Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now
10098
}
10199
```
102100

103-
Now it should listen on Websockets. We're ready to start the daemon.
101+
Save the file and it should be able to listen on Websockets. We're ready to start the daemon.
104102

105103
```sh
106104
> ipfs daemon
105+
# or
106+
> jsipfs daemon
107107
```
108108

109-
(Again, either `jsipfs` or `ipfs` works. I'll stop repeting this from here on out.)
110-
111109
You should see the Websocket address in the output:
112110

113111
```sh
@@ -121,39 +119,74 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
121119
Daemon is ready
122120
```
123121

124-
It's there in line 5 - see the `/ws`? Good. that means it is listening.
122+
Check the `/ws` in line 5, that means it is listening. Cool.
123+
124+
### 3. Start the app
125125

126-
### 3. Start the WebApp project
126+
Make sure you're in `js-ipfs/examples/exchange-files-in-browser`.
127127

128-
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:
128+
We'll need to install and bundle the dependencies to run the app. Let's do it:
129129

130130
```sh
131131
> npm install
132+
...
133+
> npm run bundle
134+
...
132135
> npm start
133136
```
134137

135-
You should see this text:
138+
You should see something like this if all went well:
136139

137140
```sh
138141
Starting up http-server, serving public
139142
Available on:
140143
http://127.0.0.1:12345
141-
http://192.168.1.24:12345
144+
http://192.168.2.92:12345
142145
Hit CTRL-C to stop the server
143146
```
144147

145-
Go to http://127.0.0.1:12345 in your browser; you're now in the webapp, if all went well.
148+
Now go to http://127.0.0.1:12345 in a modern browser and you're on!
149+
150+
### 4. Dial to a node using WebSockets (your desktop ones)
151+
152+
Make sure you have a daemon running. If you don't, run:
153+
154+
```sh
155+
> ipfs daemon
156+
# or
157+
> jsipfs daemon
158+
```
159+
160+
Open another terminal window to find the websocket addresses that it is listening on:
161+
162+
```sh
163+
> ipfs id
164+
# or
165+
> jsipfs id
166+
```
167+
168+
It should look like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/<your_peer_id>`.
146169

147-
### 4. Dial to a node using WebSockets (your Desktop ones)
170+
Copy and paste the *multiaddr* to connect to that peer:
148171

149-
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`.
172+
![](img/connect-1.png)
150173

151-
![](https://ipfs.io/ipfs/Qme9RM3SSyb57PGA7n5bEhwhMwS8fDrMZ8zzKkrwncRcfm)
152-
![](https://ipfs.io/ipfs/QmdFX4wJkKpryisjGQGt88Yr8zaQM9zMPL3xzK2YGTUMNM)
174+
Check that you got connected:
175+
176+
![](img/connect-2.png)
177+
178+
### 5. Transfer files between all of your nodes!
179+
180+
Now you can add files through the CLI with:
181+
182+
```sh
183+
> ipfs add <file>
184+
# or
185+
> jsipfs add <file>
186+
```
153187

154-
### 5. Transfer files between all of your nodes, have fun!
188+
Copy and paste the *multihash* and fetch the file in the browser!
155189

156-
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!
190+
![](img/fetch.png)
157191

158-
![](https://ipfs.io/ipfs/QmcVNbhmMFzz9x2mY33GPGetibFGXXD7dYd3kDa7eKEUyw)
159-
![](https://ipfs.io/ipfs/QmZcRvGQtM7mnSWKqFwptCYoBitBJaGBKLLjvzENfzXFMi)
192+
You can also open two browser tabs, drag and drop files in one of them, and fetch them in the other!
Loading
Loading
Binary file not shown.
Binary file not shown.
Loading
-198 KB
Binary file not shown.
Loading

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.0.0",
44
"scripts": {
55
"bundle": "browserify public/app.js > public/bundle.js",
6-
"dev": "npm run bundle && npm run start",
7-
"start": "http-server -c-1 -p 12345 public"
6+
"start": "http-server -c-1 -p 12345 public",
7+
"dev": "npm run bundle && npm run start"
88
},
99
"license": "MIT",
1010
"devDependencies": {

examples/exchange-files-in-browser/public/app.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
/* global self */
21
'use strict'
32

3+
const IPFS = require('ipfs')
4+
45
// Daemon
56
const $daemonId = document.querySelector('.daemon-id')
67
const $daemonAddresses = document.querySelector('.daemon-addresses')
@@ -40,8 +41,7 @@ function start () {
4041
}
4142
}
4243

43-
// node = new IPFS(options)
44-
node = new self.Ipfs(options)
44+
node = new IPFS(options)
4545

4646
Buffer = node.types.Buffer
4747

@@ -80,7 +80,7 @@ function appendFile (name, hash, size, data) {
8080
const link = document.createElement('a')
8181
link.setAttribute('href', url)
8282
link.setAttribute('download', name)
83-
link.innerHTML = '<img width=20 class="table-action" src="download.svg" alt="Download" />'
83+
link.innerHTML = '<img width=20 class="table-action" src="assets/download.svg" alt="Download" />'
8484
downloadCell.appendChild(link)
8585

8686
row.appendChild(nameCell)

0 commit comments

Comments
 (0)