[HTML 5] [Article] Un chat en HTML5 avec les websockets

[ornitho13]

Bonjour à tous,

voici un tutoriel sur la création d'un chat en HTML5 s'appuyant sur les websockets.
Comme d'habitude, n'hésitez pas à faire part de vos remarques et questions à la suite de ce message.

un chat en HTML5 avec les websockets

Merci!

[graphiks]

Bonjour

Très bon tutoriel merci.
C'est plus un exemple concret d'utilisation, mais il me convient très bien !

[Lovmy]

Bonjour,

Pas mal, mais on peut déjà faire cela avec une applet java.
Sinon, le principale problème c'est que je doute que cela passe via un proxy, ce qui avantage ajax et le http en général.
De plus, on peut facilement crypté les données en https via ajax, mais la il faut reimplémenter le cryptage dans la connexion par socket.
Le gain de vitesse due à l'absence d'entête HTTP est-il vraiment conséquent ?

J'ai l'impression que l'on revient de plus en plus à ce qui se faisait avant. On est parti des sockets TCP, on a ajouté une couche http, puis on est passé par ajax (qui n'est rien d'autre que le fait d'envoyer des requètes http en javascript) pour maintenant revenir aux socket TCP...

Cordialement.

[thelvin]

Envoyé par Lovmy

Pas mal, mais on peut déjà faire cela avec une applet java.

Euh ? Possible... Dans ce cas, ça peut sûrement aussi se faire en Flash et en SilverLight. Avec dans les 3 cas l'inconvénient de devoir intégrer son HTML avec ces technologies, alors qu'on s'en passerait bien. HTML5 inclut les WebSockets, la manière de l'intégrer fait partie de lui.

Envoyé par Lovmy

Sinon, le principale problème c'est que je doute que cela passe via un proxy, ce qui avantage ajax et le http en général.

Il y en a pas mal avec lesquels ça passe pas. Mais si les websockets se répandaient, les proxies seraient obligés d'évoluer pour les gérer.

Envoyé par Lovmy

De plus, on peut facilement crypté les données en https via ajax, mais la il faut reimplémenter le cryptage dans la connexion par socket.

ws:// pour le non-crypté, wss:// pour une connexion TLS -_-°. Ils sont pas deubeux, hein...

Envoyé par Lovmy

Le gain de vitesse due à l'absence d'entête HTTP est-il vraiment conséquent ?

Ça va bien au-delà de ça. Une socket est une communication bidirectionnelle entre le client et le serveur, qui reste ouverte. Il peuvent se parler l'un à l'autre à tout moment.

Quand le serveur reçoit de nouveaux message, il peut les pousser immédiatement à tous les clients, de sa propre initiative.
Avec HTTP, qui ne permet qu'aux clients de parler au serveur et pas l'inverse, il n'y a que deux façons de le faire :
-#1 Le client demande toutes les deux secondes au serveur s'il n'y a pas de nouveaux messages. Franchement, les routeurs n'ont pas que ça à foutre.
-#2 Le serveur renvoie un flux de longueur infinie, et quand il n'a rien à envoyer, il dit simplement que le reste est en cours de transmission, jusqu'à ce qu'il ait quelque chose à envoyer. La chaîne d'outils prévue pour HTTP n'est pas du tout habituée à ça et ça pose plein de problèmes. Bien sûr, en théorie c'est pas plus facile de faire gérer un nouveau protocole qu'une nouvelle façon de traiter certaines connexions HTTP. Mais en pratique, ça sépare les choses plus clairement, et puis, de toute façon, ce truc n'est qu'un bricolage pour pallier l'absence de sockets.

Bref, le gain, c'est d'éviter de faire des allez-et-retour inutiles, et de manière générale, de gérer la communication client-serveur comme elle doit l'être, évitant ainsi de jeter la confusion (et donc la malfonction) dans les outils.

Envoyé par Lovmy

J'ai l'impression que l'on revient de plus en plus à ce qui se faisait avant. On est parti des sockets TCP, on a ajouté une couche http, puis on est passé par ajax (qui n'est rien d'autre que le fait d'envoyer des requètes http en javascript) pour maintenant revenir aux socket TCP...

