IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Article] Un chat en HTML5 avec les websockets [API HTML5]


Sujet :

JavaScript

  1. #1
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut [Article] Un chat en HTML5 avec les websockets
    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!

  2. #2
    Membre régulier
    Profil pro
    Développeur Web
    Inscrit en
    février 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2009
    Messages : 46
    Points : 72
    Points
    72
    Par défaut
    Bonjour

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

  3. #3
    Membre habitué
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2002
    Messages
    269
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mai 2002
    Messages : 269
    Points : 188
    Points
    188
    Par défaut Come back
    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.

  4. #4
    Modérateur

    Profil pro
    Inscrit en
    septembre 2004
    Messages
    12 423
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 12 423
    Points : 21 030
    Points
    21 030
    Par défaut
    Citation Envoyé par Lovmy Voir le message
    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.

    Citation Envoyé par Lovmy Voir le message
    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.

    Citation Envoyé par Lovmy Voir le message
    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...

    Citation Envoyé par Lovmy Voir le message
    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.

    Citation Envoyé par Lovmy Voir le message
    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é.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    juillet 2004
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2004
    Messages : 10
    Points : 10
    Points
    10
    Par défaut test sous Firefox
    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.

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2011
    Messages : 1
    Points : 1
    Points
    1
    Par défaut Firefox
    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

  7. #7
    Membre émérite
    Avatar de Seb33300
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2007
    Messages
    1 561
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2007
    Messages : 1 561
    Points : 2 380
    Points
    2 380
    Par défaut
    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.
    Zend Certified PHP Engineer

    « Crois-tu comprendre le monde juste en matant le 20H Ou connaître l'histoire en ayant lu que l'angle des vainqueurs ? » Keny Arkana

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    septembre 2006
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2006
    Messages : 12
    Points : 8
    Points
    8
    Par défaut chat en html5
    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.

  9. #9
    Modérateur

    Profil pro
    Inscrit en
    septembre 2004
    Messages
    12 423
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 12 423
    Points : 21 030
    Points
    21 030
    Par défaut
    Citation Envoyé par floysand Voir le message
    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 ?
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    juillet 2009
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2009
    Messages : 112
    Points : 64
    Points
    64
    Par défaut
    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 : 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
    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 ?

  11. #11
    Futur Membre du Club
    Profil pro
    Inscrit en
    septembre 2006
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2006
    Messages : 12
    Points : 8
    Points
    8
    Par défaut Un chat en HTML5 avec les websockets
    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.

  12. #12
    Futur Membre du Club
    Profil pro
    Inscrit en
    septembre 2006
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2006
    Messages : 12
    Points : 8
    Points
    8
    Par défaut Un chat en HTML5 avec les websockets
    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.

  13. #13
    Futur Membre du Club
    Profil pro
    Inscrit en
    septembre 2006
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2006
    Messages : 12
    Points : 8
    Points
    8
    Par défaut Un chat en HTML5 avec les websockets
    Quelqu'un a-t-il réussi à faire fonctionner ce chat ?
    Merci de votre réponse.

  14. #14
    Futur Membre du Club
    Profil pro
    Inscrit en
    novembre 2009
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2009
    Messages : 18
    Points : 8
    Points
    8
    Par défaut
    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 : 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
     
    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!

  15. #15
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    mai 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mai 2012
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  16. #16
    Candidat au Club
    Inscrit en
    mai 2006
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : mai 2006
    Messages : 2
    Points : 2
    Points
    2
    Par défaut
    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 :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    foreach ( $this->users as $utilisateur ){
    	$this->send($utilisateur->socket,$msg);
    }
    retirer le case et mettre le bon port 11345.
    Ce qui nous donne :
    Code php : 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
    #!/php -q
    <?php
    // Run from command prompt > php -q chatbot.demo.php
    include "websocket.class.php";
     
    // Extended basic WebSocket as ChatBot
    class ChatBot extends WebSocket{
      function process($user,$msg){
     
        $this->say("< ".$user->socket." :".$msg);
     
     
          // case "date" : $this->send($user->socket,"today is ".date("Y.m.d")); 
    	foreach ( $this->users as $utilisateur ){
    		$this->send($utilisateur->socket,$msg);
    	}
      }
    }
    $master = new ChatBot("localhost",11345);

    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var button = document.getElementsByClassName('sii-chat-send')[0]; /* bouton d'envoi du message */
    var buttonUser = document.getElementsByClassName('sii-chat-login')[0]; /* bouton de soumission du pseudo */
    var messageInput = document.getElementsByName('sii-chat-message')[0]; /* message à envoyer vers le serveur */
    var contentMessage = document.getElementsByClassName('sii-chat-content')[0]; /* div contenant les messages reçus par le serveur*/

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

    ++

  17. #17
    Membre régulier
    Profil pro
    Inscrit en
    février 2008
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2008
    Messages : 183
    Points : 96
    Points
    96
    Par défaut
    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 :

    Citation Envoyé par La console Firbug
    SyntaxError: JSON.parse: end of data after property value in object
    [Stopper sur une erreur]
    e = JSON.parse(e.data);
    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).

    voici le résultat de e.data :
    {"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"
    Voici les résultats dans la console (cmd) :

    La le bon résultats renvoyer correctement:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    < Resource id #6 :{"action":"ctrl/chat/out", "msg":"{\"from\":\"dad72\", \"message\":\"48.07809172812819,0.05841599510654305\"}"
    {"action":"ctrl/chat/out", "msg":"{\"from\":\"dad72\", \"message\":\"48.07809172812819,0.05841599510654305\"}"len(110)
    La le mauvais résultats qui arrive aléatoirement qui devrais être la même chose que ci dessus normalement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    < Resource id #6 :+{"a¬tioº":"¬trlµcha¢/ou¢", ÙmsgÙ:"{ò"frªm\\"d¿d72ò", ò"me¦sag¼\":ò"48þ077*617¹812±194Õ0.0³854³995°065³589ò"}"
    +{"a¬tioº":"¬trlµcha¢/ou¢", ÙmsgÙ:"{ò"frªm\\"d¿d72ò", ò"me¦sag¼\":ò"48þ077*617¹812±194Õ0.0³854³995°065³589ò"}"len(112)
     
    Resource id #6 DISCONNECTED!
    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.

    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

  18. #18
    Membre régulier
    Profil pro
    Inscrit en
    février 2008
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2008
    Messages : 183
    Points : 96
    Points
    96
    Par défaut
    bon, c'est la fonction unwrap qui cause probleme j'ai l'impression.

  19. #19
    Membre régulier
    Profil pro
    Inscrit en
    février 2008
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2008
    Messages : 183
    Points : 96
    Points
    96
    Par défaut
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    unwrap dataLength = 50
    Resource id #8 :latlng;dad72;48.06282809235226,0.0603643767212815
    latlng;dad72;48.06282809235226,0.0603643767212815
    len(49)
    La il y a eu un mauvais decodage de la fonction unwrap
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    unwrap dataLength = 1
    Resource id #8 :¦lat▒ng;╣ad7´;48¾062õ580õ235´26,Ý.06Ý364¯767´128ý59
    ¦lat▒ng;╣ad7´;48¾062õ580õ235´26,Ý.06Ý364¯767´128ý59
    len(51)
    Resource id #8 DISCONNECTED!
    Fonction unwrap qui cause probleme :
    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    function unwrap($data="")
    	{	
    		$bytes = $data;
    		$dataLength = '';
    		$mask = '';
    		$coded_data = '';
    		$decodedData = '';
    		$secondByte = sprintf('%08b', ord($bytes[1]));	
    		$masked = ($secondByte[0] == '1') ? true : false;	
    		$dataLength = ($masked === true) ? ord($bytes[1]) & 127 : ord($bytes[1]);
     
    		$this->say("unwrap dataLength = ".$dataLength);	
     
    			if($masked === true)
    			{
    				if($dataLength === 126)
    				{
    					$mask = substr($bytes, 4, 4);
    					$coded_data = substr($bytes, 8);
    				}
    				elseif($dataLength === 127)
    				{
    					$mask = substr($bytes, 10, 4);
    					$coded_data = substr($bytes, 14);
    				}
    				else
    				{
    					$mask = substr($bytes, 2, 4);	
    					$coded_data = substr($bytes, 6);	
    				}	
    				for($i = 0; $i < strlen($coded_data); $i++)
    				{	
    					$decodedData .= $coded_data[$i] ^ $mask[$i % 4];
    				}
    			}
    			else
    			{
    				if($dataLength === 126)
    				{	
    					$decodedData = substr($bytes, 4);
    				}
    				elseif($dataLength === 127)
    				{	
    					$decodedData = substr($bytes, 10);
    				}
    				else
    				{	
    					$decodedData = substr($bytes, 2);	
    				}	
    			} 
    			return $decodedData;				
    	}	
    }
    Il y a pas quelqu'un qui peut m'aider ?

  20. #20
    Inactif
    Inscrit en
    juillet 2010
    Messages
    29
    Détails du profil
    Informations forums :
    Inscription : juillet 2010
    Messages : 29
    Points : 1
    Points
    1
    Par défaut
    Très bien expliqué
    Juste une question SVP, comment le mettre en-ligne pour le public, après le transfert de tout les fichiers nécessaire via FTP?

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [HTML 5] Un chat en HTML5 avec les websockets
    Par ornitho13 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 22
    Dernier message: 09/11/2012, 18h14
  2. [Article] Jouons un peu avec les websocket
    Par Bovino dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/02/2012, 10h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo