From 31bfd625c3c50e50143e687c0c3e68f8489d9086 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Fri, 4 Jun 2021 22:11:07 +0000 Subject: [PATCH 01/32] Update from Forestry.io Ryan Baumann created src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- .../front_matter/templates/blog-post.yml | 1 + ...de-to-ipfs-connectivity-in-web-browsers.md | 408 ++++++++++++++++++ 2 files changed, 409 insertions(+) create mode 100644 src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md diff --git a/.forestry/front_matter/templates/blog-post.yml b/.forestry/front_matter/templates/blog-post.yml index 4deb5bfa..487712cf 100644 --- a/.forestry/front_matter/templates/blog-post.yml +++ b/.forestry/front_matter/templates/blog-post.yml @@ -150,6 +150,7 @@ fields: target="_blank">file an issue with the details. pages: - src/_blog/2021-05-31-distributed-wikipedia-mirror-update.md +- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md - src/_blog/announcing-js-ipfs-0.53.0.md - src/_blog/audius-uses-ipfs-for-content-streaming-storage-to-empower-artists-creators-worldwide.md - src/_blog/congrats-gitcoin-grants-round-9-winners.md diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md new file mode 100644 index 00000000..f769eced --- /dev/null +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -0,0 +1,408 @@ +--- +title: A Guide to IPFS Connectivity in Web Browsers +description: A minimal chat example using js-ipfs in the browser. +author: Discordian +date: 2021-07-05 +permalink: "/2021-07-05-guide-to-ipfs-connectivity-in-browsers" +translationKey: '' +header_image: '' +tags: +- libp2p +- browsers +- js-ipfs + +--- +# A Guide to IPFS Connectivity in Web Browsers + +We see a lot of questions about how to get started with using js-ipfs in the browser. I'm going to demonstrate a minimal chat example in js-ipfs entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with [libp2p](https://docs.libp2p.io)'s [pubsub](https://docs.libp2p.io/concepts/publish-subscribe/). + +### Getting the Code + +You can see the live demo [here](https://ipfs.io/ipfs/bafybeicermx2yhwvxc2yf6wvd3d2ujqugzdldl6dbyjhcpoxt4tjyz7gim/). If you'd like a local copy you can edit yourself, you can download the whole directory using IPFS: + + ipfs get bafybeicermx2yhwvxc2yf6wvd3d2ujqugzdldl6dbyjhcpoxt4tjyz7gim + +Then simply open `index.html` in your web browser and you'll immediately begin automatically connecting to nodes and looking for peers! + +You can also fork [TheDiscordian/browser-ipfs-chat](https://github.com/TheDiscordian/browser-ipfs-chat) on Github, and it'll be ready to test right away! If you want to deploy your own version, simply edit `index.html` and follow the setup information below. + +The libraries used in this example are [js-ipfs](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and bootstrap (just their minified css). If you want a newer version of js-ipfs, feel free to download [this one here](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) to use the latest version available 😃. + +Let's take a look at how this works. + +# 📖 Table of Contents + +\[TOC\] + +# 🪐 Peer Discovery and Connectivity + +In a browser discovering and connecting to peers can be very hard, as we can't listen for new peers, and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to find peers, and stay connected with them. + +The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application has a status indicator in the top-left to let you know too what kind of connection you have. Green means you're connected to the relay, even if it's via another peer, yellow mean you're only seeing direct peers, and red means you have no peers (at least none using the chat application). + +![QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5](https://ipfs.io/ipfs/QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5 "QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5") +🌟 The diagram above demonstrates what a 3 user network can look like. It's worth noting that the browser nodes can communicate with go-ipfs as well, so BrowserC doesn't have to be a browser at all, but instead could be a go-ipfs node! + +## 🐳 Docker (optional) + +If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-WebRTC-Star). + +After this section we'll go over what WebRTC-Star and circuit-relay do, and how to set them up. However if you'd like to quickly roll your own kit using docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. + +### Create Volume + +First create a volume to store long-term data like keys, and node data. + +```bash +docker volume create ipfs_bundle +``` + +### Configure Domain + +You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). + +When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#Usage) and [p2p-circuit#Usage](#Usage1) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). + +#### Certbot + +Ensure port 80 is open, follow checklist below, then run the following command: + +```bash +docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM +``` + +#### No Cerbot (SSL Disabled) + +If you do this option, the container won't handle SSL at all, and you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). + +```bash +docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -it trdiscordian/ipfsbundle DOMAIN.COM +``` + +**📝 Checklist** + +* Replace `DOMAIN.COM` with your domain +* Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) + +### Running the Container + +Once you're configured, running the container is simple. Ensure at minimum ports 4430 and 9090 are forwarded. + +```bash +docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -it trdiscordian/ipfsbundle +``` + +🎉 You should now be able to use this machine as both a WebRTC-Star node and a p2p-circuit node. + +## 🌟 WebRTC-Star + +We can use [WebRTC-Star](https://github.com/libp2p/js-libp2p-webrtc-star) nodes to help discover other peers we can connect with directly browser-to-browser. I find it easy to think of it as similar to [STUN](https://en.wikipedia.org/wiki/STUN), if you're already familiar with that concept. Effectively each connecting node will be given a WebRTC-Star [multiaddress](https://docs.libp2p.io/concepts/addressing/) that other nodes can use to discover and connect to your browser directly. Meaning if you peer with someone using the star node, and the star node goes offline, you remain connected! + +### Usage + +Connecting to a star node is quite simple: + +```javascript= +ipfs = await Ipfs.create({ + repo: 'ok' + Math.random(), // random so we get a new peerid every time, useful for testing + config: { + Addresses: { + Swarm: [ + '/dns4/star.thedisco.zone/tcp/9090/wss/p2p-webrtc-star', + '/dns6/star.thedisco.zone/tcp/9090/wss/p2p-webrtc-star' + ] + }, +}}); +``` + +### Setup + +Please note that this example uses my own star nodes, however those won't necessarily always be accessible there. Currently it's important to find a reliable star node, or host your own. You can host your own quite simply by following the instructions [here](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signaling-server) for a native setup and [here](https://github.com/libp2p/js-libp2p-webrtc-star/blob/master/DEPLOYMENT.md) for a docker container which includes Nginx (for SSL). If you opt for the native setup, we cover the Nginx reverse proxy process and SSL cert retrieval later in this post. + +🚀 This is a very clean and effective method of P2P communications, however sometimes NATs get in the way. For that, we use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. + +## ⚡ p2p-circuit + +p2p-circuit is really useful for peers behind tricky NATs (or a VPN, or anything really). I find the relaying of p2p-circuit to be similar to [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT), so it's easy to think of it that way if you're already familiar with it. + +### Usage + +Once all the services for p2p-circuit are put together, connecting to the node can be achieved a couple of ways. First, to connect on startup to _only_ our node(s): + +```javascript= +ipfs = await Ipfs.create({ + config: { + Bootstrap: [ + '/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt', + '/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt' + ] +}}); +``` + +Or we can add our own after, then manually initiate the connection: + +```javascript= +await ipfs.bootstrap.add('/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); +await ipfs.swarm.connect('/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); +await ipfs.bootstrap.add('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); +await ipfs.swarm.connect('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); +``` + +If you're looking to do your own client, without copying the example, ensure you're also communicating with the announce channel, which is described under "Advertising". The relevant code in the chat demo is this (simplified): + +```javascript= +var ipfs; // store the IPFS node you're using in this variable + +// processes a circuit-relay announce over pubsub +async function processAnnounce(addr) { + // get our peerid + me = await ipfs.id(); + me = me.id; + + // not really an announcement if it's from us + if (addr.from == me) { + return; + } + + // if we got a keep-alive, nothing to do + if (addr == "keep-alive") { + console.log(addr); + return; + } + + peer = addr.split("/")[9]; + console.log("Peer: " + peer); + console.log("Me: " + me); + if (peer == me) { // return if the peer being announced is us + return; + } + + // get a list of peers + peers = await ipfs.swarm.peers(); + for (i in peers) { + // if we're already connected to the peer, don't bother doing a + // circuit connection + if (peers[i].peer == peer) { + return; + } + } + // log the address to console as we're about to attempt a connection + console.log(addr); + + // connection almost always fails the first time, but almost always + // succeeds the second time, so we do this: + try { + await ipfs.swarm.connect(addr); + } catch(err) { + console.log(err); + await ipfs.swarm.connect(addr); + } +} + +// process announcements over the relay network, and publish our own +// keep-alives to keep the channel alive +await ipfs.pubsub.subscribe("announce-circuit", processAnnounce); +setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 15000); +``` + +### Setup + +Like the star nodes, it'll be important to host your own things as mine could go offline at any moment. + +For the purposes of this example, you'll need to do a few things on a server hosting your own [go-ipfs](https://github.com/ipfs/go-ipfs) node. You'll also need a working Nginx install setup, which will be used for SSL which is a requirement for browsers. + +First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/WebSocket) support, and designate it as a relay so we can communicate with it from a browser by editing `~/.ipfs/config` to add the following settings: + +```json +{ + "Addresses": { + "Swarm" : [ + "/ip4/0.0.0.0/tcp/4011/ws", + "/ip6/::/tcp/4011/ws" + ] + }, + "Swarm": { + "EnableRelayHop": true + } +} +``` + +Restart your go-ipfs node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly setup! We've enabled regular WebSockets with relaying support, however we need secure WebSockets otherwise browsers won't connect to us. + +### Nginx Setup + +This setup is similar for WebRTC-Star, you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). + +First obtain and install [Certbot](https://certbot.eff.org/docs/install.html). Then edit the following file with your domain name, and port, then copy it to `/etc/nginx/sites-available/ipfs`. + +```nginx +map $http_upgrade $connection_upgrade { + default upgrade; + '' close; +} + +upstream ipfs { + server 127.0.0.1:4011; +} + +server { + server_name ipfs.YOURDOMAIN.COM; + listen 4430 ssl; + ssl_certificate /etc/letsencrypt/live/ipfs.YOURDOMAIN.COM/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/ipfs.YOURDOMAIN.COM/privkey.pem; + include /etc/letsencrypt/options-ssl-nginx.conf; + ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; + location / { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + + proxy_pass http://ipfs; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection $connection_upgrade; + proxy_set_header Host $host; + } +} +``` + +So in this example you can see we're accepting ssl on port 4430, this is our "wss port" (WebSocket Secure), and then passing it to the unsecured port locally on 4011, this is our "ws port". So if we want to connect to this node from a browser, we'd use port 4430. + +After, run the following: + +```bash +sudo systemctl stop nginx +sudo certbot -d ipfs.YOURDOMAIN.COM --standalone # Edit ipfs.YOURDOMAIN.COM to the domain you want a cert for +sudo ln -s /etc/nginx/sites-available/ipfs /etc/nginx/sites-enabled/ipfs +sudo systemctl start nginx +``` + +🎉 Nginx is now operating as a reverse-proxy, giving you secured WebSockets! + +### Advertising + +Using p2p-circuit can be a bit tricky. Once we connect to the relay from a browser, we're not advertising that we're able to be reached through it! For this purpose, I've created a Python script that runs alongside go-ipfs which advertises the browser js-ipfs peers it encounters over [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) with a p2p-circuit [multiaddress](https://docs.libp2p.io/concepts/addressing/). + +You can find the Python script [here](https://gist.github.com/TheDiscordian/51962fea72f8d5a5c3bba79dd7009e1c). It can be run with a simple `python ipfs_peeradvertiser.py`. However, ensure you first edit `CIRCUIT` with your own node's information, or you won't announce the peers correctly, and they won't know how to use your relay to connect to other peers. + +You can retrieve your own circuit info quite easily. Simply run `ipfs id` on your go-ipfs node, to get your PeerID, then form the circuit URL like so: + + /dns6/ipfs.YOURDOMAIN.COM/tcp/4430/p2p/YOUR_PEERID/p2p-circuit/p2p/ + +You should see here where you simply fill out your domain name you got the SSL cert for, as well as your node's PeerID. For the script, the leading and trailing slash are required, too. + +⚠️ **Notice** ⚠️ + +Ensure you specify dns6 or dns4, depending on if you're forming an IPv6 or IPv4 address. **It's important to ensure you use dns, otherwise browser nodes likely won't be able to connect.** Also note the port 4430, if you used a different one, you'll need to specify that. + +# 🌐 Communication + +Whew so you made it this far, you might be wondering "what is communication like?", well luckily the answer is it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. + +## 📰 PubSub + +Using PubSub we're able to subscribe to topics, and retrieve any messages posted to those topics. In js-ipfs, we can set a callback function, which gets called whenever a message is received: + +```javascript= +function echo(msg) { + msg = new TextDecoder().decode(msg.data); + console.log(msg); +} + +await ipfs.pubsub.subscribe("example_topic", echo); +``` + +Publishing is just as easy too: + +```javascript= +await ipfs.pubsub.publish("example_topic", "Hello world!"); +``` + +This is effectively what the chat demo is doing. It's subscribing to a global topic (named "discochat-global"), and simply relaying the messages people type around over PubSub. + +## ⚠️ Possible Browser Pitfalls + +So let's say you've done everything correctly. You're able to find peers using WebRTC-Star and p2p-circuit, awesome! However you might find your connections expire, and you're unable to restore them. I'm not completely sure what causes this behaviour (probably some browser policy), however we can do our best to mitigate these issues! + +### Staying Connected to Peers + +We stay connected to peers in a couple ways. The first way is more direct, and that's by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: + +```javascript= +setInterval(function(){sendmsg("1", prefix+"keepalive");}, 4000); +setInterval(checkalive, 1000); +``` + +This should help ensure we give peers looking to chat a high priority. Additionally, we report over `announce-circuit` every 15 seconds to make sure we keep a connection to the circuit relay so we can connect to peers stuck behind a NAT. That's accomplished like so: + +```javascript= +// process announcements over the relay network, and publish our own keep-alives to keep the channel alive +await ipfs.pubsub.subscribe("announce-circuit", processAnnounce); +setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 15000); +``` + +🌟 A simplified version of `processAnnounce` is found under [p2p-circuit#Usage](#Usage1). + +The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive", this is to separate peer requests from relay requests, to make it easier to tell when we no longer see a relay. + +### Staying Connected to the Circuit Relay + +Outside of the simplified version of `processAnnounce`, in the real version there are a couple variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: + +```javascript= +const bootstraps = [ + '/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt', + '/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt' +]; +var lastAlive = 0; // last keep-alive we saw from a relay +var lastPeer = 0; // last keep-alive we saw from another peer +var lastBootstrap = 0; // used for tracking when we last attempted to bootstrap (likely to reconnect to a relay) + +// if reconnect is true, it'll first attempt to disconnect from the bootstrap nodes +async function dobootstrap(reconnect) { + now = new Date().getTime(); + if (now-lastBootstrap < 60000) { // don't try to bootstrap again if we just tried within the last 60 seconds + return; + } + lastBootstrap = now; + for (i in bootstraps) { + if (reconnect) { + try { + await ipfs.swarm.disconnect(bootstraps[i]); + } catch (e) { + console.log(e); + } + } else { + await ipfs.bootstrap.add(bootstraps[i]); + } + await ipfs.swarm.connect(bootstraps[i]); + } +} + +// check if we're still connected to the circuit relay +function checkalive() { + now = new Date().getTime(); + if (now-lastAlive >= 35000) { + if (now-lastPeer >= 35000) { + document.getElementById("status-ball").style.color = "red"; + } else { + document.getElementById("status-ball").style.color = "yellow"; + } + dobootstrap(true); // let's try to reconnect + } else { + document.getElementById("status-ball").style.color = "lime"; + } +} + +setInterval(checkalive, 1000); +``` + +🌟 The above should be used with the full version of `processAnnounce` as it relies on `lastAlive` and `lastPeer`, which aren't updated in the simplified version. + +# 🎉 Conclusion + +I hope this was informative enough to get rolling. If you were successful in following this entire guide, you now have the ability to deploy powerful IPFS apps that run entirely in the browser, and leverage decentralised p2p whenever you can! I've selected some helpful resources and shared them below for further reading: + +* [js-ipfs/docs/BROWSERS.md](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) +* [js-ipfs/docs/CONFIG.md](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md) +* [js-ipfs/docs/core-api](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) +* [js-ipfs/examples/circuit-relaying](https://github.com/ipfs/js-ipfs/tree/master/examples/circuit-relaying) +* [js-libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) \ No newline at end of file From 4825681eb4ff360621d9d8f674cae927f9ad2c6d Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 02:44:58 +0000 Subject: [PATCH 02/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index f769eced..fab51eae 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -32,7 +32,7 @@ Let's take a look at how this works. # 📖 Table of Contents -\[TOC\] +[TOC] # 🪐 Peer Discovery and Connectivity From f25f149fc4a34bdc763f57b66e6d72f5ccbd8220 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 02:54:08 +0000 Subject: [PATCH 03/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...guide-to-ipfs-connectivity-in-web-browsers.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index fab51eae..775e2f1f 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -102,7 +102,7 @@ We can use [WebRTC-Star](https://github.com/libp2p/js-libp2p-webrtc-star) nodes Connecting to a star node is quite simple: -```javascript= +```javascript ipfs = await Ipfs.create({ repo: 'ok' + Math.random(), // random so we get a new peerid every time, useful for testing config: { @@ -129,7 +129,7 @@ p2p-circuit is really useful for peers behind tricky NATs (or a VPN, or anything Once all the services for p2p-circuit are put together, connecting to the node can be achieved a couple of ways. First, to connect on startup to _only_ our node(s): -```javascript= +```javascript ipfs = await Ipfs.create({ config: { Bootstrap: [ @@ -150,7 +150,7 @@ await ipfs.swarm.connect('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhh If you're looking to do your own client, without copying the example, ensure you're also communicating with the announce channel, which is described under "Advertising". The relevant code in the chat demo is this (simplified): -```javascript= +```javascript var ipfs; // store the IPFS node you're using in this variable // processes a circuit-relay announce over pubsub @@ -301,7 +301,7 @@ Whew so you made it this far, you might be wondering "what is communication like Using PubSub we're able to subscribe to topics, and retrieve any messages posted to those topics. In js-ipfs, we can set a callback function, which gets called whenever a message is received: -```javascript= +```javascript function echo(msg) { msg = new TextDecoder().decode(msg.data); console.log(msg); @@ -312,7 +312,7 @@ await ipfs.pubsub.subscribe("example_topic", echo); Publishing is just as easy too: -```javascript= +```javascript await ipfs.pubsub.publish("example_topic", "Hello world!"); ``` @@ -326,14 +326,14 @@ So let's say you've done everything correctly. You're able to find peers using W We stay connected to peers in a couple ways. The first way is more direct, and that's by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: -```javascript= +```javascript setInterval(function(){sendmsg("1", prefix+"keepalive");}, 4000); setInterval(checkalive, 1000); ``` This should help ensure we give peers looking to chat a high priority. Additionally, we report over `announce-circuit` every 15 seconds to make sure we keep a connection to the circuit relay so we can connect to peers stuck behind a NAT. That's accomplished like so: -```javascript= +```javascript // process announcements over the relay network, and publish our own keep-alives to keep the channel alive await ipfs.pubsub.subscribe("announce-circuit", processAnnounce); setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 15000); @@ -347,7 +347,7 @@ The Python script on the circuit relay will report a keepalive every 4 seconds. Outside of the simplified version of `processAnnounce`, in the real version there are a couple variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: -```javascript= +```javascript const bootstraps = [ '/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt', '/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt' From 62c0854caf518ba19aeaa9913320fef0f8b51d20 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 02:58:40 +0000 Subject: [PATCH 04/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 775e2f1f..dad9f432 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -141,7 +141,7 @@ ipfs = await Ipfs.create({ Or we can add our own after, then manually initiate the connection: -```javascript= +```javascript await ipfs.bootstrap.add('/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); await ipfs.swarm.connect('/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); await ipfs.bootstrap.add('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); From 4d845aec2700e631d0ec0f764c29a5d1b7dfddda Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 03:05:08 +0000 Subject: [PATCH 05/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index dad9f432..e166032a 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -3,7 +3,7 @@ title: A Guide to IPFS Connectivity in Web Browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian date: 2021-07-05 -permalink: "/2021-07-05-guide-to-ipfs-connectivity-in-browsers" +permalink: "/2021-07-05-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' tags: From 7291a571b484b3e62ca621dd6de824e7b589c565 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 03:44:55 +0000 Subject: [PATCH 06/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index e166032a..e3532d26 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -2,8 +2,8 @@ title: A Guide to IPFS Connectivity in Web Browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian -date: 2021-07-05 -permalink: "/2021-07-05-guide-to-ipfs-connectivity-in-browsers/" +date: 2021-06-05 +permalink: "/2021-06-05-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' tags: From 6d9544206c47b2171346f49a2aa842614d770fbd Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 03:55:32 +0000 Subject: [PATCH 07/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index e3532d26..a697a8c9 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -40,7 +40,7 @@ In a browser discovering and connecting to peers can be very hard, as we can't l The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application has a status indicator in the top-left to let you know too what kind of connection you have. Green means you're connected to the relay, even if it's via another peer, yellow mean you're only seeing direct peers, and red means you have no peers (at least none using the chat application). -![QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5](https://ipfs.io/ipfs/QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5 "QmbuCP1LtWM4dYUFGhCwR3Swz2FhtetRR1kXHcECxzJ8b5") +![BrowserIPFSNetworkGraph_Transparent.png](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "BrowserIPFSNetworkGraph_Transparent.png") 🌟 The diagram above demonstrates what a 3 user network can look like. It's worth noting that the browser nodes can communicate with go-ipfs as well, so BrowserC doesn't have to be a browser at all, but instead could be a go-ipfs node! ## 🐳 Docker (optional) From 3b590c0659763f7712b76ae96e2ddab866ec12ee Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 03:58:38 +0000 Subject: [PATCH 08/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index a697a8c9..258b4a86 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -61,7 +61,7 @@ docker volume create ipfs_bundle You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). -When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#Usage) and [p2p-circuit#Usage](#Usage1) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). +When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit#Usage](#usage-2) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). #### Certbot @@ -339,7 +339,7 @@ await ipfs.pubsub.subscribe("announce-circuit", processAnnounce); setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 15000); ``` -🌟 A simplified version of `processAnnounce` is found under [p2p-circuit#Usage](#Usage1). +🌟 A simplified version of `processAnnounce` is found under [p2p-circuit#Usage](#usage). The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive", this is to separate peer requests from relay requests, to make it easier to tell when we no longer see a relay. From 3fb50ed66f231dc3f67b25500d012f64a5bb8377 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 04:01:13 +0000 Subject: [PATCH 09/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 258b4a86..45c6bf30 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -45,7 +45,7 @@ The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct br ## 🐳 Docker (optional) -If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-WebRTC-Star). +If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-webrtc-star). After this section we'll go over what WebRTC-Star and circuit-relay do, and how to set them up. However if you'd like to quickly roll your own kit using docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. From 5fc0465a2b46e3113615518b96841c07c3cb19a5 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 04:14:57 +0000 Subject: [PATCH 10/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 45c6bf30..57234f72 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -32,7 +32,25 @@ Let's take a look at how this works. # 📖 Table of Contents -[TOC] +* [🪐 Peer Discovery and Connectivity](#🪐-peer-discovery-and-connectivity) + * [🐳 Docker (optional)](#🐳-docker-optional) + * [Create Volume](#create-volume) + * [Configure Domain](#configure-domain) + * [Running the Container](#running-the-container) + * [🌟 WebRTC-Star](#🌟-webrtc-star) + * [Usage](#usage) + * [Setup](#setup) + * [⚡ p2p-circuit](#⚡-p2p-circuit) + * [Usage](#usage-2) + * [Setup](#setup-2) + * [Nginx Setup](#nginx-setup) + * [Advertising](#advetising) +* [🌐 Communication](#🌐-communication) + * [📰 PubSub](#📰-pubsub) + * [⚠️ Possible Browser Pitfalls](#⚠️-possible-browser-pitfalls) + * [Staying Connected to Peers](#staying-connected-to-peers) + * [Staying Connected to the Circuit Relay](#staying-connected-to-the-circuit-relay) +* [🎉 Conclusion](#🎉-conclusion) # 🪐 Peer Discovery and Connectivity @@ -40,7 +58,7 @@ In a browser discovering and connecting to peers can be very hard, as we can't l The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application has a status indicator in the top-left to let you know too what kind of connection you have. Green means you're connected to the relay, even if it's via another peer, yellow mean you're only seeing direct peers, and red means you have no peers (at least none using the chat application). -![BrowserIPFSNetworkGraph_Transparent.png](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "BrowserIPFSNetworkGraph_Transparent.png") +![BrowserIPFSNetworkGraph](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "BrowserIPFSNetworkGraph_Transparent.png") 🌟 The diagram above demonstrates what a 3 user network can look like. It's worth noting that the browser nodes can communicate with go-ipfs as well, so BrowserC doesn't have to be a browser at all, but instead could be a go-ipfs node! ## 🐳 Docker (optional) From 7b5c2606d8bcf083f192d8c06307fbeb41f96a7d Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 04:20:05 +0000 Subject: [PATCH 11/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 57234f72..56c23a39 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -18,9 +18,9 @@ We see a lot of questions about how to get started with using js-ipfs in the bro ### Getting the Code -You can see the live demo [here](https://ipfs.io/ipfs/bafybeicermx2yhwvxc2yf6wvd3d2ujqugzdldl6dbyjhcpoxt4tjyz7gim/). If you'd like a local copy you can edit yourself, you can download the whole directory using IPFS: +You can see the live demo [here](https://ipfs.io/ipfs/bafybeia5f2yk6td7ciroeped2uwfivo333b524t3zmoderfhl3xn7wi7aa/). If you'd like a local copy you can edit yourself, you can download the whole directory using IPFS: - ipfs get bafybeicermx2yhwvxc2yf6wvd3d2ujqugzdldl6dbyjhcpoxt4tjyz7gim + ipfs get bafybeia5f2yk6td7ciroeped2uwfivo333b524t3zmoderfhl3xn7wi7aa Then simply open `index.html` in your web browser and you'll immediately begin automatically connecting to nodes and looking for peers! From 391b88effef632b55b7b19cc227583af070f49f1 Mon Sep 17 00:00:00 2001 From: Ryan Baumann Date: Mon, 7 Jun 2021 23:44:03 +0000 Subject: [PATCH 12/32] Update from Forestry.io Ryan Baumann updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 56c23a39..bd0132a9 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -2,8 +2,8 @@ title: A Guide to IPFS Connectivity in Web Browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian -date: 2021-06-05 -permalink: "/2021-06-05-guide-to-ipfs-connectivity-in-browsers/" +date: 2021-06-21 +permalink: "/2021-06-21-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' tags: From c5d6b537b05fe9fdf29be725e6f2dd42fc39acbd Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 18:54:15 +0000 Subject: [PATCH 13/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index bd0132a9..2ba9f2d1 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -1,5 +1,5 @@ --- -title: A Guide to IPFS Connectivity in Web Browsers +title: A guide to IPFS connectivity in web browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian date: 2021-06-21 @@ -12,9 +12,7 @@ tags: - js-ipfs --- -# A Guide to IPFS Connectivity in Web Browsers - -We see a lot of questions about how to get started with using js-ipfs in the browser. I'm going to demonstrate a minimal chat example in js-ipfs entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with [libp2p](https://docs.libp2p.io)'s [pubsub](https://docs.libp2p.io/concepts/publish-subscribe/). +We see a lot of questions about how to get started with using `js-ipfs` in the browser. I'm going to demonstrate a minimal chat example in `js-ipfs` entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with libp2p's pubsub. ### Getting the Code From c88c086662823998071aeb3c245458e20af1b803 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 18:56:43 +0000 Subject: [PATCH 14/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 2ba9f2d1..ff5290b1 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -12,9 +12,9 @@ tags: - js-ipfs --- -We see a lot of questions about how to get started with using `js-ipfs` in the browser. I'm going to demonstrate a minimal chat example in `js-ipfs` entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with libp2p's pubsub. +We see a lot of questions about how to get started with using `js-ipfs` in the browser. This post demonstrates a minimal chat example in `js-ipfs` entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with libp2p's pubsub. -### Getting the Code +## Getting the code You can see the live demo [here](https://ipfs.io/ipfs/bafybeia5f2yk6td7ciroeped2uwfivo333b524t3zmoderfhl3xn7wi7aa/). If you'd like a local copy you can edit yourself, you can download the whole directory using IPFS: @@ -22,13 +22,13 @@ You can see the live demo [here](https://ipfs.io/ipfs/bafybeia5f2yk6td7ciroeped2 Then simply open `index.html` in your web browser and you'll immediately begin automatically connecting to nodes and looking for peers! -You can also fork [TheDiscordian/browser-ipfs-chat](https://github.com/TheDiscordian/browser-ipfs-chat) on Github, and it'll be ready to test right away! If you want to deploy your own version, simply edit `index.html` and follow the setup information below. +You can also fork [TheDiscordian/browser-ipfs-chat](https://github.com/TheDiscordian/browser-ipfs-chat) on GitHub, and it'll be ready to test right away! If you want to deploy your own version, simply edit `index.html` and follow the setup information below. -The libraries used in this example are [js-ipfs](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and bootstrap (just their minified css). If you want a newer version of js-ipfs, feel free to download [this one here](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) to use the latest version available 😃. +The libraries used in this example are [`js-ipfs`](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and bootstrap (just their minified css). If you want a newer version of `js-ipfs`, feel free to download [this one here](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) to use the latest version available 😃. Let's take a look at how this works. -# 📖 Table of Contents +## 📖 Table of Contents * [🪐 Peer Discovery and Connectivity](#🪐-peer-discovery-and-connectivity) * [🐳 Docker (optional)](#🐳-docker-optional) @@ -50,7 +50,7 @@ Let's take a look at how this works. * [Staying Connected to the Circuit Relay](#staying-connected-to-the-circuit-relay) * [🎉 Conclusion](#🎉-conclusion) -# 🪐 Peer Discovery and Connectivity +## 🪐 Peer Discovery and Connectivity In a browser discovering and connecting to peers can be very hard, as we can't listen for new peers, and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to find peers, and stay connected with them. @@ -59,13 +59,13 @@ The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct br ![BrowserIPFSNetworkGraph](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "BrowserIPFSNetworkGraph_Transparent.png") 🌟 The diagram above demonstrates what a 3 user network can look like. It's worth noting that the browser nodes can communicate with go-ipfs as well, so BrowserC doesn't have to be a browser at all, but instead could be a go-ipfs node! -## 🐳 Docker (optional) +### 🐳 Docker (optional) If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-webrtc-star). After this section we'll go over what WebRTC-Star and circuit-relay do, and how to set them up. However if you'd like to quickly roll your own kit using docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. -### Create Volume +#### Create Volume First create a volume to store long-term data like keys, and node data. @@ -73,13 +73,13 @@ First create a volume to store long-term data like keys, and node data. docker volume create ipfs_bundle ``` -### Configure Domain +#### Configure Domain You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit#Usage](#usage-2) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). -#### Certbot +##### Certbot Ensure port 80 is open, follow checklist below, then run the following command: @@ -87,7 +87,7 @@ Ensure port 80 is open, follow checklist below, then run the following command: docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM ``` -#### No Cerbot (SSL Disabled) +##### No Cerbot (SSL Disabled) If you do this option, the container won't handle SSL at all, and you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). @@ -100,7 +100,7 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 * Replace `DOMAIN.COM` with your domain * Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) -### Running the Container +#### Running the Container Once you're configured, running the container is simple. Ensure at minimum ports 4430 and 9090 are forwarded. @@ -110,11 +110,11 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 🎉 You should now be able to use this machine as both a WebRTC-Star node and a p2p-circuit node. -## 🌟 WebRTC-Star +### 🌟 WebRTC-Star We can use [WebRTC-Star](https://github.com/libp2p/js-libp2p-webrtc-star) nodes to help discover other peers we can connect with directly browser-to-browser. I find it easy to think of it as similar to [STUN](https://en.wikipedia.org/wiki/STUN), if you're already familiar with that concept. Effectively each connecting node will be given a WebRTC-Star [multiaddress](https://docs.libp2p.io/concepts/addressing/) that other nodes can use to discover and connect to your browser directly. Meaning if you peer with someone using the star node, and the star node goes offline, you remain connected! -### Usage +#### Usage Connecting to a star node is quite simple: @@ -131,17 +131,17 @@ ipfs = await Ipfs.create({ }}); ``` -### Setup +#### Setup Please note that this example uses my own star nodes, however those won't necessarily always be accessible there. Currently it's important to find a reliable star node, or host your own. You can host your own quite simply by following the instructions [here](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signaling-server) for a native setup and [here](https://github.com/libp2p/js-libp2p-webrtc-star/blob/master/DEPLOYMENT.md) for a docker container which includes Nginx (for SSL). If you opt for the native setup, we cover the Nginx reverse proxy process and SSL cert retrieval later in this post. 🚀 This is a very clean and effective method of P2P communications, however sometimes NATs get in the way. For that, we use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. -## ⚡ p2p-circuit +### ⚡ p2p-circuit p2p-circuit is really useful for peers behind tricky NATs (or a VPN, or anything really). I find the relaying of p2p-circuit to be similar to [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT), so it's easy to think of it that way if you're already familiar with it. -### Usage +#### Usage Once all the services for p2p-circuit are put together, connecting to the node can be achieved a couple of ways. First, to connect on startup to _only_ our node(s): @@ -221,7 +221,7 @@ await ipfs.pubsub.subscribe("announce-circuit", processAnnounce); setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 15000); ``` -### Setup +#### Setup Like the star nodes, it'll be important to host your own things as mine could go offline at any moment. @@ -245,7 +245,7 @@ First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/ Restart your go-ipfs node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly setup! We've enabled regular WebSockets with relaying support, however we need secure WebSockets otherwise browsers won't connect to us. -### Nginx Setup +#### Nginx Setup This setup is similar for WebRTC-Star, you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). @@ -293,7 +293,7 @@ sudo systemctl start nginx 🎉 Nginx is now operating as a reverse-proxy, giving you secured WebSockets! -### Advertising +#### Advertising Using p2p-circuit can be a bit tricky. Once we connect to the relay from a browser, we're not advertising that we're able to be reached through it! For this purpose, I've created a Python script that runs alongside go-ipfs which advertises the browser js-ipfs peers it encounters over [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) with a p2p-circuit [multiaddress](https://docs.libp2p.io/concepts/addressing/). @@ -309,11 +309,11 @@ You should see here where you simply fill out your domain name you got the SSL c Ensure you specify dns6 or dns4, depending on if you're forming an IPv6 or IPv4 address. **It's important to ensure you use dns, otherwise browser nodes likely won't be able to connect.** Also note the port 4430, if you used a different one, you'll need to specify that. -# 🌐 Communication +## 🌐 Communication Whew so you made it this far, you might be wondering "what is communication like?", well luckily the answer is it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. -## 📰 PubSub +### 📰 PubSub Using PubSub we're able to subscribe to topics, and retrieve any messages posted to those topics. In js-ipfs, we can set a callback function, which gets called whenever a message is received: @@ -334,11 +334,11 @@ await ipfs.pubsub.publish("example_topic", "Hello world!"); This is effectively what the chat demo is doing. It's subscribing to a global topic (named "discochat-global"), and simply relaying the messages people type around over PubSub. -## ⚠️ Possible Browser Pitfalls +### ⚠️ Possible Browser Pitfalls So let's say you've done everything correctly. You're able to find peers using WebRTC-Star and p2p-circuit, awesome! However you might find your connections expire, and you're unable to restore them. I'm not completely sure what causes this behaviour (probably some browser policy), however we can do our best to mitigate these issues! -### Staying Connected to Peers +#### Staying Connected to Peers We stay connected to peers in a couple ways. The first way is more direct, and that's by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: @@ -359,7 +359,7 @@ setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive", this is to separate peer requests from relay requests, to make it easier to tell when we no longer see a relay. -### Staying Connected to the Circuit Relay +#### Staying Connected to the Circuit Relay Outside of the simplified version of `processAnnounce`, in the real version there are a couple variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: @@ -413,7 +413,7 @@ setInterval(checkalive, 1000); 🌟 The above should be used with the full version of `processAnnounce` as it relies on `lastAlive` and `lastPeer`, which aren't updated in the simplified version. -# 🎉 Conclusion +## 🎉 Conclusion I hope this was informative enough to get rolling. If you were successful in following this entire guide, you now have the ability to deploy powerful IPFS apps that run entirely in the browser, and leverage decentralised p2p whenever you can! I've selected some helpful resources and shared them below for further reading: From b2aba2ec412b64087b04585c91c33e0818f215f7 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 18:57:58 +0000 Subject: [PATCH 15/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index ff5290b1..81191d47 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -28,7 +28,7 @@ The libraries used in this example are [`js-ipfs`](https://github.com/ipfs/js-ip Let's take a look at how this works. -## 📖 Table of Contents +## 📖 Table of contents * [🪐 Peer Discovery and Connectivity](#🪐-peer-discovery-and-connectivity) * [🐳 Docker (optional)](#🐳-docker-optional) @@ -50,7 +50,7 @@ Let's take a look at how this works. * [Staying Connected to the Circuit Relay](#staying-connected-to-the-circuit-relay) * [🎉 Conclusion](#🎉-conclusion) -## 🪐 Peer Discovery and Connectivity +## 🪐 Peer discovery and connectivity In a browser discovering and connecting to peers can be very hard, as we can't listen for new peers, and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to find peers, and stay connected with them. @@ -65,7 +65,7 @@ If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-webrtc-star). After this section we'll go over what WebRTC-Star and circuit-relay do, and how to set them up. However if you'd like to quickly roll your own kit using docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. -#### Create Volume +#### Create volume First create a volume to store long-term data like keys, and node data. @@ -73,7 +73,7 @@ First create a volume to store long-term data like keys, and node data. docker volume create ipfs_bundle ``` -#### Configure Domain +#### Configure domain You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). @@ -87,7 +87,7 @@ Ensure port 80 is open, follow checklist below, then run the following command: docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM ``` -##### No Cerbot (SSL Disabled) +##### No cerbot (SSL disabled) If you do this option, the container won't handle SSL at all, and you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). @@ -100,7 +100,7 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 * Replace `DOMAIN.COM` with your domain * Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) -#### Running the Container +#### Running the container Once you're configured, running the container is simple. Ensure at minimum ports 4430 and 9090 are forwarded. @@ -137,7 +137,7 @@ Please note that this example uses my own star nodes, however those won't necess 🚀 This is a very clean and effective method of P2P communications, however sometimes NATs get in the way. For that, we use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. -### ⚡ p2p-circuit +### ⚡ `p2p-circuit` p2p-circuit is really useful for peers behind tricky NATs (or a VPN, or anything really). I find the relaying of p2p-circuit to be similar to [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT), so it's easy to think of it that way if you're already familiar with it. @@ -245,7 +245,7 @@ First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/ Restart your go-ipfs node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly setup! We've enabled regular WebSockets with relaying support, however we need secure WebSockets otherwise browsers won't connect to us. -#### Nginx Setup +#### Nginx setup This setup is similar for WebRTC-Star, you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). @@ -334,11 +334,11 @@ await ipfs.pubsub.publish("example_topic", "Hello world!"); This is effectively what the chat demo is doing. It's subscribing to a global topic (named "discochat-global"), and simply relaying the messages people type around over PubSub. -### ⚠️ Possible Browser Pitfalls +### ⚠️ Possible browser pitfalls So let's say you've done everything correctly. You're able to find peers using WebRTC-Star and p2p-circuit, awesome! However you might find your connections expire, and you're unable to restore them. I'm not completely sure what causes this behaviour (probably some browser policy), however we can do our best to mitigate these issues! -#### Staying Connected to Peers +#### Staying connected to peers We stay connected to peers in a couple ways. The first way is more direct, and that's by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: @@ -359,7 +359,7 @@ setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive", this is to separate peer requests from relay requests, to make it easier to tell when we no longer see a relay. -#### Staying Connected to the Circuit Relay +#### Staying connected to the circuit relay Outside of the simplified version of `processAnnounce`, in the real version there are a couple variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: @@ -415,7 +415,7 @@ setInterval(checkalive, 1000); ## 🎉 Conclusion -I hope this was informative enough to get rolling. If you were successful in following this entire guide, you now have the ability to deploy powerful IPFS apps that run entirely in the browser, and leverage decentralised p2p whenever you can! I've selected some helpful resources and shared them below for further reading: +I hope this was informative enough to get rolling. If you were successful in following this entire guide, you now have the ability to deploy powerful IPFS apps that run entirely in the browser, and leverage decentralized p2p whenever you can! I've selected some helpful resources and shared them below for further reading: * [js-ipfs/docs/BROWSERS.md](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) * [js-ipfs/docs/CONFIG.md](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md) From 7e9ad6766d50560a8f4f8f90bb31639cc72a5434 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:01:29 +0000 Subject: [PATCH 16/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 81191d47..b062b744 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -24,7 +24,7 @@ Then simply open `index.html` in your web browser and you'll immediately begin a You can also fork [TheDiscordian/browser-ipfs-chat](https://github.com/TheDiscordian/browser-ipfs-chat) on GitHub, and it'll be ready to test right away! If you want to deploy your own version, simply edit `index.html` and follow the setup information below. -The libraries used in this example are [`js-ipfs`](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and bootstrap (just their minified css). If you want a newer version of `js-ipfs`, feel free to download [this one here](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) to use the latest version available 😃. +The libraries used in this example are [`js-ipfs`](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and Bootstrap (just their minified CSS). If you want a newer version of `js-ipfs`, feel free to download [this one here](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) to use the latest version available 😃. Let's take a look at how this works. @@ -52,34 +52,33 @@ Let's take a look at how this works. ## 🪐 Peer discovery and connectivity -In a browser discovering and connecting to peers can be very hard, as we can't listen for new peers, and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to find peers, and stay connected with them. +In a browser, discovering and connecting to peers can be very hard, as we can't listen for new peers and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to both find peers and stay connected with them. -The chat example achieves this in 2 ways. Using WebRTC-Star we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application has a status indicator in the top-left to let you know too what kind of connection you have. Green means you're connected to the relay, even if it's via another peer, yellow mean you're only seeing direct peers, and red means you have no peers (at least none using the chat application). +The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know what kind of connection you have. Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application). -![BrowserIPFSNetworkGraph](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "BrowserIPFSNetworkGraph_Transparent.png") -🌟 The diagram above demonstrates what a 3 user network can look like. It's worth noting that the browser nodes can communicate with go-ipfs as well, so BrowserC doesn't have to be a browser at all, but instead could be a go-ipfs node! +![BrowserIPFSNetworkGraph](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") 🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! ### 🐳 Docker (optional) -If you don't want to use docker, skip to [**WebRTC-Star**](#🌟-webrtc-star). +If you don't want to use Docker, skip to the [**WebRTC-Star**](#🌟-webrtc-star) section. -After this section we'll go over what WebRTC-Star and circuit-relay do, and how to set them up. However if you'd like to quickly roll your own kit using docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. +After this section we'll go over what WebRTC-Star and circuit relay do, and how to set them up. However, if you'd like to quickly roll your own kit using Docker, I've prepared an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment. -#### Create volume +#### Create a volume -First create a volume to store long-term data like keys, and node data. +First, create a volume to store long-term data like keys and node data. ```bash docker volume create ipfs_bundle ``` -#### Configure domain +#### Configure a domain You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit#Usage](#usage-2) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). -##### Certbot +##### With certbot Ensure port 80 is open, follow checklist below, then run the following command: From 9f96216d86a78b689d678618f43c9a9f4c215144 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:05:03 +0000 Subject: [PATCH 17/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...a-guide-to-ipfs-connectivity-in-web-browsers.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index b062b744..dcb19be6 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -74,13 +74,13 @@ docker volume create ipfs_bundle #### Configure a domain -You need a domain, and SSL to use this kit with browser nodes. There are two options below, one will run certbot, and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). +You need a domain and SSL to use this kit with browser nodes. There are two options below: One will run certbot and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). -When you execute either commands your IPFS node will also be setup for the first time giving you information such as it's PeerID, and circuit-relay addresses. Take note of these, you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit#Usage](#usage-2) for usage examples, or edit `index.html`, and change my node's multiaddresses out for your own). +When you execute either commands, your IPFS node will also be set up for the first time giving you information such as its `PeerID` and circuit relay addresses. Take note of these — you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star Usage](#usage "WebRTC-Star Usage") and [p2p-circuit Usage](#usage-2) for usage examples, or edit `index.html` and change my node's multiaddresses out for your own). ##### With certbot -Ensure port 80 is open, follow checklist below, then run the following command: +Ensure port 80 is open, follow the checklist below, and then run the following command: ```bash docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM @@ -101,7 +101,7 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 #### Running the container -Once you're configured, running the container is simple. Ensure at minimum ports 4430 and 9090 are forwarded. +Once you're configured, running the container is simple. Ensure that, at minimum, ports 4430 and 9090 are forwarded. ```bash docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -it trdiscordian/ipfsbundle @@ -111,7 +111,7 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 ### 🌟 WebRTC-Star -We can use [WebRTC-Star](https://github.com/libp2p/js-libp2p-webrtc-star) nodes to help discover other peers we can connect with directly browser-to-browser. I find it easy to think of it as similar to [STUN](https://en.wikipedia.org/wiki/STUN), if you're already familiar with that concept. Effectively each connecting node will be given a WebRTC-Star [multiaddress](https://docs.libp2p.io/concepts/addressing/) that other nodes can use to discover and connect to your browser directly. Meaning if you peer with someone using the star node, and the star node goes offline, you remain connected! +We can use [WebRTC-Star](https://github.com/libp2p/js-libp2p-webrtc-star) nodes to help discover other peers we can connect with directly browser-to-browser. I find it easy to think of this as similar to [STUN](https://en.wikipedia.org/wiki/STUN), if you're already familiar with that concept. Effectively, each connecting node will be given a WebRTC-Star [multiaddress](https://docs.libp2p.io/concepts/addressing/) that other nodes can use to discover and connect to your browser directly. This means that if you peer with someone using the star node, and the star node goes offline, you remain connected! #### Usage @@ -132,9 +132,9 @@ ipfs = await Ipfs.create({ #### Setup -Please note that this example uses my own star nodes, however those won't necessarily always be accessible there. Currently it's important to find a reliable star node, or host your own. You can host your own quite simply by following the instructions [here](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signaling-server) for a native setup and [here](https://github.com/libp2p/js-libp2p-webrtc-star/blob/master/DEPLOYMENT.md) for a docker container which includes Nginx (for SSL). If you opt for the native setup, we cover the Nginx reverse proxy process and SSL cert retrieval later in this post. +Please note that this example uses my own star nodes — however, those won't necessarily always be accessible there. Currently it's important to either find a reliable star node or host your own. You can host your own quite simply by following the instructions [here](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signaling-server) for a native setup and [here](https://github.com/libp2p/js-libp2p-webrtc-star/blob/master/DEPLOYMENT.md) for a Docker container which includes Nginx (for SSL). If you opt for the native setup, we cover the Nginx reverse proxy process and SSL cert retrieval later in this post. -🚀 This is a very clean and effective method of P2P communications, however sometimes NATs get in the way. For that, we use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. +🚀 This is a very clean and effective method of P2P communications; however, sometimes NATs get in the way. We use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. ### ⚡ `p2p-circuit` From a28344e74cdcaca4b2e779b559e22754c801381c Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:11:32 +0000 Subject: [PATCH 18/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index dcb19be6..645e0861 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -134,15 +134,15 @@ ipfs = await Ipfs.create({ Please note that this example uses my own star nodes — however, those won't necessarily always be accessible there. Currently it's important to either find a reliable star node or host your own. You can host your own quite simply by following the instructions [here](https://github.com/libp2p/js-libp2p-webrtc-star#rendezvous-server-aka-signaling-server) for a native setup and [here](https://github.com/libp2p/js-libp2p-webrtc-star/blob/master/DEPLOYMENT.md) for a Docker container which includes Nginx (for SSL). If you opt for the native setup, we cover the Nginx reverse proxy process and SSL cert retrieval later in this post. -🚀 This is a very clean and effective method of P2P communications; however, sometimes NATs get in the way. We use [p2p-circuit](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. +🚀 This is a very clean and effective method of P2P communications; however, sometimes NATs get in the way. We use [`p2p-circuit`](https://docs.libp2p.io/concepts/circuit-relay/) to get around that. ### ⚡ `p2p-circuit` -p2p-circuit is really useful for peers behind tricky NATs (or a VPN, or anything really). I find the relaying of p2p-circuit to be similar to [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT), so it's easy to think of it that way if you're already familiar with it. +Using `p2p-circuit` is really helpful for peers behind tricky NATs (or a VPN, or anything really). I find the relaying of `p2p-circuit` to be similar to [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT), so it's easy to think of it that way if you're already familiar with it. #### Usage -Once all the services for p2p-circuit are put together, connecting to the node can be achieved a couple of ways. First, to connect on startup to _only_ our node(s): +Once all the services for `p2p-circuit` are put together, connecting to the node can be achieved in a few different ways. First, to connect on startup to _only_ our node(s): ```javascript ipfs = await Ipfs.create({ @@ -163,7 +163,7 @@ await ipfs.bootstrap.add('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhh await ipfs.swarm.connect('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); ``` -If you're looking to do your own client, without copying the example, ensure you're also communicating with the announce channel, which is described under "Advertising". The relevant code in the chat demo is this (simplified): +If you're looking to do your own client without copying the example, ensure you're also communicating with the announce channel, which is described under "Advertising". The relevant code in the chat demo is this (simplified): ```javascript var ipfs; // store the IPFS node you're using in this variable @@ -222,9 +222,9 @@ setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, #### Setup -Like the star nodes, it'll be important to host your own things as mine could go offline at any moment. +Like the star nodes, it'll be important to host your own things as the ones in this post could go offline at any moment. -For the purposes of this example, you'll need to do a few things on a server hosting your own [go-ipfs](https://github.com/ipfs/go-ipfs) node. You'll also need a working Nginx install setup, which will be used for SSL which is a requirement for browsers. +For the purposes of this example, you'll need to do a few things on a server hosting your own [go-ipfs](https://github.com/ipfs/go-ipfs) node. You'll also need a working Nginx install setup, which will be used for SSL, which is a requirement for browsers. First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/WebSocket) support, and designate it as a relay so we can communicate with it from a browser by editing `~/.ipfs/config` to add the following settings: @@ -242,11 +242,11 @@ First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/ } ``` -Restart your go-ipfs node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly setup! We've enabled regular WebSockets with relaying support, however we need secure WebSockets otherwise browsers won't connect to us. +Restart your `go-ipfs` node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly set up! We've enabled regular WebSockets with relaying support, however we need secure WebSockets — otherwise browsers won't connect to us. #### Nginx setup -This setup is similar for WebRTC-Star, you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). +This setup is similar for WebRTC-Star; you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). First obtain and install [Certbot](https://certbot.eff.org/docs/install.html). Then edit the following file with your domain name, and port, then copy it to `/etc/nginx/sites-available/ipfs`. @@ -279,7 +279,7 @@ server { } ``` -So in this example you can see we're accepting ssl on port 4430, this is our "wss port" (WebSocket Secure), and then passing it to the unsecured port locally on 4011, this is our "ws port". So if we want to connect to this node from a browser, we'd use port 4430. +So in this example you can see we're accepting SSL on port 4430 — this is our "wss port" (WebSocket Secure) — and then passing it to the unsecured port locally on 4011 — this is our "ws port". So if we want to connect to this node from a browser, we'd use port 4430. After, run the following: @@ -294,11 +294,11 @@ sudo systemctl start nginx #### Advertising -Using p2p-circuit can be a bit tricky. Once we connect to the relay from a browser, we're not advertising that we're able to be reached through it! For this purpose, I've created a Python script that runs alongside go-ipfs which advertises the browser js-ipfs peers it encounters over [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) with a p2p-circuit [multiaddress](https://docs.libp2p.io/concepts/addressing/). +Using `p2p-circuit` can be a bit tricky. Once we connect to the relay from a browser, we're not advertising that we're able to be reached through it! For this purpose, I've created a Python script that runs alongside `go-ipfs` and advertises the browser `js-ipfs` peers it encounters over [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) with a `p2p-circuit` [multiaddress](https://docs.libp2p.io/concepts/addressing/). You can find the Python script [here](https://gist.github.com/TheDiscordian/51962fea72f8d5a5c3bba79dd7009e1c). It can be run with a simple `python ipfs_peeradvertiser.py`. However, ensure you first edit `CIRCUIT` with your own node's information, or you won't announce the peers correctly, and they won't know how to use your relay to connect to other peers. -You can retrieve your own circuit info quite easily. Simply run `ipfs id` on your go-ipfs node, to get your PeerID, then form the circuit URL like so: +You can retrieve your own circuit info quite easily. Simply run `ipfs id` on your `go-ipfs` node to get your PeerID, then form the circuit URL like so: /dns6/ipfs.YOURDOMAIN.COM/tcp/4430/p2p/YOUR_PEERID/p2p-circuit/p2p/ @@ -306,15 +306,15 @@ You should see here where you simply fill out your domain name you got the SSL c ⚠️ **Notice** ⚠️ -Ensure you specify dns6 or dns4, depending on if you're forming an IPv6 or IPv4 address. **It's important to ensure you use dns, otherwise browser nodes likely won't be able to connect.** Also note the port 4430, if you used a different one, you'll need to specify that. +Ensure you specify DNS6 or DNS4, depending on if you're forming an IPv6 or IPv4 address. **It's important to ensure you use DNS, otherwise browser nodes likely won't be able to connect.** Also note the port 4430; if you used a different one, you'll need to specify that. ## 🌐 Communication -Whew so you made it this far, you might be wondering "what is communication like?", well luckily the answer is it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. +Whew! Since you made it this far, you might be wondering "what is communication like?"Luckily the answer is that it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. ### 📰 PubSub -Using PubSub we're able to subscribe to topics, and retrieve any messages posted to those topics. In js-ipfs, we can set a callback function, which gets called whenever a message is received: +Using PubSub, we're able to subscribe to topics and retrieve any messages posted to those topics. In `js-ipfs`, we can set a callback function, which gets called whenever a message is received: ```javascript function echo(msg) { @@ -325,7 +325,7 @@ function echo(msg) { await ipfs.pubsub.subscribe("example_topic", echo); ``` -Publishing is just as easy too: +Publishing is just as easy, too: ```javascript await ipfs.pubsub.publish("example_topic", "Hello world!"); @@ -335,11 +335,11 @@ This is effectively what the chat demo is doing. It's subscribing to a global to ### ⚠️ Possible browser pitfalls -So let's say you've done everything correctly. You're able to find peers using WebRTC-Star and p2p-circuit, awesome! However you might find your connections expire, and you're unable to restore them. I'm not completely sure what causes this behaviour (probably some browser policy), however we can do our best to mitigate these issues! +So let's say you've done everything correctly. You're able to find peers using WebRTC-Star and `p2p-circuit` — awesome! However, you might find your connections expire, and you're unable to restore them. I'm not completely sure what causes this behaviour (probably some browser policy); however, we can do our best to mitigate these issues! #### Staying connected to peers -We stay connected to peers in a couple ways. The first way is more direct, and that's by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: +We stay connected to peers in a couple of ways. The first way is more direct: by subscribing to and sending a "keepalive" announcement over `discochat-keepalive` every 4 seconds: ```javascript setInterval(function(){sendmsg("1", prefix+"keepalive");}, 4000); @@ -356,11 +356,11 @@ setInterval(function(){ipfs.pubsub.publish("announce-circuit", "peer-alive");}, 🌟 A simplified version of `processAnnounce` is found under [p2p-circuit#Usage](#usage). -The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive", this is to separate peer requests from relay requests, to make it easier to tell when we no longer see a relay. +The Python script on the circuit relay will report a keepalive every 4 seconds. You may have noticed we're reporting "peer-alive" instead of "keep-alive"; this is to separate peer requests from relay requests, making it easier to tell when we no longer see a relay. #### Staying connected to the circuit relay -Outside of the simplified version of `processAnnounce`, in the real version there are a couple variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: +Outside of the simplified version of `processAnnounce`, in the real version there are a few variables used for tracking keep-alive and peer-alive. These are `lastAlive` and `lastPeer`, respectively. We even track the last time we bootstrapped via `lastBootstrap`. Using all this, we can display the yellow status when we're only connected to peers (tracked via `lastPeer`), and if we don't see a keep-alive for 35 seconds (and we haven't attempted a bootstrap in 60 seconds), we can attempt to re-connect to the bootstrap relay (and display a red status). This is accomplished like so: ```javascript const bootstraps = [ @@ -410,7 +410,7 @@ function checkalive() { setInterval(checkalive, 1000); ``` -🌟 The above should be used with the full version of `processAnnounce` as it relies on `lastAlive` and `lastPeer`, which aren't updated in the simplified version. +🌟 The above should be used with the full version of `processAnnounce`, as it relies on `lastAlive` and `lastPeer`, which aren't updated in the simplified version. ## 🎉 Conclusion From f57fb379fa43677e5065b1c7b20bcc1e1be177c7 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:12:03 +0000 Subject: [PATCH 19/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 645e0861..4f2fa287 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -2,7 +2,7 @@ title: A guide to IPFS connectivity in web browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian -date: 2021-06-21 +date: 2021-06-10 permalink: "/2021-06-21-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' From b9d1e112118f40bc28fe4192fa9d60689e4dc022 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:15:34 +0000 Subject: [PATCH 20/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 4f2fa287..b6402624 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -7,6 +7,7 @@ permalink: "/2021-06-21-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' tags: +- tutorial - libp2p - browsers - js-ipfs From c28a0ddbeb7b34860fb43c3a6961fc733c4f0d0f Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:16:42 +0000 Subject: [PATCH 21/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...a-guide-to-ipfs-connectivity-in-web-browsers.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index b6402624..c70a2990 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -31,11 +31,11 @@ Let's take a look at how this works. ## 📖 Table of contents -* [🪐 Peer Discovery and Connectivity](#🪐-peer-discovery-and-connectivity) +* [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) * [🐳 Docker (optional)](#🐳-docker-optional) - * [Create Volume](#create-volume) - * [Configure Domain](#configure-domain) - * [Running the Container](#running-the-container) + * [Create a volume](#create-volume) + * [Configure a domain](#configure-domain) + * [Running the container](#running-the-container) * [🌟 WebRTC-Star](#🌟-webrtc-star) * [Usage](#usage) * [Setup](#setup) @@ -46,9 +46,9 @@ Let's take a look at how this works. * [Advertising](#advetising) * [🌐 Communication](#🌐-communication) * [📰 PubSub](#📰-pubsub) - * [⚠️ Possible Browser Pitfalls](#⚠️-possible-browser-pitfalls) - * [Staying Connected to Peers](#staying-connected-to-peers) - * [Staying Connected to the Circuit Relay](#staying-connected-to-the-circuit-relay) + * [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) + * [Staying connected to peers](#staying-connected-to-peers) + * [Staying connected to the circuit relay](#staying-connected-to-the-circuit-relay) * [🎉 Conclusion](#🎉-conclusion) ## 🪐 Peer discovery and connectivity From ec8517cd9fc574e60b1bdec7c60cc69456b1f6f5 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:18:34 +0000 Subject: [PATCH 22/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index c70a2990..bab18e61 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -3,7 +3,7 @@ title: A guide to IPFS connectivity in web browsers description: A minimal chat example using js-ipfs in the browser. author: Discordian date: 2021-06-10 -permalink: "/2021-06-21-guide-to-ipfs-connectivity-in-browsers/" +permalink: "/2021-06-10-guide-to-ipfs-connectivity-in-browsers/" translationKey: '' header_image: '' tags: From 52b821f28ac628de5e0478ea29fe9051983e7c88 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:19:13 +0000 Subject: [PATCH 23/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index bab18e61..ebc07c27 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -33,8 +33,8 @@ Let's take a look at how this works. * [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) * [🐳 Docker (optional)](#🐳-docker-optional) - * [Create a volume](#create-volume) - * [Configure a domain](#configure-domain) + * [Create a volume](#create-a-volume) + * [Configure a domain](#configure-a-domain) * [Running the container](#running-the-container) * [🌟 WebRTC-Star](#🌟-webrtc-star) * [Usage](#usage) From 76ae542da9afd60b6cafef4d87bd88f81d13324a Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 19:21:04 +0000 Subject: [PATCH 24/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index ebc07c27..df4846a1 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -43,7 +43,7 @@ Let's take a look at how this works. * [Usage](#usage-2) * [Setup](#setup-2) * [Nginx Setup](#nginx-setup) - * [Advertising](#advetising) + * [Advertising](#advertising) * [🌐 Communication](#🌐-communication) * [📰 PubSub](#📰-pubsub) * [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) From 0e35f99853cc4736923169f05d0ca8b5cbdcecef Mon Sep 17 00:00:00 2001 From: TheDiscordian <43145244+TheDiscordian@users.noreply.github.com> Date: Thu, 10 Jun 2021 15:59:55 -0400 Subject: [PATCH 25/32] Update a-guide-to-ipfs-connectivity-in-web-browsers.md Removed subsection "Nginx" added section "SSL (Nginx)". Fixed formatting in a couple places for guidelines. Updated text in docker config to make it more clear that port 80 just needs to not be used. --- ...de-to-ipfs-connectivity-in-web-browsers.md | 180 +++++++++++------- 1 file changed, 106 insertions(+), 74 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index df4846a1..edbc59a6 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -31,25 +31,25 @@ Let's take a look at how this works. ## 📖 Table of contents -* [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) - * [🐳 Docker (optional)](#🐳-docker-optional) - * [Create a volume](#create-a-volume) - * [Configure a domain](#configure-a-domain) - * [Running the container](#running-the-container) - * [🌟 WebRTC-Star](#🌟-webrtc-star) - * [Usage](#usage) - * [Setup](#setup) - * [⚡ p2p-circuit](#⚡-p2p-circuit) - * [Usage](#usage-2) - * [Setup](#setup-2) - * [Nginx Setup](#nginx-setup) - * [Advertising](#advertising) -* [🌐 Communication](#🌐-communication) - * [📰 PubSub](#📰-pubsub) - * [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) - * [Staying connected to peers](#staying-connected-to-peers) - * [Staying connected to the circuit relay](#staying-connected-to-the-circuit-relay) -* [🎉 Conclusion](#🎉-conclusion) +- [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) + - [🐳 Docker (optional)](#🐳-docker-optional) + - [Create a volume](#create-a-volume) + - [Configure a domain](#configure-a-domain) + - [Running the container](#running-the-container) + - [🌟 WebRTC-Star](#🌟-webrtc-star) + - [Usage](#usage) + - [Setup](#setup) + - [⚡ p2p-circuit](#⚡-p2p-circuit) + - [Usage](#usage-2) + - [Setup](#setup-2) + - [Advertising](#advertising) +- [🔒 SSL (Nginx)](#🔒-ssl-nginx) +- [🌐 Communication](#🌐-communication) + - [📰 PubSub](#📰-pubsub) + - [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) + - [Staying connected to peers](#staying-connected-to-peers) + - [Staying connected to the circuit relay](#staying-connected-to-the-circuit-relay) +- [🎉 Conclusion](#🎉-conclusion) ## 🪐 Peer discovery and connectivity @@ -57,7 +57,7 @@ In a browser, discovering and connecting to peers can be very hard, as we can't The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know what kind of connection you have. Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application). -![BrowserIPFSNetworkGraph](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") 🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! +![Network graph showing the paths nodes can use to discover and communicate with eachother](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") 🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! ### 🐳 Docker (optional) @@ -77,11 +77,11 @@ docker volume create ipfs_bundle You need a domain and SSL to use this kit with browser nodes. There are two options below: One will run certbot and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). -When you execute either commands, your IPFS node will also be set up for the first time giving you information such as its `PeerID` and circuit relay addresses. Take note of these — you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star Usage](#usage "WebRTC-Star Usage") and [p2p-circuit Usage](#usage-2) for usage examples, or edit `index.html` and change my node's multiaddresses out for your own). +When you execute either commands, your IPFS node will also be set up for the first time giving you information such as its `PeerID` and circuit relay addresses. Take note of these — you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit Usage](#usage-2) for usage examples, or edit `index.html` and change my node's multiaddresses out for your own). ##### With certbot -Ensure port 80 is open, follow the checklist below, and then run the following command: +Ensure port 80 isn't being used, follow the checklist below, and then run the following command: ```bash docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM @@ -97,8 +97,8 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 **📝 Checklist** -* Replace `DOMAIN.COM` with your domain -* Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) +- Replace `DOMAIN.COM` with your domain +- Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) #### Running the container @@ -243,55 +243,7 @@ First configure the Go node, enabling [WebSocket](https://en.wikipedia.org/wiki/ } ``` -Restart your `go-ipfs` node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly set up! We've enabled regular WebSockets with relaying support, however we need secure WebSockets — otherwise browsers won't connect to us. - -#### Nginx setup - -This setup is similar for WebRTC-Star; you just need to set it up as a different site, on a different port, with a new upstream name (instead of `ipfs`, try something like `star`). - -First obtain and install [Certbot](https://certbot.eff.org/docs/install.html). Then edit the following file with your domain name, and port, then copy it to `/etc/nginx/sites-available/ipfs`. - -```nginx -map $http_upgrade $connection_upgrade { - default upgrade; - '' close; -} - -upstream ipfs { - server 127.0.0.1:4011; -} - -server { - server_name ipfs.YOURDOMAIN.COM; - listen 4430 ssl; - ssl_certificate /etc/letsencrypt/live/ipfs.YOURDOMAIN.COM/fullchain.pem; - ssl_certificate_key /etc/letsencrypt/live/ipfs.YOURDOMAIN.COM/privkey.pem; - include /etc/letsencrypt/options-ssl-nginx.conf; - ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; - location / { - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - - proxy_pass http://ipfs; - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection $connection_upgrade; - proxy_set_header Host $host; - } -} -``` - -So in this example you can see we're accepting SSL on port 4430 — this is our "wss port" (WebSocket Secure) — and then passing it to the unsecured port locally on 4011 — this is our "ws port". So if we want to connect to this node from a browser, we'd use port 4430. - -After, run the following: - -```bash -sudo systemctl stop nginx -sudo certbot -d ipfs.YOURDOMAIN.COM --standalone # Edit ipfs.YOURDOMAIN.COM to the domain you want a cert for -sudo ln -s /etc/nginx/sites-available/ipfs /etc/nginx/sites-enabled/ipfs -sudo systemctl start nginx -``` - -🎉 Nginx is now operating as a reverse-proxy, giving you secured WebSockets! +Restart your `go-ipfs` node however you normally do (possibly `systemctl --user restart ipfs`), and we're mostly set up! We've enabled regular WebSockets with relaying support, however we need secure WebSockets (outlined in the SSL section below) — otherwise browsers won't be able to connect to us. #### Advertising @@ -309,6 +261,86 @@ You should see here where you simply fill out your domain name you got the SSL c Ensure you specify DNS6 or DNS4, depending on if you're forming an IPv6 or IPv4 address. **It's important to ensure you use DNS, otherwise browser nodes likely won't be able to connect.** Also note the port 4430; if you used a different one, you'll need to specify that. +## 🔒 SSL (Nginx) + +So far we've setup WebRTC-Star and p2p-circuit without SSL (unless you used the WebRTC-Star docker setup). If you want to use your nodes over the Internet, with a browser, they need to support SSL. If you're using the defaults currently WebRTC-Star should be running on port 9090 (no-SSL) and p2p-circuit will be on port 4011 (no-SSL). We're going to put those on port 9091 (SSL) and port 4430 (SSL), respectively. + +First ensure Nginx is installed, then obtain and install [Certbot](https://certbot.eff.org/docs/install.html). + +We're going to create two files from templates below. Ensure you're editing entries like `YOURDOMAIN.COM` with the full domain (including subdomain) you plan to use for your services. + +`/etc/nginx/sites-available/ipfs` (p2p-circuit, 4430(SSL) ➡ 4011) +```nginx +map $http_upgrade $connection_upgrade { + default upgrade; + '' close; +} + +upstream ipfs { + server 127.0.0.1:4011; +} + +server { + server_name YOURDOMAIN.COM; + listen 4430 ssl; + ssl_certificate /etc/letsencrypt/live/YOURDOMAIN.COM/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/YOURDOMAIN.COM/privkey.pem; + location / { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + + proxy_pass http://ipfs; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection $connection_upgrade; + proxy_set_header Host $host; + } +} +``` + +--- + +`/etc/nginx/sites-available/star` (WebRTC-Star, 9091(SSL) ➡ 9090) +```nginx +map $http_upgrade $connection_upgrade { + default upgrade; + '' close; +} + +upstream star { + server 127.0.0.1:9090; +} + +server { + server_name YOURDOMAIN.COM; + listen 9091 ssl; + ssl_certificate /etc/letsencrypt/live/YOURDOMAIN.COM/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/YOURDOMAIN.COM/privkey.pem; + location / { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + + proxy_pass http://star; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection $connection_upgrade; + proxy_set_header Host $host; + } +} +``` + +So in this example you can see we're accepting SSL on port 4430 — this is our "wss port" (WebSocket Secure) — and then passing it to the unsecured port locally on 4011 — this is our "ws port". So if we want to connect to this node from a browser, we'd use port 4430. + +After, run the following: + +```bash +sudo systemctl stop nginx +sudo certbot -d YOURDOMAIN.COM --standalone # Edit YOURDOMAIN.COM to the domain you want a cert for, if you need multiple, fill in multiple or run the command multiple times +sudo ln -s /etc/nginx/sites-available/ipfs /etc/nginx/sites-enabled/ipfs +sudo ln -s /etc/nginx/sites-available/star /etc/nginx/sites-enabled/star +sudo systemctl start nginx +``` + +🎉 Nginx is now operating as a reverse-proxy, giving you secured WebSockets! + ## 🌐 Communication Whew! Since you made it this far, you might be wondering "what is communication like?"Luckily the answer is that it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. @@ -421,4 +453,4 @@ I hope this was informative enough to get rolling. If you were successful in fol * [js-ipfs/docs/CONFIG.md](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md) * [js-ipfs/docs/core-api](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) * [js-ipfs/examples/circuit-relaying](https://github.com/ipfs/js-ipfs/tree/master/examples/circuit-relaying) -* [js-libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) \ No newline at end of file +* [js-libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) From 31d6e55f50d87a67fd2bfd674eea4f0ed6192fb3 Mon Sep 17 00:00:00 2001 From: TheDiscordian <43145244+TheDiscordian@users.noreply.github.com> Date: Thu, 10 Jun 2021 16:07:50 -0400 Subject: [PATCH 26/32] Update a-guide-to-ipfs-connectivity-in-web-browsers.md spacing between image, and text below --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index edbc59a6..7768bfc1 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -57,7 +57,9 @@ In a browser, discovering and connecting to peers can be very hard, as we can't The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know what kind of connection you have. Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application). -![Network graph showing the paths nodes can use to discover and communicate with eachother](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") 🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! +![Network graph showing the paths nodes can use to discover and communicate with eachother](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") + +🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! ### 🐳 Docker (optional) From 342c69da370b4bdf90969ea81f12f16f6c4cda6c Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:09:33 +0000 Subject: [PATCH 27/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- ...de-to-ipfs-connectivity-in-web-browsers.md | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 7768bfc1..3a3c5b9a 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -31,25 +31,25 @@ Let's take a look at how this works. ## 📖 Table of contents -- [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) - - [🐳 Docker (optional)](#🐳-docker-optional) - - [Create a volume](#create-a-volume) - - [Configure a domain](#configure-a-domain) - - [Running the container](#running-the-container) - - [🌟 WebRTC-Star](#🌟-webrtc-star) - - [Usage](#usage) - - [Setup](#setup) - - [⚡ p2p-circuit](#⚡-p2p-circuit) - - [Usage](#usage-2) - - [Setup](#setup-2) - - [Advertising](#advertising) -- [🔒 SSL (Nginx)](#🔒-ssl-nginx) -- [🌐 Communication](#🌐-communication) - - [📰 PubSub](#📰-pubsub) - - [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) - - [Staying connected to peers](#staying-connected-to-peers) - - [Staying connected to the circuit relay](#staying-connected-to-the-circuit-relay) -- [🎉 Conclusion](#🎉-conclusion) +* [🪐 Peer discovery and connectivity](#🪐-peer-discovery-and-connectivity) + * [🐳 Docker (optional)](#🐳-docker-optional) + * [Create a volume](#create-a-volume) + * [Configure a domain](#configure-a-domain) + * [Running the container](#running-the-container) + * [🌟 WebRTC-Star](#🌟-webrtc-star) + * [Usage](#usage) + * [Setup](#setup) + * [⚡ p2p-circuit](#⚡-p2p-circuit) + * [Usage](#usage-2) + * [Setup](#setup-2) + * [Advertising](#advertising) +* [🔒 SSL (Nginx)](#🔒-ssl-nginx) +* [🌐 Communication](#🌐-communication) + * [📰 PubSub](#📰-pubsub) + * [⚠️ Possible browser pitfalls](#⚠️-possible-browser-pitfalls) + * [Staying connected to peers](#staying-connected-to-peers) + * [Staying connected to the circuit relay](#staying-connected-to-the-circuit-relay) +* [🎉 Conclusion](#🎉-conclusion) ## 🪐 Peer discovery and connectivity @@ -79,7 +79,7 @@ docker volume create ipfs_bundle You need a domain and SSL to use this kit with browser nodes. There are two options below: One will run certbot and automatically grab a certificate for the provided domain name. The other option won't handle SSL for you, and instead you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). -When you execute either commands, your IPFS node will also be set up for the first time giving you information such as its `PeerID` and circuit relay addresses. Take note of these — you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star#Usage](#usage) and [p2p-circuit Usage](#usage-2) for usage examples, or edit `index.html` and change my node's multiaddresses out for your own). +When you execute either commands, your IPFS node will also be set up for the first time giving you information such as its `PeerID` and circuit relay addresses. Take note of these — you'll want to edit them into the chat client so you can use your own node (see [WebRTC-Star Usage](#usage) and [p2p-circuit Usage](#usage-2) for usage examples, or edit `index.html` and change my node's multiaddresses out for your own). ##### With certbot @@ -99,8 +99,8 @@ docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:401 **📝 Checklist** -- Replace `DOMAIN.COM` with your domain -- Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) +* Replace `DOMAIN.COM` with your domain +* Ensure the domain is correctly pointing to the machine you're running the container on (subdomains work fine too) #### Running the container @@ -272,6 +272,7 @@ First ensure Nginx is installed, then obtain and install [Certbot](https://certb We're going to create two files from templates below. Ensure you're editing entries like `YOURDOMAIN.COM` with the full domain (including subdomain) you plan to use for your services. `/etc/nginx/sites-available/ipfs` (p2p-circuit, 4430(SSL) ➡ 4011) + ```nginx map $http_upgrade $connection_upgrade { default upgrade; @@ -299,9 +300,10 @@ server { } ``` ---- +*** `/etc/nginx/sites-available/star` (WebRTC-Star, 9091(SSL) ➡ 9090) + ```nginx map $http_upgrade $connection_upgrade { default upgrade; @@ -455,4 +457,4 @@ I hope this was informative enough to get rolling. If you were successful in fol * [js-ipfs/docs/CONFIG.md](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md) * [js-ipfs/docs/core-api](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) * [js-ipfs/examples/circuit-relaying](https://github.com/ipfs/js-ipfs/tree/master/examples/circuit-relaying) -* [js-libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) +* [js-libp2p-webrtc-star](https://github.com/libp2p/js-libp2p-webrtc-star) \ No newline at end of file From d4a67fbb7757f4d059321107abf4d63bf092c5a2 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:10:43 +0000 Subject: [PATCH 28/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index 3a3c5b9a..eb74df87 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -57,7 +57,7 @@ In a browser, discovering and connecting to peers can be very hard, as we can't The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know what kind of connection you have. Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application). -![Network graph showing the paths nodes can use to discover and communicate with eachother](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") +![Network graph showing the paths nodes can use to discover and communicate with each other](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph") 🌟 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node! From ffe94ea1738d7976b35b67cccc0075996012c127 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:49:46 +0000 Subject: [PATCH 29/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index eb74df87..e5eb252b 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -89,7 +89,7 @@ Ensure port 80 isn't being used, follow the checklist below, and then run the fo docker run --mount source=ipfs_bundle,destination=/root -p 9091:9091 -p 4011:4011 -p 9090:9090 -p 4430:4430 -p 80:80 -it trdiscordian/ipfsbundle certbot DOMAIN.COM ``` -##### No cerbot (SSL disabled) +##### No certbot (SSL disabled) If you do this option, the container won't handle SSL at all, and you'll have to reverse proxy port 9091 to 9090 (SSL), and port 4011 to 4430 (SSL). From be5aa0621d911a1ae1e06e49cb3c189e50bac0f9 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:52:45 +0000 Subject: [PATCH 30/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index e5eb252b..d37e497f 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -166,7 +166,7 @@ await ipfs.bootstrap.add('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhh await ipfs.swarm.connect('/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt'); ``` -If you're looking to do your own client without copying the example, ensure you're also communicating with the announce channel, which is described under "Advertising". The relevant code in the chat demo is this (simplified): +If you're looking to do your own client without copying the example, ensure you're also communicating with the announce channel, which is described under [Advertising](#advertising). The relevant code in the chat demo is this (simplified): ```javascript var ipfs; // store the IPFS node you're using in this variable From 774f15e465160586a8bff1b042744aae8a5d5be5 Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:53:23 +0000 Subject: [PATCH 31/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index d37e497f..cf3ce0f4 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -265,7 +265,7 @@ Ensure you specify DNS6 or DNS4, depending on if you're forming an IPv6 or IPv4 ## 🔒 SSL (Nginx) -So far we've setup WebRTC-Star and p2p-circuit without SSL (unless you used the WebRTC-Star docker setup). If you want to use your nodes over the Internet, with a browser, they need to support SSL. If you're using the defaults currently WebRTC-Star should be running on port 9090 (no-SSL) and p2p-circuit will be on port 4011 (no-SSL). We're going to put those on port 9091 (SSL) and port 4430 (SSL), respectively. +So far we've setup WebRTC-Star and `p2p-circuit` without SSL (unless you used the WebRTC-Star docker setup). If you want to use your nodes over the Internet, with a browser, they need to support SSL. If you're using the defaults currently WebRTC-Star should be running on port 9090 (no-SSL) and p2p-circuit will be on port 4011 (no-SSL). We're going to put those on port 9091 (SSL) and port 4430 (SSL), respectively. First ensure Nginx is installed, then obtain and install [Certbot](https://certbot.eff.org/docs/install.html). From 00559015cab1e1c3658e14d66f8cc53346b6365e Mon Sep 17 00:00:00 2001 From: Jessica Schilling Date: Thu, 10 Jun 2021 20:55:03 +0000 Subject: [PATCH 32/32] Update from Forestry.io Jessica Schilling updated src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md --- src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md index cf3ce0f4..a931f441 100644 --- a/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md +++ b/src/_blog/a-guide-to-ipfs-connectivity-in-web-browsers.md @@ -343,11 +343,11 @@ sudo ln -s /etc/nginx/sites-available/star /etc/nginx/sites-enabled/star sudo systemctl start nginx ``` -🎉 Nginx is now operating as a reverse-proxy, giving you secured WebSockets! +🎉 Nginx is now operating as a reverse proxy, giving you secured WebSockets! ## 🌐 Communication -Whew! Since you made it this far, you might be wondering "what is communication like?"Luckily the answer is that it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. +Whew! Since you made it this far, you might be wondering "what is communication like?" Luckily the answer is that it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed. ### 📰 PubSub