You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 12, 2024. It is now read-only.
# Tutorial - Transfer files between the browser and other IPFS nodes
1
+
# Exchange files between the browser and other IPFS nodes
2
2
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!
4
4
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:** As `js-ipfs@0.29.0` 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.
6
6
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.
8
8
9
9
## Application diagram
10
10
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.
12
12
13
13
```
14
14
┌──────────────┐ ┌──────────────┐
@@ -23,59 +23,57 @@ The goal of this tutorial is to create a application with a IPFS node that dials
23
23
└──────────────┘
24
24
```
25
25
26
-
## Check out the final state
26
+
## Tutorial goal
27
27
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:
-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!
41
41
42
-
Let's go.
42
+
Just follow the instructions below and it will be up and running in no time!
43
43
44
-
### 1. Set up
44
+
### 1. Install `go-ipfs` or `js-ipfs`
45
45
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.
47
47
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.
49
49
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:
51
53
52
54
```sh
53
55
> npm install --global ipfs
54
-
...
55
-
> jsipfs --help
56
-
Commands:
57
-
...
58
56
```
59
57
60
58
This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`.
61
59
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:
63
61
64
62
```sh
65
63
> ipfs init
66
64
# or
67
65
> jsipfs init
68
66
```
69
67
70
-
This will set up your IPFS repo in your home directory.
68
+
This will set up an IPFS repo in your home directory.
71
69
72
70
### 2. Make your daemons listen on WebSockets
73
71
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.
75
73
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.
77
75
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:
79
77
80
78
```json
81
79
"Addresses": {
@@ -87,7 +85,7 @@ Since websockets support is currently not on by default, you'll need to add a We
87
85
}
88
86
```
89
87
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:
91
89
92
90
```json
93
91
"Addresses": {
@@ -100,14 +98,14 @@ Add the following entry to your `Swarm` array: `/ip4/127.0.0.1/tcp/9999/ws`. Now
100
98
}
101
99
```
102
100
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.
104
102
105
103
```sh
106
104
> ipfs daemon
105
+
# or
106
+
> jsipfs daemon
107
107
```
108
108
109
-
(Again, either `jsipfs` or `ipfs` works. I'll stop repeting this from here on out.)
110
-
111
109
You should see the Websocket address in the output:
112
110
113
111
```sh
@@ -121,39 +119,85 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
121
119
Daemon is ready
122
120
```
123
121
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.
125
123
126
-
### 3. Start the WebApp project
124
+
### 3. Start the app
127
125
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:
126
+
Make sure you're in `js-ipfs/examples/exchange-files-in-browser`.
127
+
128
+
We'll need to install and bundle the dependencies to run the app. Let's do it:
129
129
130
130
```sh
131
131
> npm install
132
+
...
133
+
> npm run bundle
134
+
...
132
135
> npm start
133
136
```
134
137
135
-
You should see this text:
138
+
You should see something like this if all went well:
136
139
137
140
```sh
138
141
Starting up http-server, serving public
139
142
Available on:
140
143
http://127.0.0.1:12345
141
-
http://192.168.1.24:12345
144
+
http://192.168.2.92:12345
142
145
Hit CTRL-C to stop the server
143
146
```
144
147
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>`.
169
+
170
+
Copy and paste the *multiaddr* to connect to that peer:
146
171
147
-
### 4. Dial to a node using WebSockets (your Desktop ones)
172
+
148
173
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`.
### 5. Transfer files between all of your nodes, have fun!
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
+
```
187
+
188
+
Copy and paste the *multihash* and fetch the file in the browser!
189
+
190
+
191
+
192
+
You can also open two browser tabs, drag and drop files in one of them, and fetch them in the other!
193
+
194
+
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:
195
+
196
+
```
197
+
http://127.0.0.1:12345/#file-exchange
198
+
# You can substitute `file-exchange` with anything you like, just make sure the two tabs are in the same workspace.
199
+
```
155
200
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!
201
+
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!
0 commit comments