¿Cómo puedo hacer una conexión de navegador a navegador (peer to peer)?

Question

¿Cómo puedo escribir un sitio web utilizando HTML 5 , CSS y JavaScript el lado del cliente que permitirá la conexión directa TCP/IP entre los exploradores de los clientes una vez que la página se carga.

Necesito hacer esto para reducir la latencia ya que el sitio requerirá que la entrada de uno de los usuarios se transmita al otro usuario tan pronto como sea posible enviando datos del cliente A al servidor y luego al cliente B no es una buena opción

He leído publicaciones anteriores sobre este tema, pero no había ninguna solución de trabajo/ejemplos disponibles que pude encontrar. Según lo que leí, la conexión directa entre clientes se puede hacer usando complementos como Silverlight, Java o Flash.

¿Hay alguna solución que no requiera complementos? Me gustaría usar solo JavaScript.

Answer 1

Aquí en Stackoverflow son varios temas sobre las conexiones P2P en los navegadores:

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?

Como se menciona en la mayoría de los topicts, tanto en 2008 borradores HTML5 de trabajo estaban teniendo una sección "Conexiones punto a punto":

• 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

Desde th e W3C Working Draft 12 February 2009 desapareció la sección "Conexiones punto a punto". Pero esta conexión P2P no se ha ido.Es de nuevo bajo el PeerConnection nombre dentro de las especificaciones (Real-Time Communications) WebRTC:

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (Proyecto del W3C Editor)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection (Since 5th December 2011 forwarded to W3C Editor's Draft)

Desde el 31 de octubre de 2011, el Editor de W3C de proyecto es un proyecto de trabajo oficial:

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

La única implementación de PeerConnection (basada en UDP) existe en el WebKit modificado por los laboratorios Ericsson (mayo de 2011), que funciona bastante bien. Algunos parches están en WebKit ahora (octubre de 2011 - ver las actualizaciones de abajo!):

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

Además, la iniciativa WebRTC es un proyecto de Google, Mozilla y Opera. Por lo tanto, ellos siguen la especificación de PeerConnection:

• http://www.webrtc.org/

Probablemente Chrome (utiliza WebKit) será el primer navegador importante apoyo WebRTC con 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

Desde el 18 de enero de 2012, Chrome is supporting WebRTC as well. Se puede usar en el Dev channel (Windows, OSX, Linux) and the Canary build (Windows and OSX) por enabling it under chrome://flags. Solo es compatible con MediaStream como Video y audio y se puede probar con varios Demos. La transferencia de datos de la aplicación como String/ArrayBuffer/... no es compatible hasta ahora.

Desde 16th March 2012, the WebRTC Editor's Draft separa una "Peer-to-peer Data API" para enviar y recibir datos de aplicación genéricos (String, ArrayBuffer y Blob). Chromium wants to implement the Data API soon (10 de abril de 2012).

El 3 de abril, Mozilla publicó un primer ejemplo de trabajo en WebRTC for Firefox también.

DataChannel está prevista para la versión 25 de Chrome, detrás de una bandera, por su parte puede ser probado en Firefox Nightly/Aurora (12ª diciembre de 2012):

conexión entre pares
• http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS

Answer 2

Te tendré que decepcionar, esto actualmente no es posible con solo JavaScript. Websockets (y Socket.IO) permiten una conexión tipo socket entre el cliente y el servidor, pero no entre clientes. Su opción es un complemento, ya sea Flash, Silverlight, Java o hecho a medida.

Lo que puede hacer es usar socket.io y emular eso escribiendo un servidor proxy simple.

Answer 3

Me gustaría llamar su atención sobre el hecho de que la mayoría de los usuarios de hoy en día están detrás de NAT o firewalls, y esto significa que no puede establecer fácilmente la conexión entrante a la computadora del usuario. De modo que su idea (si es que alguna vez fuera posible) funcionaría solo en algunos casos y aportaría una complejidad adicional a su solución. Entonces, el sistema cliente-servidor con una conexión posiblemente persistente (usando websockets o socket.io) es una mejor opción.