PeerJS 入门答案

【问题标题】：Getting Started With PeerJSPeerJS 入门
【发布时间】：2020-07-24 18:54:32
【问题描述】：

我正在尝试最简单的示例，直接从他们的网站上提取。这是我的整个 html 文件，代码完全取自 https://peerjs.com/index.html:

<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
    var peer = new Peer();
    var conn = peer.connect('another-peers-id');
    // on open will be launch when you successfully connect to PeerServer
    conn.on('open', function(){
    // here you have conn.id
        conn.send('hi!');
    });
</script>

在 Chrome 和 Edge 中，我在控制台中得到了这个：

peerjs.min.js:64 GET https://0.peerjs.com/peerjs/id?ts=15956160926060.016464029424720694 net::ERR_CONNECTION_REFUSED

在 Firefox 中我得到这个：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://0.peerjs.com/peerjs/id?ts=15956162489620.8436734374800061. (Reason: CORS request did not succeed).

我做错了什么？

@reyad 已请求“完整跟踪请求和响应”。这是我在 Firefox 的网络选项卡中看到的内容：

这是 Chrome：

还有一点点 Chrome：

【问题讨论】：

标签： peerjs

【解决方案1】：

[注意：如果您能提供请求和响应的完整跟踪，那就更好了。由于多种原因，可能会出现此问题。我将陈述两个解决方案。所以，试试那些。如果这些不起作用，请提供请求和响应的完整跟踪。]

1.第一个解决方案：

有时，由于自签名证书会发生此类错误。要解决此问题，请打开开发人员工具/选项，然后转到网络选项卡。您将看到一个请求列表。选择由于 CORS 而失败的请求（即，它给了你这个原因：CORS 请求没有成功）。打开它（即单击它）。如果您的问题与证书有关，您将看到以下错误消息：

出现错误：SEC_ERROR_INADEQUATE_KEY_USAGE

要解决此问题，请转到导致此问题的 url 并手动接受证书。

2。第二种解决方案：

在开发者工具/选项的网络选项卡中检查请求（这是CORS的原因）（与1.第一个解决方案中所述相同）。您会找到一个已转移列。看看失败请求的 Transferred 列中的内容。如果写为Blocked By Some Ad-Blocker，则禁用 Ad-Blocker。您的请求将正常工作。

[P.S.]：这些解决方案是基于假设提出的。希望这些作品。如果这两个不起作用，请提供有关请求和响应的更多信息。还要检查this。

3.第三个也是最后一个解决方案：

[注意：此解决方案可能无法直接解决您的问题，但它会为您提供替代解决方案，并深入了解您的问题是什么以及如何解决它]

在阅读下面的解决方案之前，请阅读this 以了解 Access-Control-Allow-Origin 的工作原理（这是 CORS 错误的原因）。

让我先解释一下 peerjs 的工作原理：

PEERJS 基于 PEER ID 工作。因此，您必须从 PEERJS CLOUD SERVER 获得一些 PEER ID，或者您必须在 PEER CONSTRUCTOR 中为自己提供一个，即 new Peer(" some-peer-id")。 Peer id 必须是唯一的，因为它必须唯一地检测所有用户。而且，peerjs 使用这个 PEER ID 在用户之间发送和接收数据。

现在，您应该知道，您正在使用 PEERJS CLOUD SERVER 来获取/生成唯一的 peer id，这是默认服务器 PEERJS 使用，除非您指定要使用其他服务器。

现在让我解释一下您为什么会遇到这个问题：

既然你已经知道 CORS 是如何工作的，你可能已经猜到了，https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js（下载的 js file) 正在调用 https://0.peerjs.com 以检索/生成新的唯一 PEER ID。但是，https://your.website.com 的这个请求由于某种原因没有 Access-Control-Allow-Origin 访问权限，也可能是中间件问题。因此，很难判断问题实际发生在哪里。但可以肯定的是，编写代码不是你的错：D。

我希望你能清楚我上面所说的所有概念。

现在，解决方案：

Alternative-appraoch-1（使用 PEERJS 云服务器和您自己提供的 id）：

在这种方法中，您必须生成自己唯一的PEER ID。因此，“https://your.website.com”不必调用“https://0.peerjs.com”来获取唯一的对等 ID。 [注意：使您的对等 id 足够大，使其始终唯一，至少 64 个字符长]

这样可以避免CORS问题。

更新：

刚刚在github上看到一个新问题，说public peerjs云服务器现在不稳定或者不能正常工作。它只是给出如下错误：Firefox 无法在地址 wss://0.peerjs.com/peerjs?key=peerjs&id=123222589562487856955685485555&token=ocyxworx62i 和 Chrome 中建立与服务器的连接：连接建立错误：net::ERR_CONNECTION_REFUSED。详情请查看here。所以，最好使用自己的服务器（见下一个方法）。

Alternative-appraoch-2（使用您自己的 peerjs 服务器）：

您可以托管自己的 peerjs 服务器，而不是 PEERJS CLOUD SERVER。通过这种方式，您可以允许访问您想要的任何人/任何网站。如果你想知道如何托管 peerjs 服务器，你可以访问here。

[P.S.]：我在 github 上研究过 pearjs 的问题。在阅读了所有这些问题之后，似乎最好使用自己的服务器而不是使用 pearjs 云。每个新版本的 peerjs 都有很多不同的问题。而且主要与与 peerjs 云的连接有关，而且我猜 peerjs 云也不稳定。他们之前在 0.peerjs.com:9000 托管它（不安全）。但现在在 0.peerjs.com:443。

我之前没有使用过 peerjs，也没有设置过 peerjs 服务器。如果你想设置一个，我希望社区能够帮助你如何正确地做到这一点。

【讨论】：

添加了一个新的解决方案...希望它能解决您的问题...

【解决方案2】：

我从你的问题中了解到，存在（CORS => 跨域资源共享）的问题，可能我的建议不是很直观。

首先：在本地目录下下载“https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js”。然后将本地 javascript 代码包含到 html 中。喜欢：<script src="./peerjs.min.js"></script>

第二： 你正在使用var peer = new Peer(); 但请从您这边提供一个额外的唯一 ID。例如，我刚刚创建了一个随机 id 并提供了它。

StackOverflow 链接：https://stackoverflow.com/questions/21216758/peerjs-set-your-own-peerid#:~:text=1%20Answer&text=Provide%20a%20peer%20id%20when,to%20under%20Create%20a%20peer.

var a_random_id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);

var peer = new Peer(a_random_id, {key: 'myapikey'});

第三：最好的选择是运行 PeerServer：您自己的 PeerJS 服务器。

如果您不想开发任何东西，只需在下面输入几个命令即可。

全局安装包： $ npm install peer -g

运行服务器： $ peerjs --port 9000 --key peerjs --path /myapp 在 :: 上启动 PeerServer，端口：9000，路径：/myapp (v. 0.3.2)

检查它：http://127.0.0.1:9000/myapp 它应该返回带有名称、描述和网站字段的 JSON。

详情：https://github.com/peers/peerjs-server

【讨论】：