Javascript 如何建立浏览器到浏览器（点对点）的连接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7022383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a browser to browser (peer to peer) connection?
提问by R?zvan Flavius Panda
How can I write a website using HTML5, CSSand JavaScripton client side that will allow direct tcp/ip connection between the client browsers once the page is loaded.
如何在客户端使用HTML5、CSS和JavaScript编写网站，以便在加载页面后允许客户端浏览器之间的直接 tcp/ip 连接。
I need to do this to to reduce latency since the site will require that the input from one of the users to be transmitted to the other user as soon as possible so sending data from client A to Server and then to client B is not a good option.
我需要这样做以减少延迟，因为该站点将要求尽快将来自一个用户的输入传输到另一个用户，因此将数据从客户端 A 发送到服务器，然后再发送到客户端 B 是不好的选项。
I read previous posts on this subject but there were no working solution/examples available that I could find. From what i read the direct connection between clients can be made using plugins like Silverlight, Java or Flash.
我阅读了有关此主题的以前的帖子，但我找不到可用的可行解决方案/示例。据我所知，客户端之间的直接连接可以使用 Silverlight、Java 或 Flash 等插件进行。
Is there any solution that would not require plugins? I would like to use only JavaScript.
有没有不需要插件的解决方案？我只想使用 JavaScript。
回答by Dennis
Here on Stackoverflow are several topics about P2P connections in browsers:
Stackoverflow 上有几个关于浏览器中 P2P 连接的主题：
- Will HTML5 allow web apps to make peer-to-peer HTTP connections?
- What techniques are available to do P2P in the browser?
- Does HTML5 Support Peer-to-Peer (and not just WebSockets)
- Can HTML5 Websockets connect 2 clients (browsers) directly without using a server (P2P)
- Is it possible to create peer-to-peer connections in a web browser?
- Do websockets allow for p2p (browser to browser) communication?
- HTML 5 Peer to Peer Video Possibilities?
- Is WebRTC implemented in any browsers yet?
- HTML5 会允许网络应用建立点对点 HTTP 连接吗？
- 有哪些技术可以在浏览器中进行 P2P？
- HTML5 是否支持点对点（而不仅仅是 WebSockets）
- HTML5 Websockets 可以在不使用服务器的情况下直接连接 2 个客户端（浏览器）吗（P2P）
- 是否可以在 Web 浏览器中创建点对点连接？
- websockets 是否允许 p2p（浏览器到浏览器）通信？
- HTML 5 点对点视频的可能性？
- WebRTC 是否已在任何浏览器中实现？
As mentioned in most of the topicts, both 2008 HTML5 working drafts were having a section "Peer-to-peer connections":
正如大多数主题中所提到的，2008 年 HTML5 工作草案都有一个“点对点连接”部分：
- http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
- http://www.w3.org/TR/2008/WD-html5-20080610/comms.html#peer-to-peer
- http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
- http://www.w3.org/TR/2008/WD-html5-20080610/comms.html#peer-to-peer
Since the W3C Working Draft 12 February 2009the section "Peer-to-peer connections" disappeared. But this P2P connection is not gone. It's back under the name PeerConnection within the WebRTC (Real-Time Communications) specifications:
自W3C 工作草案 2009 年 2 月 12 日起，“点对点连接”部分消失了。但是这个 P2P 连接并没有消失。它在 WebRTC（实时通信）规范中以 PeerConnection 的名称重新命名：
- http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection(W3C Editor's Draft)
- http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection(Since 5th December 2011 forwarded to W3C Editor's Draft)
- http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection（W3C编辑草案）
- http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection（自 2011 年 12 月 5 日转发至 W3C 编辑草案）
Since 31 October 2011, the W3C Editor's Draft is an official Working draft:
自 2011 年 10 月 31 日起，W3C 编辑草案成为正式的工作草案：
The only implementation of the PeerConnection (UDP based) exists in the modified WebKit by the Ericsson labs (May 2011), which is working quite well. Some patches are in WebKit now (Oct. 2011 -- see updates below!):
PeerConnection（基于 UDP）的唯一实现存在于 Ericsson 实验室（2011 年 5 月）修改的 WebKit 中，它运行良好。一些补丁现在在 WebKit 中（2011 年 10 月——见下面的更新！）：
- https://labs.ericsson.com/apis/web-real-time-communication/
- https://labs.ericsson.com/developer-community/blog/update-webkit-contributions
- https://labs.ericsson.com/apis/web-real-time-communication/
- https://labs.ericsson.com/developer-community/blog/update-webkit-contributions
Additionally, the WebRTC initiative is a project by Google, Mozilla and Opera. Thus, they are continuing the specification on PeerConnection:
此外，WebRTC 计划是 Google、Mozilla 和 Opera 的一个项目。因此，他们继续对 PeerConnection 进行规范：
Probably Chrome (uses WebKit) will be the first major browser supporting WebRTC with PeerConnection:
Chrome（使用 WebKit）可能是第一个通过 PeerConnection 支持 WebRTC 的主要浏览器：
- http://www.webrtc.org/blog/firststeptowardchromeintegration
- http://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/95bf1e2e1de852fc
- https://lists.webkit.org/pipermail/webkit-dev/2011-November/018445.html
- http://www.webrtc.org/blog/firststeptowardchromeintegration
- http://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/95bf1e2e1de852fc
- https://lists.webkit.org/pipermail/webkit-dev/2011-November/018445.html
Since 18th January 2012, Chrome is supporting WebRTC as well. It can be uses in the Dev channel (Windows, OSX, Linux) and the Canary build (Windows and OSX)by enabling it under chrome://flags. It only only supports MediaStreamlike Video and audio and can be tested with several Demos. Transferring application data like String/ArrayBuffer/... is not supported until now.
自 2012 年 1 月 18 日起，Chrome 也支持 WebRTC。它可以在应用开发频道（在Windows，OSX和Linux）和金丝雀版本（Windows和OSX）由下启用它chrome://flags。它只支持MediaStream像视频和音频，可以用几个Demo进行测试。到目前为止，不支持传输应用程序数据，如String/ ArrayBuffer/...。
Since 16th March 2012, the WebRTC Editor's Draftseparates a "Peer-to-peer Data API"to send and receive generic application data (String, ArrayBufferand Blob). Chromium wants to implement the Data API soon(10th April 2012).
自2012 年 3 月 16 日起，WebRTC Editor's Draft分离出“点对点数据 API”来发送和接收通用应用程序数据（String、ArrayBuffer和Blob）。Chromium 希望尽快实现数据 API（2012 年 4 月 10 日）。
On April, 3rd, Mozilla published a first working example on WebRTC for Firefoxas well.
4 月 3 日，Mozilla 也为 Firefox发布了第一个关于WebRTC 的工作示例。
DataChannel is planned for version 25 of Chrome, behind a flag, meanwhile it can be tested in Firefox Nightly/Aurora (12th December 2012):
DataChannel 计划用于 Chrome 的第 25 版，在一个标志后面，同时它可以在 Firefox Nightly/Aurora（2012 年 12 月 12 日）中进行测试：
2018: DataChannels are still experimental, but available in current versions of Chrome and Firefox:
2018 年：DataChannels 仍处于实验阶段，但在当前版本的 Chrome 和 Firefox 中可用：
回答by Emil Ivanov
I'll have to disappoint you - this is currently not possible with just JavaScript. Websockets (and Socket.IO) allow a socket-like connection between the client and the server, but not between clients. Your option is a plugin - be it Flash, Silverlight, Java or custom-made.
我不得不让你失望 - 目前仅使用 JavaScript 是不可能的。Websockets（和 Socket.IO）允许客户端和服务器之间的类似套接字的连接，但不允许客户端之间的连接。您可以选择插件 - 无论是 Flash、Silverlight、Java 还是定制的。
What you can do is use socket.io and emulate that by writing a simple proxy server.
您可以做的是使用 socket.io 并通过编写一个简单的代理服务器来模拟它。
回答by Eugene Mayevski 'Callback
I would like to turn your attention to the fact, that most users nowadays are behind NAT or firewalls, and this means that you can't easily establish incoming connection to user's computer. So your idea would (if ever possible) work only in some cases and will bring extra complexity to your solution. So client-server system with possibly persistent connection (using websockets or socket.io) is a better option.
我想把你的注意力转移到一个事实，现在大多数用户都在 NAT 或防火墙之后，这意味着你不能轻易地建立到用户计算机的传入连接。因此，您的想法（如果可能）仅在某些情况下有效，并且会给您的解决方案带来额外的复杂性。因此，可能具有持久连接的客户端-服务器系统（使用 websockets 或 socket.io）是更好的选择。