Oui. Le web et le monde évolue, les objectifs de départ étaient assez simples et suffisants, mais dans le tout-multimédia on repense les choses, tout en appréciant le web existant et en refusant de le jeter d'un coup.
L'évolution est tentée à petits pas, avec compatibilité ascendante.
Plus tard, on peut tout-à-fait imaginer que les sites webs communiqueront avec un navigateur avec une seule connexion bidirectionnelle type websocket pour tous les besoins, envoyant selon les demandes des pages HTML ou ce qui doit y être ajouté/enlevé/remplacé.

[HaldriX]

Bonjour Messieurs,

Est-ce que l'un d'entre vous a testé ce script sous Firefox ? Après avoir au préalable modifié l'appel client webSocket en :

Code :

1
2
3
 
if(window.MozWebSocket)
      WebSocket=window.MozWebSocket

J'ai la version 8, websocket activé par défaut.
Globalement à chaque fois que j'essaye de dev/tester un script faisant appel aux websockets les résultats entre FF et Chrome vont toujours dans le sens de Chrome. Presque à chaque fois Firefox ferme le socket au bout de quelques secondes...

Des idées ?

Merci.

[cedk06]

Bon alors, pour commencer, oui FF préfixe le websocket. J'ai donc ajouter en début du script websocket.js la ligne suivante pour compatibilité :

Code :

window.WebSocket = window.WebSocket || window.MozWebSocket;

Par contre, le client ne fonctionne pas, et c'est général à tous les exemples que j'ai essayés.
Firebug me renvoie :

Code :

Firefox ne peut établir de connexion avec le serveur à l'adresse ws://localhost:11345/serveur.php

Voici le log de la console :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Server Started : 2011-11-25 14:44:58
Master socket  : Resource id #5
Listening on   : localhost port 11345
 
Resource id #6 CONNECTED!
 
