93

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.

johnnyRose
  • 7,310
  • 17
  • 40
  • 61
Răzvan Flavius Panda
  • 21,730
  • 17
  • 111
  • 169
  • 3
    WebRTC peer connection without signaling server: http://blog.printf.net/articles/2013/05/17/webrtc-without-a-signaling-server/ – danijar Nov 06 '13 at 22:10
  • 1
    Also see [PeerJS](http://peerjs.com/), a project with some traction in this field, which has relatively decent [browser support](http://peerjs.com/status/). – Boaz Mar 24 '15 at 16:54
  • 1
    Simplest way is to use http://httprelay.io and AJAX calls. It is fast, less than 50ms. – Jonas Apr 24 '17 at 14:41

3 Answers3

138

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

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:

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

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

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

Probably Chrome (uses WebKit) will be the first major browser supporting WebRTC with 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.

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

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

Dennis
  • 4,011
  • 7
  • 36
  • 50
5

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.

Emil Ivanov
  • 37,300
  • 12
  • 75
  • 90
  • 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." – Răzvan Flavius Panda Aug 11 '11 at 07:42
  • 6
    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. – hayesgm Aug 11 '11 at 07:48
  • 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. – Emil Ivanov Aug 11 '11 at 07:56
  • @Emil Ivanov: It's true what you are saying but if it is just a 1to1 connection it should be faster. – Răzvan Flavius Panda Aug 11 '11 at 11:25
4

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.

Eugene Mayevski 'Callback
  • 45,135
  • 8
  • 71
  • 121