如何建立浏览器到浏览器(对等连接)连接?

时间：2022-06-26 22:49:47

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.

如何在客户端使用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.

我需要这样做,减少延迟,因为网站需要的输入从一个用户传送到另一个用户尽快从客户机向服务器发送数据,然后客户机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。

3 个解决方案

#1

106  

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

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

  1. Will HTML5 allow web apps to make peer-to-peer HTTP connections?
  2. HTML5允许web应用程序进行点对点HTTP连接吗?
  3. What techniques are available to do P2P in the browser?
  4. 在浏览器中可以使用什么技术来实现P2P ?
  5. Does HTML5 Support Peer-to-Peer (and not just WebSockets)
  6. HTML5支持点对点(不仅仅是WebSockets)吗?
  7. Can HTML5 Websockets connect 2 clients (browsers) directly without using a server (P2P)
  8. HTML5 Websockets可以不用服务器(P2P)直接连接两个客户端(浏览器)吗?
  9. Is it possible to create peer-to-peer connections in a web browser?
  10. 是否可以在web浏览器中创建点对点连接?
  11. Do websockets allow for p2p (browser to browser) communication?
  12. websockets允许p2p(浏览器到浏览器)通信吗?
  13. HTML 5 Peer to Peer Video Possibilities?
  14. HTML 5对等视频的可能性?
  15. Is WebRTC implemented in any browsers yet?
  16. WebRTC在任何浏览器中都实现了吗?

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

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

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:

自从W3C 2009年2月12日工作草案以来，“点对点连接”一节就消失了。但是这个P2P连接并没有消失。它回到了WebRTC(实时通信)规范中的PeerConnection的名称:

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 labs(2011年5月)修改后的WebKit中，它运行得非常好。一些补丁现在在WebKit中(2011年10月-见下文更新):

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

此外，WebRTC项目是由谷歌、Mozilla和Opera共同发起的。因此，他们继续对PeerConnection进行说明:

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

可能Chrome(使用WebKit)将是第一个支持WebRTC与PeerConnection的主要浏览器:

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年1月18日以来，Chrome也支持WebRTC。可以在开发通道(Windows、OSX、Linux)和Canary构建(Windows和OSX)中使用，方法是在chrome:// /flags下启用它。它只支持MediaStream像视频和音频，并且可以通过几个演示进行测试。传输应用程序数据，如字符串/ArrayBuffer/…直到现在才支持。

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

自2012年3月16日以来，WebRTC编辑器的草案分离了一个“点对点数据API”来发送和接收通用应用程序数据(字符串、ArrayBuffer和Blob)。Chromium希望尽快实现Data API(2012年4月10日)。

On April, 3rd, Mozilla published a first working example on WebRTC for Firefox as 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的每夜/极光(2012年12月12日)进行测试:

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

2018年:DataChannels仍处于试验阶段，但目前版本的Chrome和火狐都有:

#2

6  

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)允许在客户端和服务器之间建立一个类似于socket的连接，但是在客户端之间却不行。你的选择是一个插件——不管是Flash, Silverlight, Java还是定制的。

What you can do is use socket.io and emulate that by writing a simple proxy server.

你能做的就是使用插座。通过编写一个简单的代理服务器，io和仿真。

#3

2  

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或firewall后面，这意味着你不能轻易地建立与用户计算机的连接。因此，您的想法(如果可能的话)只在某些情况下有效，并将给您的解决方案带来额外的复杂性。因此，具有可能的持久连接(使用websockets或socket.io)的客户机-服务器系统是一个更好的选择。

#1

106  

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

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

  1. Will HTML5 allow web apps to make peer-to-peer HTTP connections?
  2. HTML5允许web应用程序进行点对点HTTP连接吗?
  3. What techniques are available to do P2P in the browser?
  4. 在浏览器中可以使用什么技术来实现P2P ?
  5. Does HTML5 Support Peer-to-Peer (and not just WebSockets)
  6. HTML5支持点对点(不仅仅是WebSockets)吗?
  7. Can HTML5 Websockets connect 2 clients (browsers) directly without using a server (P2P)
  8. HTML5 Websockets可以不用服务器(P2P)直接连接两个客户端(浏览器)吗?
  9. Is it possible to create peer-to-peer connections in a web browser?
  10. 是否可以在web浏览器中创建点对点连接?
  11. Do websockets allow for p2p (browser to browser) communication?
  12. websockets允许p2p(浏览器到浏览器)通信吗?
  13. HTML 5 Peer to Peer Video Possibilities?
  14. HTML 5对等视频的可能性?
  15. Is WebRTC implemented in any browsers yet?
  16. WebRTC在任何浏览器中都实现了吗?

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

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

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:

自从W3C 2009年2月12日工作草案以来，“点对点连接”一节就消失了。但是这个P2P连接并没有消失。它回到了WebRTC(实时通信)规范中的PeerConnection的名称:

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 labs(2011年5月)修改后的WebKit中，它运行得非常好。一些补丁现在在WebKit中(2011年10月-见下文更新):

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

此外，WebRTC项目是由谷歌、Mozilla和Opera共同发起的。因此，他们继续对PeerConnection进行说明:

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

可能Chrome(使用WebKit)将是第一个支持WebRTC与PeerConnection的主要浏览器:

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年1月18日以来，Chrome也支持WebRTC。可以在开发通道(Windows、OSX、Linux)和Canary构建(Windows和OSX)中使用，方法是在chrome:// /flags下启用它。它只支持MediaStream像视频和音频，并且可以通过几个演示进行测试。传输应用程序数据，如字符串/ArrayBuffer/…直到现在才支持。

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

自2012年3月16日以来，WebRTC编辑器的草案分离了一个“点对点数据API”来发送和接收通用应用程序数据(字符串、ArrayBuffer和Blob)。Chromium希望尽快实现Data API(2012年4月10日)。

On April, 3rd, Mozilla published a first working example on WebRTC for Firefox as 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的每夜/极光(2012年12月12日)进行测试:

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

2018年:DataChannels仍处于试验阶段，但目前版本的Chrome和火狐都有:

#2

6  

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)允许在客户端和服务器之间建立一个类似于socket的连接，但是在客户端之间却不行。你的选择是一个插件——不管是Flash, Silverlight, Java还是定制的。

What you can do is use socket.io and emulate that by writing a simple proxy server.

你能做的就是使用插座。通过编写一个简单的代理服务器，io和仿真。

#3

2  

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或firewall后面，这意味着你不能轻易地建立与用户计算机的连接。因此，您的想法(如果可能的话)只在某些情况下有效，并将给您的解决方案带来额外的复杂性。因此，具有可能的持久连接(使用websockets或socket.io)的客户机-服务器系统是一个更好的选择。

标签：

相关文章