Requesting handshake...
GET /serveur.php HTTP/1.1
Host: localhost:11345
User-Agent: Mozilla/5.0 (X11; Linux i686; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive, Upgrade
Sec-WebSocket-Version: 8
Sec-WebSocket-Origin: http://localhost
Sec-WebSocket-Extensions: deflate-stream
Sec-WebSocket-Key: y/5oYNSQLP7IEipzpa1P7w==
Cookie: PHPSESSID=km8t3le1ajm9ejt5spagknep51; connexion[alias]=cedrik; connexion[profiluser]=mediaadmin; connexion[accueil]=%2Fmain%2Fservices.php5; connexion[alarmes]=0; connexion[tchat]=1
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
 
 
Handshaking...
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://localhost
Sec-WebSocket-Location: ws://localhost:11345/serveur.php
 
)0(+r����4�V�I
Done handshaking...
Resource id #6 DISCONNECTED!

J'imagine que c'est un problème de firefox ???

Si quelqu'un peut m'aider : merci !

Cédrik

[Seb33300]

Je n'arrive pas non plus à faire fonctionner le script donné que ce soit sous Firefox (patché avec window.WebSocket = window.WebSocket || window.MozWebSocket; ) ou sous Chrome

Meme probleme que cedk06 ça se termine en
Resource id #6 DISCONNECTED!

Lorsque le client ouvre la page.

[floysand]

Je désespère de faire fonctionner ce chat.
Le serveur se lance ; mais, je ne peux pas envoyer de message.
J'ai téléchargé le package.
Après un essai infructueux avec Wamp.
J'utilise xamp. et le navigateur Chrome.
J'attends de l'aide.
Merci.

[thelvin]

Envoyé par floysand

J'attends de l'aide.

Tu vas l'attendre longtemps, tu n'as même pas dit quel est le problème.

"Je ne peux pas envoyer de message" mais encore ? Ça bloque où, de quel côté et à quelle couche ? Comment tu le sais ?

[sergeh]

Bonjour tout le monde,

Déjà, merci pour le tutoriel mis en ligne !!!

Sinon, j'ai un peu la même chose que cedk06 avec Chrome 16 :

Resource id #9 CONNECTED!

Requesting handshake...
GET /serveur.php HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: localhost:11345
Origin: http://127.0.0.1
Sec-WebSocket-Key: pgQ4I91u7XPWP2RAVffdmg==
Sec-WebSocket-Version: 13


Handshaking...
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://127.0.0.1
Sec-WebSocket-Location: ws://localhost:11345/serveur.php

)0(+rþ↑ø»Ï⌂4¢VÂI
Done handshaking...
Resource id #9 DISCONNECTED!

Est-ce que quelqu'un sait d'où viennent ces hiéroglyphes et pourquoi ça se déconnecte aussi tôt ?

Merci !!

=========================================================

J'édite pour rajouter des infos.
Avec l'inspector de Google Chrome et en rajoutant des logs ici et là, il me semble voir apparaitre une erreur où Chrome signale ne pas trouver le Sec-WebSocket-Accept; et juste après ça déconnecte.

Alors j'ai édité le fichier WebSocketHandshake.class.php pour rajouter la ligne du Sec-WebSocket-Accept en rapport à la valeur de Sec-WebSocket-Key. Et depuis, Chrome dit que ça matche pas. Pourtant, j'ai bien respecté la le descriptif de l'IETF (section 5.2.2.3.2).
Voir aussi la RFC 6455 [Page 7].

Voici la nouvelle portion de code pour le constructeur de la classe WebSocketHandshake :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function __construct($buffer) {
        $resource = $host = $origin = $key = $key1 = $key2 = $protocol = $code = $handshake = null;
        preg_match('#GET (.*?) HTTP#', $buffer, $match) && $resource = $match[1];
        preg_match("#Host: (.*?)\r\n#", $buffer, $match) && $host = $match[1];
        preg_match("#Sec-WebSocket-Key: (.*?)\r\n#", $buffer, $match) && $key = $match[1];
        preg_match("#Sec-WebSocket-Key1: (.*?)\r\n#", $buffer, $match) && $key1 = $match[1];
        preg_match("#Sec-WebSocket-Key2: (.*?)\r\n#", $buffer, $match) && $key2 = $match[1];
        preg_match("#Sec-WebSocket-Protocol: (.*?)\r\n#", $buffer, $match) && $protocol = $match[1];
        preg_match("#Origin: (.*?)\r\n#", $buffer, $match) && $origin = $match[1];
        preg_match("#\r\n(.*?)\$#", $buffer, $match) && $code = $match[1];
        $this->__value__ =
            "HTTP/1.1 101 WebSocket Protocol Handshake\r\n".
            "Upgrade: WebSocket\r\n".
            "Connection: Upgrade\r\n".
			"Sec-WebSocket-Accept: ".base64_encode (SHA1 ($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))."\r\n".
            "Sec-WebSocket-Origin: {$origin}\r\n".
            "Sec-WebSocket-Location: ws://{$host}{$resource}\r\n".
            ($protocol ? "Sec-WebSocket-Protocol: {$protocol}\r\n" : "").
            "\r\n".
            $this->_createHandshakeThingy($key1, $key2, $code)
        ;
    }

J'ai pas plus d'idées pour le moment ... Et vous ?

[floysand]

J'ai exactement le même problème, les mêmes messages que sergeh.

Je lance le serveur dans une fenêtre Windows en mode console.

Resource id #6 CONNECTED!
....
Resource id #6 DISCONNECTED!

Je lance ensuite l'application sous le navigateur Chrome.
Lorsque je tape un pseudo, j'ai le message :
websocket init

Lorsque j'écris un message dans la zone de saisie en bas et que je valide, j'ai le message :
websocket message send

Mais, en fait, rien ne se passe. Le message n'apparaît pas dans la fenêtre centrale. C'est normal, le serveur s'est déconnecté !
D'autre part, je souhaiterais avoir deux fenêtres pour dialoguer ; mais, je n'y arrive pas.
J'attends de l'aide.
Merci d'avance.

[floysand]

Ce tutoriel sur la création d'un chat en HTML5 avec les websockets m'a beaucoup intéressé ; il est bien expliqué.
Cette idée me plaisait ; mais, je bloque toujours ; j'ai le serveur qui se lance puis se déconnecte.
Au niveau du client, je tape des messages, mais ils ne sont pas envoyés.
Quelqu'un a-t-il réussi à le faire fonctionner.
Sur quelle plateforme ?
Je suis sur Windows XP, avec serveur Apache, navigateur Google chrome.
Merci pour votre collaboration.

[floysand]

Quelqu'un a-t-il réussi à faire fonctionner ce chat ?
Merci de votre réponse.

[brian85]

Bonjour, merci pour ce tuto mais j'ai aussi le même problème sous chrome qui me dit dans la console:
Error during WebSocket handshake : 'Sec-WebSocket-Accept' header is missing

Alors bon un petit up pour faire avancer le schimlblik car vraiment la possibilité de faire du push dans mon appli serait la bienvenue et révolutionne à mon sens le web.
Sinon je vais être obligé de me rabattre sur un appel ajax toutes les x secondes et pis c'est vraiment pas élégant !

maj: je vous livre le contenu de la console du serveur lors de l'affichage du client

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
D:\wamp\bin\php\php5.2.6>php -q d:\wamp\www\cerf\Tests1\websockets\classes\serveur.php
Server Started : 2012-02-23 14:37:05
Master socket  : Resource id #5
Listening on   : 192.168.0.1 port 11345
 
Resource id #6 CONNECTED!
 
Requesting handshake...
GET /Tests1/websockets/classes/serveur.php HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 192.168.0.1:11345
Origin: https://intranet
Sec-WebSocket-Key: r7cTcNUADjYhZj1cIxqo2Q==
Sec-WebSocket-Version: 13
 
 
Handshaking...
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: https://intranet
Sec-WebSocket-Location: ws://192.168.0.1:11345/Tests1/websockets/classes/serveur.php
 
)0(+rþ↑ø»Ï⌂4¢VÂI
Done handshaking...
Resource id #6 DISCONNECTED!

[battosa_62]

Je me permet de faire remonter ce topic puisque j'ai les mêmes soucis que les messieurs du dessus, à savoir une déconnexion du websocket précoce .

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Server Started : 2012-05-18 06:23:12
Master socket  : Resource id #5
Listening on   : 127.0.0.1 port 11345
 
Resource id #6 CONNECTED!
 
Requesting handshake...
GET /serveur.php HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:11345
Origin: http://127.0.0.1
Sec-WebSocket-Key: 8vaY4w9GmozX/NeUczI4Ng==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
Cookie: __utma=96992031.956632088.1337304628.1337304628.1337304628.1; __utmc=969
92031; __utmz=96992031.1337304628.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(no
ne)
 
 
Handshaking...
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://127.0.0.1
Sec-WebSocket-Location: ws://127.0.0.1:11345/serveur.php
 
)0(+rþ↑ø»Ï⌂4¢VÂI
Done handshaking...
Resource id #6 DISCONNECTED!

EDIT : Bon, après avoir trifouillé le code et mis quelques indicateurs pour débugger le tout je n'arrive pas à grand chose si ce n'est avoir compris que la boucle qui sert d'écoute s'arrête à la valeur de 0 de la variable $bytes.
Ce qui se produit immédiatement après la connexion puisque rien n'est envoyé dans l'immédiat.

c'est cette partie du code de serveur.php :

Code :

1
2
3
4
5
6
7
8
		else
		{
			$bytes = @socket_recv($socket,$buffer,2048,MSG_WAITALL);
			if(empty($bytes))
			{ 
			console($bytes);
			//disconnect($socket);
			}

Ici j'ai commenté la fonction qui appel la déconnexion et j'affiche la valeur de $bytes. J'obtiens alors une première itération de valeur 241 puis une boucle infini qui affiche 0.

Le truc c'est que si je tente d'utiliser le chat, normalement des données devrais circuler mais rien ne se produit. J'en viens à me demander si le problème ne viens pas du .js

Bref, voilà mon avis de grand débutant.