How can I make a browser to browser (peer-to-peer) connection?

Question

How can I write a site using HTML5, CSS and JavaScript on the client side that will allow a direct tcp / ip connection between client browsers after the page loads .

I need to do this in order to reduce latency, since the site will require that the input from one of the users be transferred to the other user as soon as possible, so sending data from client A to the server and then to client B is not a good option.

I read previous posts on this, but there were no working solutions / examples that I could find. From what I read, a direct connection between clients can be made using plugins like Silverlight, Java or Flash.

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

Answer 1

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

• Will HTML5 allow web applications to create peer-to-peer HTTP connections?
• What methods are available for P2P in the browser?
• Does HTML5 support peer-to-peer (not just web sockets)
• Can HTML5 Websockets directly connect 2 clients (browsers) without using a server (P2P)
• Is it possible to create peer-to-peer connections in a web browser?
• Do websites allow p2p messaging (browser in browser)?
• HTML 5 Equal Opportunity Video
• Is WebRTC implemented in any browsers?

As mentioned in most deadlocks, both HTML5 projects running in HTML5 had a peer-to-peer section:

• 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 was February 12, 2009, the Peer to Peer section has disappeared. But this P2P connection has not disappeared. It returns under the name PeerConnection in the WebRTC (Real-Time Communications) specifications:

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (W3C editor project)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection ( Since December 5, 2011 redirected to the W3C Draft editor )

Since October 31, 2011, the W3C Editor’s project is an official working draft:

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

The only PeerConnection (UDP-based) implementation exists in Ericsson's modified WebKit labs (May 2011), which works quite well. Some fixes are in WebKit now (October 2011 - see Updates below!):

• https://labs.ericsson.com/apis/web-real-time-communication/
• https://labs.ericsson.com/developer-community/blog/update-webkit-contributions

In addition, the WebRTC initiative is a project of Google, Mozilla and Opera. Thus, they continue the specification for PeerConnection:

• http://www.webrtc.org/

Chrome (using WebKit) may be the first major browser to support 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

Starting January 18, 2012, Chrome also supports WebRTC . It can be used in the Dev channel (Windows, OSX, Linux) and Canary build (Windows and OSX) by including it under chrome://flags . It only supports MediaStream as video and audio and can be tested with several Demos . Passing application data such as String / ArrayBuffer / ... is not supported so far.

Since March 16, 2012, the WebRTC editor project shares the “Peer-to-peer Data API” for sending and receiving common application data ( String , ArrayBuffer and Blob ). Chromium wants to implement the data API in the near future (April 10, 2012).

On April 3, Mozilla published the first working WebRTC example for Firefox .

The DataChannel is scheduled for version 25 of Chrome, behind the flag, in the meantime, it can be tested in Firefox Nightly / Aurora (December 12, 2012):

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

Answer 2

I will have to disappoint you - currently this is not possible using just JavaScript. Websockets (and Socket.IO) allow a socket-like connection between the client and server, but not between the clients. Your option is a plugin - be it Flash, Silverlight, Java or custom.

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

Answer 3

I would like to draw your attention to the fact that most users are currently behind NAT or firewalls, which means that you cannot easily establish an incoming connection to a user computer. Thus, your idea (if at all possible) will work only in some cases and will add additional complexity to your decision. Thus, a client-server system with possible permanent connection (using websockets or socket.io) is the best option.