如何建立浏览器到浏览器(点对点)的连接? [英] How can I make a browser to browser (peer to peer) connection?

问题描述

如何在客户端使用 HTML5、CSS 和 JavaScript 编写一个允许 直接 tcp/ip 连接的网站加载页面后在客户端浏览器之间.

How can I write a website using HTML5, CSS and JavaScript on client side that will allow direct tcp/ip connection between the client browsers once the page is loaded.

我需要这样做以减少延迟，因为该站点将要求尽快将来自一个用户的输入传输到另一个用户，因此将数据从客户端 A 发送到服务器，然后再发送到客户端 B 是不是一个好选择.

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.

我阅读了有关此主题的以前的帖子，但我找不到可用的可行解决方案/示例.据我所知，客户端之间的直接连接可以使用 Silverlight、Java 或 Flash 等插件建立.

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.

有没有不需要插件的解决方案?我只想使用 JavaScript.

Is there any solution that would not require plugins? I would like to use only JavaScript.

推荐答案

Stackoverflow 上有几个关于浏览器中 P2P 连接的主题:

Here on Stackoverflow are several topics about P2P connections in browsers:

1. HTML5 是否允许网络应用建立点对点 HTTP 连接?
2. 有哪些技术可以在浏览器?
3. HTML5 是否支持点对点 (而不仅仅是 WebSockets)
4. HTML5 Websockets 可以连接 2不使用服务器 (P2P) 直接使用客户端(浏览器)
5. 有可能吗在网络浏览器中创建点对点连接?
6. websockets 是否允许 p2p(浏览器到浏览器)通信?
7. HTML 5 点对点视频可能性?
8. WebRTC 是否已在任何浏览器中实现?

正如在大多数主题中提到的，2008 年 HTML5 工作草案都有一个点对点连接"部分:

As mentioned in most of the topicts, both 2008 HTML5 working drafts were having a section "Peer-to-peer connections":

• 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

自 W3C 工作草案 2009 年 2 月 12 日 部分点对点连接"消失了.但是这个 P2P 连接并没有消失.它在 WebRTC(实时通信)规范中以 PeerConnection 的名称重新命名:

Since the W3C Working Draft 12 February 2009 the 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:

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection(W3C 编辑草案)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection(自 12 月 5 日起2011 转发给 W3C Editor's Draft)

• 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)

自 2011 年 10 月 31 日起，W3C 编辑草案成为正式工作草案:

Since 31 October 2011, the W3C Editor's Draft is an official Working draft:

• http://www.w3.org/TR/2011/WD-webrtc-20111027/#peerconnection

PeerConnection(基于 UDP)的唯一实现存在于 Ericsson 实验室(2011 年 5 月)修改的 WebKit 中，它运行良好.现在 WebKit 中有一些补丁(2011 年 10 月 - 请参阅下面的更新！):

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!):

• https://labs.ericsson.com/apis/web-real-时间通讯/
• https://labs.ericsson.com/developer-community/博客/update-webkit-contributions

此外，WebRTC 计划是 Google、Mozilla 和 Opera 的一个项目.因此，他们继续对 PeerConnection 进行规范:

Additionally, the WebRTC initiative is a project by Google, Mozilla and Opera. Thus, they are continuing the specification on PeerConnection:

• http://www.webrtc.org/

可能 Chrome(使用 WebKit)将成为第一个通过 PeerConnection 支持 WebRTC 的主要浏览器:

Probably Chrome (uses WebKit) will be the first major browser supporting WebRTC with PeerConnection:

• 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

自 2012 年 1 月 18 日起，Chrome 也支持 WebRTC.它可以用于 Dev 频道(Windows、OSX、Linux)和 Canary 构建(Windows和 OSX) 通过 在 chrome://flags 下启用它一>.它只支持像视频和音频这样的 MediaStream，并且可以使用多个 演示.像 String/ArrayBuffer/... 这样的应用程序数据传输目前还不支持.

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 MediaStream like Video and audio and can be tested with several Demos. Transferring application data like String/ArrayBuffer/... is not supported until now.

自 2012 年 3 月 16 日起，WebRTC 编辑器草案分离"点对点Data API" 用于发送和接收通用应用程序数据(String、ArrayBuffer 和 Blob).Chromium 希望尽快实施数据 API(2012 年 4 月 10 日).

Since 16th March 2012, the WebRTC Editor's Draft separates a "Peer-to-peer Data API" to send and receive generic application data (String, ArrayBuffer and Blob). Chromium wants to implement the Data API soon (10th April 2012).

4 月 3 日，Mozilla 在 适用于 Firefox 的 WebRTC.

On April, 3rd, Mozilla published a first working example on WebRTC for Firefox as well.

DataChannel 计划用于 Chrome 的第 25 版，在一个标志后面，同时它可以在 Firefox Nightly/Aurora(2012 年 12 月 12 日)中进行测试:

DataChannel is planned for version 25 of Chrome, behind a flag, meanwhile it can be tested in Firefox Nightly/Aurora (12th December 2012):

• http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS

2018 年:DataChannel 仍处于实验阶段，但可用于当前版本的 Chrome 和 Firefox:

2018: DataChannels are still experimental, but available in current versions of Chrome and Firefox:

• https://developer.mozilla.org/en-US/文档/Web/API/RTCDataChannel

这篇关于如何建立浏览器到浏览器(点对点)的连接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！