Comment établir une connexion de navigateur à navigateur (peer to peer) ?

Question

Comment puis-je écrire un site web en utilisant HTML5 , CSS y JavaScript du côté client qui permettra connexion directe tcp/ip entre les navigateurs clients une fois la page chargée .

J'ai besoin de faire cela pour réduire la latence car le site exigera que l'entrée d'un des utilisateurs soit transmise à l'autre utilisateur dès que possible. Envoyer des données du client A au serveur puis au client B n'est pas une bonne option.

J'ai lu les messages précédents sur ce sujet, mais je n'ai trouvé aucune solution/exemple fonctionnel. D'après ce que j'ai lu, la connexion directe entre les clients peut être faite en utilisant des plugins comme Silverlight, Java ou Flash.

Existe-t-il une solution qui ne nécessite pas de plugins ? Je voudrais utiliser uniquement JavaScript.

Answer 1

Sur Stackoverflow, il y a plusieurs sujets sur les connexions P2P dans les navigateurs :

1. Le HTML5 permettra-t-il aux applications web d'établir des connexions HTTP de type peer-to-peer ?
2. Quelles sont les techniques disponibles pour faire du P2P dans le navigateur ?
3. HTML5 supporte-t-il le peer-to-peer (et pas seulement les WebSockets) ?
4. Les Websockets HTML5 peuvent-elles connecter 2 clients (navigateurs) directement sans utiliser de serveur (P2P) ?
5. Est-il possible de créer des connexions peer-to-peer dans un navigateur web ?
6. Les websockets permettent-ils la communication p2p (de navigateur à navigateur) ?
7. HTML 5 Possibilités de vidéo Peer to Peer ?
8. WebRTC est-il déjà implémenté dans les navigateurs ?

Comme cela a été mentionné dans la plupart des sujets, les deux ébauches de travail du HTML5 2008 comportaient une section "Connexions de pair à pair" :

• 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

Depuis le Projet de travail du W3C 12 février 2009 la section "connexions peer-to-peer" a disparu. Mais cette connexion P2P n'a pas disparu. Elle est de retour sous le nom de PeerConnection dans les spécifications WebRTC (Real-Time Communications) :

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (Projet de l'éditeur du W3C)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection ( Depuis le 5 décembre 2011, transmis au W3C Editor's Draft )

Depuis le 31 octobre 2011, le projet de l'éditeur du W3C est un projet de travail officiel :

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

La seule implémentation de PeerConnection (basée sur UDP) existe dans le WebKit modifié par les laboratoires Ericsson (mai 2011), qui fonctionne assez bien. Certains correctifs sont dans WebKit maintenant (Oct. 2011 -- voir les mises à jour ci-dessous !):

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

En outre, l'initiative WebRTC est un projet de Google, Mozilla et Opera. Ainsi, ils poursuivent la spécification sur PeerConnection :

• http://www.webrtc.org/

Chrome (qui utilise WebKit) sera probablement le premier grand navigateur à prendre en charge WebRTC avec 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

Depuis le 18 janvier 2012, Chrome prend également en charge WebRTC . Il peut être utilisé dans le Canal Dev (Windows, OSX, Linux) et la version Canary (Windows et OSX) par le permettant sous chrome://flags . Il ne prend en charge que MediaStream comme la vidéo et l'audio et peut être testé avec plusieurs Démos . Transfert de données d'application comme String / ArrayBuffer /... n'est pas pris en charge jusqu'à présent.

Depuis 16 mars 2012, le projet de rédaction du WebRTC sépare un "API de données pair-à-pair" pour envoyer et recevoir des données d'application génériques ( String , ArrayBuffer y Blob ). Chromium veut implémenter l'API de données bientôt (10 avril 2012).

Le 3 avril, Mozilla a publié un premier exemple de fonctionnement sur WebRTC pour Firefox également.

DataChannel est prévu pour la version 25 de Chrome, derrière un drapeau, en attendant il peut être testé dans Firefox Nightly/Aurora (12 décembre 2012) :

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

2018 : Les DataChannels sont encore expérimentaux, mais disponibles dans les versions actuelles de Chrome et Firefox :

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

Answer 2

Je vais devoir vous décevoir - ce n'est actuellement pas possible avec seulement JavaScript. Les websockets (et Socket.IO) permettent une connexion de type socket entre le client et le serveur, mais pas entre les clients. Votre option est un plugin - qu'il soit Flash, Silverlight, Java ou personnalisé.

Ce que vous pouvez faire, c'est utiliser socket.io et émuler cela en écrivant un simple serveur proxy.

Answer 3

Je voudrais attirer votre attention sur le fait que la plupart des utilisateurs sont aujourd'hui derrière des NAT ou des pare-feu, ce qui signifie que vous ne pouvez pas facilement établir une connexion entrante avec l'ordinateur de l'utilisateur. Votre idée ne fonctionnerait donc (si elle est possible) que dans certains cas et rendrait votre solution encore plus complexe. Un système client-serveur avec éventuellement une connexion persistante (en utilisant websockets ou socket.io) est donc une meilleure option.