我们看到了很多关于如何开始在浏览器中使用js ipfs的问题。本文演示了一个完全在浏览器中使用js ipfs的聊天示例。它使用WebRTC在可能的情况下实现浏览器到浏览器的连接，并使用电路中继在不可能的情况下连接浏览器节点。消息传递是通过libp2p和#39完成的；酒吧。
你可以在这里看到实时演示（打开新窗口）。如果你'；我想要一份本地副本，你可以自己编辑，你可以使用IPFS下载整个目录：
然后简单地打开索引。网页浏览器中的html和你'；我们将立即开始自动连接到节点并寻找对等节点！
你也可以在GitHub上打开Discordian/browser ipfs聊天（打开新窗口），它'；I’我马上就准备好测试！如果您想部署自己的版本，只需编辑索引即可。并按照下面的设置信息进行操作。
本例中使用的库是js ipfs（打开新窗口）和Bootstrap（只是它们的缩小CSS）。如果你想要更新版本的js ipfs，可以在这里下载（打开新窗口）以使用最新版本😃.
在浏览器中，发现和连接同龄人可能非常困难，就像我们一样'；不要倾听新同事的声音，我们也不会'；我无法使用DHT。为了获得在浏览器中工作的最佳体验，它'；了解如何找到同龄人并与他们保持联系很重要。
聊天示例通过两种方式实现这一点。使用WebRTC星，实现了浏览器与浏览器的直接通信，并通过电路继电器，在中间有一个继电器。聊天应用程序在左上角还有一个状态指示器，可以让你知道你的连接类型。绿色意味着你'；重新连接到继电器，即使它'；通过另一个同龄人；黄色表示你'；我们只看到直接的同龄人；红色表示你没有同伴（至少没有使用聊天应用程序的同伴）。
🌟 上图展示了三用户网络的样子。它'；值得注意的是，浏览器节点也可以与go IPF通信，因此BrowserC不'；不必是浏览器，但可以是go ipfs节点！
在本节之后，我们'；我将介绍WebRTC Star和电路继电器的功能，以及如何设置它们。然而，如果你'；我想用Docker，I'；我准备了一张你可以使用的图片。这可能不是最好的长期解决方案，但如果你想快速开始并进行实验，这应该是很好的。
您需要一个域和SSL才能将此工具包与浏览器节点一起使用。下面有两个选项：一个将运行certbot并自动获取所提供域名的证书。另一个选项赢了'；我不能为你处理SSL，相反，你'；我们必须将代理端口9091反转为9090（SSL），将端口4011反转为4430（SSL）。
当您执行任一命令时，您的IPFS节点也将第一次被设置，为您提供其对等地址和电路中继地址等信息。注意这些——你'；I’我想将它们编辑到聊天客户端，这样你就可以使用自己的节点（参见WebRTC Star Usage和p2p circuit Usage了解用法示例，或者编辑index.html并将my node'；s multiaddresses更改为你自己的）。
确保端口80为'；如果正在使用，请遵循下面的检查表，然后运行以下命令：
docker run——mount source=ipfs_bundle，destination=/root-p9091:9091-p4011:4011-p9090:9090-p4430:4430-p80:80-it trdiscordian/ipfsbundle certbot域。组件对象模型
如果您选择此选项，则容器将赢得'；根本无法处理SSL，而您'；我们必须将代理端口9091反转为9090（SSL），将端口4011反转为4430（SSL）。
确保域正确地指向您的机器'；在上重新运行容器（子域也可以正常工作）
一旦你'；重新配置后，运行容器很简单。确保至少转发端口4430和9090。
🎉 现在，您应该可以将该机器用作WebRTC星形节点和p2p电路节点。
我们可以使用WebRTC Star（打开新窗口）节点来帮助发现我们可以直接通过浏览器到浏览器连接的其他节点。我发现很容易将其视为类似于STUN（打开新窗口），如果你'；我们已经熟悉这个概念了。实际上，每个连接节点都将获得一个WebRTC星形多地址（打开新窗口），其他节点可以使用该地址直接发现并连接到浏览器。这意味着，如果你与使用星型节点的人进行对等，而星型节点离线，你将保持连接！
ipfs=等待ipfs。创建（{repo:'；ok'；+Math.random（），//random，这样我们每次都会得到一个新的peerid，用于测试配置：{Addresses:{Swarm:['；/dns4/star.thedisco.zone/tcp/9090/wss/p2p webrtc star#39；'；/dns6/star thedisco.zone/tcp/9090/wss/p2p webrtc star 39；}，}）；
请注意，这个例子使用了我自己的星型节点——然而，这些节点赢了'；在那里不一定总能找到。目前为'；重要的是找到一个可靠的星型节点或自己的主机。您只需按照此处的说明（打开新窗口）进行本机设置，并按照此处的说明（打开新窗口）进行Docker容器的托管，该容器包含Nginx（用于SSL）。如果您选择本机设置，我们将在本文后面介绍Nginx反向代理过程和SSL证书检索。
🚀 这是一种非常干净有效的P2P通信方法；然而，有时NAT会碍事。我们使用p2p电路（打开新窗口）来解决这个问题。
使用p2p circuit对复杂的NAT（或VPN，或其他任何东西）背后的对等方来说真的很有帮助。我发现p2p电路的中继类似于TURN（打开新窗口），所以它'；如果你'；我们已经很熟悉了。
一旦p2p电路的所有服务都放在一起，就可以通过几种不同的方式连接到节点。首先，要在启动时仅连接到我们的节点：
如果你'；如果你希望在不复制示例的情况下开发自己的客户，请确保'；重新与公告频道进行沟通，详见广告部分。聊天演示中的相关代码如下（简化）：
var ipfs；//存储您需要的IPFS节点'；在这个变量中重新使用//通过pubsub异步函数processannound（addr）{//get our peerid me=await ipfs.id（）；me=me.id；//如果它是从我们这里发出的，那么它就不是真正的通告，如果（addr.from==me）{return；}如果我们有一个keep alive，如果（addr=="；keep alive"；）就没什么可做的了{console.log（addr）；return；}peer=addr。拆分（"；/"；）[ 9 ] ; 安慰日志（"；对等："；+对等）；安慰日志（"；Me:"；+Me）；if（peer==me）{//return如果所宣布的peer是us return；}//获取对等点列表=等待IPF。一大群同龄人（）；对于（对等体中的i）{//如果我们已经连接到对等体，那么不要费心做//电路连接，如果（对等体[i].peer==peer）{return；}//在我们'；我们将尝试连接控制台。日志（地址）；//连接几乎总是第一次失败，但几乎总是//第二次成功，所以我们这样做：尝试{wait ipfs.swarm.connect（addr）；}catch（err）{console.log（err）；wait ipfs.swarm.connect（addr）；}}//通过中继网络处理公告，并发布我们自己的//keep alives以保持频道的活力，等待IPF。pubsub。订阅（"；公告电路"；，流程公告）；setInterval（函数（）{ipfs.pubsub.publish（"；公告电路"；，"；对等活动"；）；），15000 ) ;
与星形节点一样，它'；We’重要的是，你可以自己管理自己的东西，因为这篇文章中的东西随时都可能离线。
在本例中，您'；我需要在托管自己的go ipfs（打开新窗口）节点的服务器上执行一些操作。你'；我还需要一个正常工作的Nginx安装程序，它将用于SSL，这是浏览器的一个要求。
首先配置Go节点，启用WebSocket（打开新窗口）支持，并将其指定为中继，以便我们可以通过编辑~/从浏览器与它通信。ipfs/config以添加以下设置：
{"；地址"；：{"；Swarm"；：["；/ip4/0.0.0/tcp/4011/ws"；，"；/ip6/：：/tcp/4011/ws"；]"Swarm"；：{"；EnableRelayHop"；：true}
以正常方式重新启动go ipfs节点（可能是systemctl——用户重新启动ipfs），我们'；我们已经准备好了！我们'；我们已经启用了具有中继支持的常规WebSocket，但是我们需要安全的WebSocket（在下面的SSL部分中概述）——否则浏览器将赢得'；我无法与我们联系。
使用p2p电路可能有点棘手。一旦我们从浏览器连接到中继，我们'；我们不是在宣传我们'；我们可以通过它联系到你！为此，我'；我创建了一个Python脚本，它与go ipfs一起运行，并用一个p2p回路多地址（打开新窗口）在PubSub（打开新窗口）上公布它遇到的浏览器js ipfs对等点。
您可以在这里找到Python脚本（打开新窗口）。它可以用一个简单的python ipfs_peeradvertiser运行。皮耶。但是，请确保首先使用自己的节点编辑回路'；这是你的信息，否则你赢了'；没有正确地宣布同龄人，他们赢了'；我不知道如何使用中继连接到其他同龄人。
你可以很容易地检索自己的电路信息。只需在go ipfs节点上运行ipfs id即可获得PeerID，然后按如下方式形成回路URL：
你应该在这里看到，你只需填写你获得SSL证书的域名，以及你的节点'；这是皮利德。对于脚本，前导斜杠和尾随斜杠也是必需的。
确保指定DNS6或DNS4，具体取决于'；正在重新形成IPv6或IPv4地址。它'；确保使用DNS很重要，否则浏览器节点可能会赢#39；我无法连接。还要注意端口4430；如果你用了另一个，你'；我需要具体说明一下。
到目前为止，我们'；ve设置不带SSL的WebRTC Star和p2p电路（除非使用WebRTC Star docker设置）。如果你想在互联网上通过浏览器使用你的节点，它们需要支持SSL。如果你'；重新使用默认设置当前WebRTC Star应在端口9090（无SSL）上运行，p2p电路将在端口4011（无SSL）上运行。我们'；我们将把它们分别放在端口9091（SSL）和端口4430（SSL）上。
我们'；我们将从下面的模板创建两个文件。确保你'；重新编辑像YOURDOMAIN这样的条目。COM与您计划用于服务的完整域（包括子域）进行通信。
map$http#u upgrade$connection#u upgrade{default upgrade；'；'；close；}上游ipfs{server127.0.0.1:4011；}服务器{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；位置/{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；}
map$http#u upgrade$connection#u upgrade{default upgrade；'；'；close；}上游星型{Server127.0.0.1:9090；}服务器{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；位置/{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；}
在这个例子中，你可以看到我们'；重新接受端口4430上的SSL-这是我们的"；wss端口"；（WebSocket安全）-然后在4011本地将其传递到不安全的端口-这是我们的"；ws-port"；。所以如果我们想从浏览器连接到这个节点，我们'；d使用端口4430。
sudo systemctl stop nginx sudo certbot-d YOURDOMAIN。COM--独立#编辑你的域名。COM到您想要证书的域，如果需要多个，请填写多个或多次运行命令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
唷！既然你走了这么远，你可能会想"；沟通是什么样的" 幸运的是，答案是'；与寻找同龄人相比，这很容易，只有一些小缺陷。我们'；我们将简单介绍一下我们'；在聊天示例中重新使用PubSub（打开新窗口），以及在开发过程中发现了哪些陷阱。
使用PubSub，我们'；我们可以订阅主题并检索发布到这些主题的任何消息。在js ipfs中，我们可以设置一个回调函数，在收到消息时调用该函数：
这实际上就是聊天演示所做的。它'；s订阅一个全球主题（名为"；discochat global"；），简单地传递人们在PubSub上键入的信息。
所以让我们'；比如说你'；我一切都做对了。你'；我们可以使用WebRTC Star和p2p circuit找到同龄人——太棒了！然而，你可能会发现你的连接过期了，你'；我们无法恢复它们。我'；我不完全确定是什么导致了这种行为（可能是一些浏览器策略）；然而，我们可以尽最大努力缓解这些问题！
我们通过几种方式与同龄人保持联系。第一种方式更直接：订阅并发送"；保持活力"；每4秒通过discochat keepalive发布一次公告：
这将有助于确保我们优先考虑希望聊天的同龄人。此外，我们每15秒报告一次电路，以确保我们与电路继电器保持连接，以便我们可以连接到NAT后面的对等方。那'；他是这样完成的：
//通过中继网络处理公告，并发布我们自己的keep alives，以保持频道的活力，等待IPF。pubsub。订阅（"；公告电路"；，流程公告）；setInterval（函数（）{ipfs.pubsub.publish（"；公告电路"；，"；对等活动"；）；），15000 ) ;
电路继电器上的Python脚本将每4秒报告一次keepalive。你可能已经注意到我们'；重新报告"；活着的同伴"；而不是"；保持活力"；；这是为了将对等请求与中继请求分开，以便在我们不再看到中继时更容易判断。
除了ProcessAnnound的简化版本外，在真实版本中，还有一些用于跟踪keep alive和peer alive的变量。它们分别是lastAlive和lastPeer。我们甚至通过lastBootstrap跟踪上次引导的时间。使用所有这些，我们可以在'；我们只连接到对等点（通过lastPeer跟踪），如果我们不连接'；在35秒内没有看到保持活动状态（我们在60秒内没有尝试过引导），我们可以尝试重新连接引导继电器（并显示红色状态）。这是这样完成的：
const bootstraps=['；/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12d3koowchhfgdb9gj1gbhghakcur99ocymmevs4eucey67nt'；'；/dns4/ipfs.thedisco.zone/tcp/4430/wss/p2p/12d3koowchhfgdb9gy1gbhghakcur99ocymmevs4eucey67nt'；]；var lastAlive=0；//我们从继电器var lastPeer=0看到的最后一个保持活动状态；//上次我们从另一个对等服务器上看到的保持活动var lastBootstrap=0；//用于跟踪上次尝试引导时（可能重新连接到继电器）//如果重新连接为真，则为'；ll首先尝试断开与引导节点异步函数dobootstrap（reconnect）{now=new（）.getTime（）；if（now-lastBootstrap<；60000）{//don'；如果我们在最后60秒内尝试，请不要再次尝试引导返回；}lastBootstrap=now；对于（引导中的i）{if（重新连接）{try{wait ipfs.swarm.disconnect（引导[i]）；}catch（e）{console.log（e）；}else{wait ipfs.bootstrap.add（bootstraps[i]）；}等待ipfs。一大群连接（引导[i]）；}}//检查我们是否'；re仍然连接到电路中继函数checkalive（）{now=new（）.getTime（）；if（now-lastAlive>；=35000）{if（now-lastPeer>；=35000）{document.getElementById（"；状态球"；）。风格颜色="；红色"；；}else{document.getElementById（"；状态球"；）。风格颜色="；黄色"；；}dobootstrap（正确）；//让'；让我们尝试重新连接}else{document.getElementById（"；状态球"；）。风格颜色="；酸橙设置间隔（checkalive，1000）；
🌟 以上内容应与完整版本的ProcessAnnound一起使用，因为它依赖于lastAlive和lastPeer，这两个版本不是'；t在简化版本中更新。
我希望这篇文章能提供足够的信息，让我们开始行动。如果你成功地遵循了整个指南，你现在就可以部署完全在浏览器中运行的强大IPFS应用程序，并尽可能利用分散的p2p！我'；我选择了一些有用的资源，并在下面分享它们，以供进一步阅读：