Version imprimable
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.
:fleche: un chat en HTML5 avec les websockets
Merci!
Bonjour
Très bon tutoriel merci.
C'est plus un exemple concret d'utilisation, mais il me convient très bien !
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.
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.Citation:
Envoyé par Lovmy
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.Citation:
Envoyé par Lovmy
ws:// pour le non-crypté, wss:// pour une connexion TLS -_-°. Ils sont pas deubeux, hein...Citation:
Envoyé par Lovmy
Ç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.Citation:
Envoyé par Lovmy
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.
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.Citation:
Envoyé par Lovmy
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é.
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 :
J'ai la version 8, websocket activé par défaut.Code:
2
3
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.
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é :
Par contre, le client ne fonctionne pas, et c'est général à tous les exemples que j'ai essayés.Code:window.WebSocket = window.WebSocket || window.MozWebSocket;
Firebug me renvoie :
Voici le log de la console :Code:Firefox ne peut établir de connexion avec le serveur à l'adresse ws://localhost:11345/serveur.php
J'imagine que c'est un problème de firefox ???Code:
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
Si quelqu'un peut m'aider : merci !
Cédrik
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.
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.
Tu vas l'attendre longtemps, tu n'as même pas dit quel est le problème.Citation:
Envoyé par floysand
"Je ne peux pas envoyer de message" mais encore ? Ça bloque où, de quel côté et à quelle couche ? Comment tu le sais ?
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 :
Est-ce que quelqu'un sait d'où viennent ces hiéroglyphes et pourquoi ça se déconnecte aussi tôt ?Citation:
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!
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 :
J'ai pas plus d'idées pour le moment ... Et vous ?Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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.
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.
Quelqu'un a-t-il réussi à faire fonctionner ce chat ?
Merci de votre réponse.
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:
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
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 .
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.Code:
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
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 :
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.Code:
2
3
4
5
6
7
8
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.
Bonjour,
J'ai réussie à le faire fonctionner.
Alors pour le serveur faut prendre la nouvelle version ici et télécharger chatbot.demo.php ainsi que websocket.class.php
Ensuite renommer le chatbot.demo.php en server.php puis rajouter ces lignes :
retirer le case et mettre le bon port 11345.Code:
2
3
Ce qui nous donne :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Avec ff 13.0.1 j'ai eu des probléme de portabilités de variable. J'ai donc dupliqué les lignes suivantes dans websocket.js
Code:
2
3
4
Ça fonctionne, mais j'ai remarqué un bug à la fermeture de l'onglet de FF. Ça envoie un code 0x3e9 qui se fait broadcaster par tous les clients connectés sur le même ws et les déconnecter. La solution temporaire pour le moment c'est de conditionner les messages et sortir de la fonction process si le message est égale au code hexa 3e9.
++
Bonjour, j'utilise le serveur du post si dessus
Tout marche bien pour l'envoie et la réception de données, mais parfois le retour des donnes me donne des caractère bizzare dans la console et ferme la connexion au serveur.
Je peut avoir plusieurs 10 ene de retour corecte et d'un coup paf, des caractères bizare.
l'erreur que j'ai en retour sur Firbug :
en faite de temps en temps il manquerais une ou deux accolade de fermeture, mais je ne voie pas pourquoi car c'est aléatoire (voir la dernière ligne, il manque 2 accolade (desfois il en maque que une).Citation:
Envoyé par La console Firbug
voici le résultat de e.data :
Voici les résultats dans la console (cmd) :Citation:
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.05524391761264269"}}
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.05511391761262985"}}
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.054983917612617006"}}
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.054983917612617006"}}
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.054853917612604164"}}
{"action":"latlng","msg":{"from":"dad72","message":"48.07427752144558,0.05472391761259132"
La le bon résultats renvoyer correctement:
La le mauvais résultats qui arrive aléatoirement qui devrais être la même chose que ci dessus normalement :Code:
2
Pour information les message sont des coordonnes provenant de google maps que je récupère pour faire des déplacement en temps réelle des marker pour un jeu en multijoueur.Code:
2
3
4
de ce que je voie cela viendrais du "socket_recv()" qui renvoie 0 Byte de temps en temps. Pour précision j'envoie des données en masse et aléatoirement il me sort 0 bytes et des caractère bizzare.
Quelqu'un a une idée de quoi ça peut venir ? please help me.
Si vous voulez la classe c'est ici
Si vous avez besoin d'autre précision pour mieux m'aider, dite le moi.
Merci d'avance
bon, c'est la fonction unwrap qui cause probleme j'ai l'impression.
bon j'ai corriger le truc en changent de méthode d’envoi. je n'utilise plus JSON avec les {} mais je sépare chaque donnée par un ";" et j'utilise split() au retour des données.
le résultat est mieux, mais j'ai toujours de temps en temps, un mauvais décodage des donnes. par contre j'ai plus d'ereur parse de JSON (un bug en moins)
La c'est Ok
La il y a eu un mauvais decodage de la fonction unwrapCode:
2
3
4
Fonction unwrap qui cause probleme :Code:
2
3
4
5
Il y a pas quelqu'un qui peut m'aider ?Code:
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Très bien expliqué :ccool:
Juste une question SVP, comment le mettre en-ligne pour le public, après le transfert de tout les fichiers nécessaire via FTP?
Tu crois que la page html5 proposée dans le tuto, elle sert à quoi ? :roll:Citation:
Juste une question SVP, comment le mettre en-ligne pour le public, après le transfert de tout les fichiers nécessaire via FTP?
je parle du serveur PHP qui s’exécute en ligne de commande -_-Citation:
Envoyé par Muchos
Bonjour a tous,
tout d'abord merci pour ce tuto c'est exactement ce que je cherchais!
TOUTEFOIS, il serait bien de mettre a jour le lien vers le package car celui proposé dans le tuto ne marche pas:
dans la console js de chrome : erreur : ne trouve pas l'entête du handshaking
n'etant pas encore familier avec les websockets etc j'ai suivi les conseils de Krozer et le chat tourne
cependant, j'aimerais savoir comment faire tourner "serveur.php" sous wamp/mamp ou sur un serveur web?
puis je me contenter de lancer un "php -q serveur.php" en me placant dans le rep htdocs de Mamp ?
merci d'avance pour vos reponses :ccool:
Joe.
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
dans le fichier websocket.js, je metCode:$master = WebSocket('192.168.0.25',11345);
Question : faut-il mettre juste /serveur.php ou faut-il mettre le chemin complet /test_chat/classes/serveur.phpCode:var socket = new WebsocketClass('ws://192.168.0.25:11345/serveur.php');
Quand je lance la page index.html, j'ai sur la console
Et donc ensuite rien ne se passe car visiblement la connexion ne tient pas.Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Que faut-il faire ?
Merci de votre réponse
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
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
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 :
*Comment arrête-on le serveur ? =pCode:
2
3
--> 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.
Bonjour tous,
J'avais pas vu le beau blog que voici. Alors j'ai envoyé un courriel à l'auteur... J'ai fait des grosses modifications et maintenant, pour moi, ça marche suffisamment pour un évaluation des websockets.
Archive Pièce jointe 181759 à votre disposition.
Paul
Bonjour,Citation:
Envoyé par krozer
Merci pour ces précisions ça m'a beaucoup aidé, concernant ce code 0x3e9 qui déconnecte tous les clients, à quel endroit du code peux-tu l'intercepter pour mettre fin à la fonction process() ?
J'ai essayé de poser des conditions à plusieurs endroits du code, par exemple dans la fonction process() :
ou encore d'autres fonctions comme send() ou disconnect(), mais impossible de localiser dans quelle variable ce code d'erreur parvient au script, si quelqu'un a trouvé, ça m'aiderait énormément !Code:
2
3
4
5
6
Bonjour,
J’ai repris le travail dont j’avais placé les sources ici. Je n’ai pas fini, mais je laisserai la nouvelle version plus “peaufinée” (propre ? comprise ?).
La petite nouveauté (je viens de passer à Firefox 44.0), c’est qu’en plus de traiter le ping-pong, il faut également envoyer des messages pour ne pas que le client (Firefox, donc) s’endorme, et lâche ainsi la connexion. J’ai décidé d’envoyer moi-même un ping tous les 20 pings de FF, sachant que FF s’endort après le 22ᵉ. Pour l’instant, il n’y a que les pings qui surveille le chien de garde du serveur, mais je vérifierai si un message quelconque peut également convenir.
Il est possible que ces choses soient vraies pour Chrome également, mais dans ce cas, le délais entre pings et celui d’auto déconnexion pour inactivité (l’acquittement des pings n’est pas une activité !) serait vraiment beaucoup plus longs.
À bientôt.
Salut tous,
La doc est fastidieuse, mais facile à lire, bien qu’en anglais. Tout y est ! Mais je n’ai moi-même pas tout lu car c’est tout simplement barbant, mais nécessaire pour ceux qui veulent aller plus loin.Citation:
Envoyé par pafleloup
0x3e9 n’est pas un code, mais les deux caractères (le premier étant EOT de l’ASCII) du message envoyé à la fermeture de la fenêtre ou de l’onglet. La partie intéressante de ce message de fermeture en particulier, mais des messages en général, est ce que j’appele le "header" et composé des 2 à 14 (couramment 2 à 6) premiers caractère du cadre (frame) WS .
Voici la dernière mouture Pièce jointe 199636… Ceci rend plus que confortable l’évaluation des “websockets”.
Il reste un bug (non rédhibitoire) dans le JS du client, je n’ai pas trouvé, alors à mon tour, je demande de l’aide :
À L’AIDE, svp :
Sur Firefox, il y a une erreur "SyntaxError: expected expression, got end of script" et il est montré la ligne <!DOCTYPE html>, mais la page continue de fonctionner, sauf la touche "↵". Même chose pour Chrome "Uncaught SyntaxError: Unexpected token }, mais l’erreur est affichée à un autre endroit <button id=SendM onclick=SendIn()>Envoi</button>. Je n’ai pas trouvé la raison! Je l’ai observé peu de temps après avoir voulu utiliser l’opacité sur le bouton "#SendM". Ceci ne m’est pas arrivé plus tôt, car j’utilise la bibliothèque JQuery la plupart du temps.
Un renvoi d’ascenseur serait apprécié !
Bonjour, merci pour cette belle introduction aux websockets !
J'ai le même problème que Floysand, je peux lancer le serveur, mais je crois que ce dernier ne fonctionne pas correctement car ce qu'il ecrit avec la fonction console() n'est jamais visible depuis le navigateur.
Voici ce que me montre la console de commande :
D:\>cd xampp\htdocs\serversTest\webSocketServer\classes
D:\xampp\htdocs\serversTest\webSocketServer\classes>php -q serveur.php
Server Started : 2017-04-26 14:09:31
Master socket : Resource id #5
Listening on : localhost port 443
-------------------------
Et rien de plus ....
La page du navigateur quant à elle autorise l’écriture dans les champs de pseudo et de texte, elle réagit en écrivant dans la console du navigateur :
"websocket init" -> quand on valide
"websocket message send " -> quand on clic sur ok
mais à aucun moment elle n'écrit ce que l'utilisateur souhaite dans le chat-content.
J'ai suivit le parcours des stimulis, on peut suivre ce que font le serveur et la page web jusqu'au handshake, mais n'étant pas très expérimenter en js et en php, je n'en suis pas sûr...
Avez-vous une idée d'où peut provenir le problème ? et si oui de comment le résoudre ?
Bien à vous, Sunny_go
J'ai eu le même problème, mais tout marche maintenant avec le fichier proposé par Paul_Le_Heros plus haut en page 2Citation:
Envoyé par Sunny_go