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

html title attribute

Question

¿Cómo puedo escribir un sitio web usando HTML5 , CSS y JavaScript en el lado del cliente que permita la conexión tcp / ip directa entre los navegadores del cliente una vez que se carga la página .

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, por lo que enviar datos del cliente A al servidor y luego al cliente B no es bueno. opción.

Leí publicaciones anteriores sobre este tema, pero no había ninguna solución / ejemplos disponibles que pudiera 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 hay varios temas sobre las conexiones P2P en los navegadores:

1. ¿Permitirá HTML5 que las aplicaciones web establezcan conexiones HTTP punto a punto?
2. ¿Qué técnicas están disponibles para hacer P2P en el navegador?
3. ¿Admite HTML5 Peer-to-Peer (y no solo WebSockets)?
4. ¿Pueden los Websockets HTML5 conectar 2 clientes (navegadores) directamente sin usar un servidor (P2P)?
5. ¿Es posible crear conexiones punto a punto en un navegador web?
6. ¿Los websockets permiten la comunicación p2p (navegador a navegador)?
7. HTML 5 ¿Posibilidades de video de igual a igual?
8. ¿Ya se implementó WebRTC en cualquier navegador?

Como se mencionó en la mayoría de los temas, los dos borradores de trabajo de HTML5 de 2008 tenían 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 el Borrador de Trabajo del W3C del 12 de febrero de 2009 , desapareció la sección "Conexiones punto a punto". Pero esta conexión P2P no se ha ido. Vuelve con el nombre PeerConnection dentro de las especificaciones de WebRTC (Real-Time Communications):

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (Borrador del editor de W3C)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection ( desde el 5 de diciembre de 2011 remitido al borrador del editor de W3C )

Desde el 31 de octubre de 2011, el borrador del editor del W3C es un borrador 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 actualizaciones a continuación!):

• 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, continúan la especificación en PeerConnection:

• http://www.webrtc.org/

Probablemente Chrome (use WebKit) sea el primer navegador importante que soporte 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 también brinda soporte a WebRTC . Se puede usar en el canal Dev (Windows, OSX, Linux) y en la versión Canary (Windows y OSX) habilitándolo en chrome://flags . Solo es compatible con MediaStream como video y audio, y se puede probar con varias Demos . La transferencia de datos de aplicaciones como String / ArrayBuffer / ... no es compatible hasta ahora.

Desde el 16 de marzo de 2012, el borrador del editor de WebRTC separa una "API de datos punto a punto" para enviar y recibir datos de aplicaciones genéricas ( String , ArrayBuffer y Blob ). Chromium quiere implementar la API de datos pronto (10 de abril de 2012).

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

DataChannel está previsto para la versión 25 de Chrome, detrás de una bandera, mientras tanto se puede probar en Firefox Nightly / Aurora (12 de diciembre de 2012):

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

2018: DataChannels aún son experimentales, pero están disponibles en las versiones actuales de Chrome y Firefox:

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

Answer 2

Me gustaría centrar su atención en el hecho de que la mayoría de los usuarios están actualmente 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.

Answer 3

Tendré que decepcionarte, 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.