How can I make a browser to browser (peer to peer) connection? [closed]

Question

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.

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.

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.

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

Schizogenesis

WebRTC peer connection without signaling server: blog.printf.net/articles/2013/05/17/… – Laboratory

Also see PeerJS, a project with some traction in this field, which has relatively decent browser support. – Ribonuclease

Simplest way is to use httprelay.io and AJAX calls. It is fast, less than 50ms. – Parbuckle

Answer 1

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

1. Will HTML5 allow web apps to make peer-to-peer HTTP connections?
2. What techniques are available to do P2P in the browser?
3. Does HTML5 Support Peer-to-Peer (and not just WebSockets)
4. Can HTML5 Websockets connect 2 clients (browsers) directly without using a server (P2P)
5. Is it possible to create peer-to-peer connections in a web browser?
6. Do websockets allow for p2p (browser to browser) communication?
7. HTML 5 Peer to Peer Video Possibilities?
8. Is WebRTC implemented in any browsers yet?

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

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

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

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

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

• http://www.webrtc.org/

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

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.

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

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

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: DataChannels are still experimental, but available in current versions of Chrome and Firefox:

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

Sinistrocular

It is 2014 here, Can you update your excellent post with recent progress? – Wallenstein

@Wallenstein webrtc.org/interop is a good place to start. By now Firefox, Chrome and Opera give full support and can interoperate with addequate adapters. – Airlift

Can you please update your excellent post with recent progress ! – Polygraph

I will do it soon! – Sinistrocular

it is 2016 here in Australia. Can we have the latest links for browser peer to peer? – Lalalalage

Yeah, how about that update? – Pion

As of 2017, WebRTC is a standard part of most modern browsers. See https://mcmap.net/q/103413/-will-html5-allow-web-apps-to-make-peer-to-peer-http-connections – Philology

Answers like this that are mostly a list of links are difficult to sort through and not very useful. – Termitarium

It is 2021 here in USA, can you please update the answer with the latest links? – Incommunicable

Answer 2

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.

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

Mcmichael

are you certain that WebSocket doesn't allow direct p2p between 2 browsers? from what says on wikipedia it sounds like it can: "WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It is designed to be implemented in web browsers and web servers, but it can be used by any client or server application." – Dwt

The issue addressed if that you can't have a browser LISTEN / act as a server. You'll be able to communicate with any server in full-duplex, but your consumers can't become servers. Additionally, you'll run into a million issues with firewalls if you could. Emil's solution will work better, albeit slower. – Irresistible

Technically, websockets can be used anywhere. But in browsers, due to security constraints, this will not happen. ghayes explained it. Also, note that this solution will probably be faster, since usually servers are placed in places with huge bandwidth capacities, so your server will handle 100 clients fine, while using real p2p you will saturate the users connection very quickly. – Mcmichael

@Emil Ivanov: It's true what you are saying but if it is just a 1to1 connection it should be faster. – Dwt

Answer 3

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.

Lovato