Discussion :

[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 !

[Mercenary Developer]

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]

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.

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.

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...

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Voici le log de la console :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[antonomas]

Bonjour,

J'essaye de faire fonctionner le système en mettant le script sur un serveur, donc en enlevant les localhost
dans serveur.php, je met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$master  = WebSocket('192.168.0.25',11345);

dans le fichier websocket.js, je met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var socket = new WebsocketClass('ws://192.168.0.25:11345/serveur.php');

Question : faut-il mettre juste /serveur.php ou faut-il mettre le chemin complet /test_chat/classes/serveur.php

Quand je lance la page index.html, j'ai sur la console

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
Resource id #8 CONECTED!
Requesting handshake...
GET /serveur.php HTTP/1.1
Upgrade : websocket
Connection: Upgrade
Host: 192.168.0.25:11345
Origine: http://www.sitelocal.loc
Sec-WebSocket-Key: <des caractères>
Sec-WebSocket-Version: 13
Handshaking...
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade! WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://www.sitelocal.loc
Sec-WebSoctet-Location: ws://192.168.0.25/serveur.php
<des caractères bizarres>
Done handshaking...
Resource id #8 DISCONNECTED!

Et donc ensuite rien ne se passe car visiblement la connexion ne tient pas.

Que faut-il faire ?
Merci de votre réponse

[emericbzh]

Bonjour,

Tout d'abord merci pour cet article très interessant.
J'aurais souhaité savoir si vous auriez des solutions à proposer pour stopper le serveur ?

Merci,
Cordialement,
Emeric

[X4R01]

Bonjour je suis en train d'essayer de créer un chat avec des websocket, j'ai commencer par tester votre tuto, j'ai télécharger le package et j'aurais quelques petites questions:
*Lorsqu'on lance le serveur via la ligne de commande, une erreur revient sans cesse "Strict standards: only variables should be passed by reference in C:\...\serveur.php on line 18. Est-ce normal ?
*Comment arrête-on le serveur ? =p
*Lorsque je lance le fichier html aucun message n’apparaît dans la fenêtre de chat, mais pourtant les log sont correct. Est-ce que cela fonctionne toujours?

Merci d'avance

[Blud42]

Salut à tous,
Merci pour le tuto.
Pour ceux qui avaient des problèmes avec le chat, regardez le message de Krozer en page 1, tout marche si vous suivez ses explications.

@X4R01

*Lorsqu'on lance le serveur via la ligne de commande, une erreur revient sans cesse "Strict standards: only variables should be passed by reference in C:\...\serveur.php on line 18. Est-ce normal ?

--> remplace la ligne par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$write=NULL;
	  $except=NULL;
      socket_select($changed,$write,$except,NULL);

*Comment arrête-on le serveur ? =p

--> tu appuie sur CTRL+C

*Lorsque je lance le fichier html aucun message n’apparaît dans la fenêtre de chat, mais pourtant les log sont correct. Est-ce que cela fonctionne toujours?

--> tu lance le serveur, tu lance le client.html, si le serveur te réponds, ça marche. Sinon, non.