教程在浏览器中实现IPFS连接的指引 _IPFS连接

文章插图

我们看到很多关于在浏览器里使用js-ipfs的问题。这篇文章展示了用js-ipfs搭建最小化的聊天应用的例子，这个应用可以在浏览器中运行。它使用WebRTC去实现浏览器对浏览器的连接（在可用时），如不可用则使用回路中继（Circuit Relay）去连接浏览器节点。消息的传递是通过libp2p的pubsub功能实现。

获取代码

你可以在这里(https://ipfs.io/ipfs/bafybeia5f2yk6td7ciroeped2uwfivo333b524t3zmoderfhl3xn7wi7aa/)查看演示。如果你想要一个可以自行编辑的本地拷贝，可以使用IPFS下载整个目录：

文章插图

然后，只要在浏览器中打开index.html ，就可以立即自动连接到节点并寻找连接资源。

你也可以在GitHub上分叉 heDiscordian/browser-ipfs-chat(https://github.com/TheDiscordian/browser-ipfs-chat) 项目，就可以立刻开始测试了！如果你想部署自己的版本，只要编辑index.html并遵循以下的设置信息：

在这个例子中使用的库是js-ipfs(https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) 和 Bootstrap (只包含了最小化的css样式文件) 。如果你想要一个新版本的js-ipfs ，可以下载这个(https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) 以获得最新的可用版本 .

让我们看一下这个过程的工作原理。

目录表

* 节点发现和连接(#-peer-discovery-and-connectivity)
* Docker容器 (可选)(#-docker-optional)
* 创建一个存储卷(#create-a-volume)
* 配置域名(#configure-a-domain)
* 运行容器(#running-the-container)
* WebRTC-Star(#-webrtc-star)
* 使用(#usage)
* 设置(#setup)
* ? p2p-circuit(#?-p2p-circuit)
* 使用(#usage-2)
* 设置(#setup-2)
* 公告(#advertising)
* SSL证书 (Nginx)(#-ssl-nginx)
* 通讯(#-communication)
* PubSub(#-pubsub)
* ?? 可能存在的浏览器问题(#??-possible-browser-pitfalls)
* 保持与节点的连接(#staying-connected-to-peers)
* 保持与回路中继的连接(#staying-connected-to-the-circuit-relay)
* 总结(#-conclusion)

节点发现和连接

在浏览器中，发现和连接到节点可能是有难度的，因为我们无法监听新节点，也没法访问分布式哈希表(DHT) 。为了实现在浏览器中运行的最佳体验，理解如何寻找节点和保持与其的连接是很重要的。

聊天应用的例子通过两种方式实现此目标。使用WebRTC-Star ，我们实现了直接的浏览器对浏览器通讯，并配置了两者之间的回路中继。这个聊天应用也在左上方配置了一个状态指示器，让你知道自己的连接种类。绿色表示你连接到了中继（即便是通过另一个节点来连接）；黄色表示你只看到直接连接的节点；红色表示你没有连接到节点（至少在聊天应用中没有连接）。

网络图表展示路径中的节点可以彼此间发现和通讯(https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph")

文章插图

上图展示了一个有3名用户的网络是什么样子的。值得注意的是浏览器节点也可以与 go-ipfs节点通讯。因此，浏览器C并不需要是一个浏览器，也可以是一个go-ipfs节点。

Docker容器 (可选)

如果你不想使用Docker容器，可以直接跳到WebRTC-Star(#-webrtc-star) 的章节。

在这个章节后，我们会涵盖WebRTC-Star和回路中继的作用，以及相关的设置方法。不过，如果你想通过Docker快速上手，我已经准备了一个可用的镜像。它可能不是最佳的长期解决方案，不过如果你只是想快速上手和进行实验的话，就是很好的方式了。

创建一个存储卷（volume）

首先，创建一个存储卷去存储密钥和节点数据这样的长期数据。