Un chat en HTML5 avec les websockets

var socket = new Websocket("ws://localhost:11345/serveur.php");

socket.onopen = function(e){} /*on "écoute" pour savoir si la connexion vers le serveur websocket s'est bien faite */
socket.onmessage = function(e){} /*on récupère les messages provenant du serveur websocket */
socket.onclose = function(e){} /*on est informé lors de la fermeture de la connexion vers le serveur*/
socket.onerror = function(e){} /*on traite les cas d'erreur*/

socket.send('mon message') /*'mon_message' peut être du JSON mais il conviendra de le stringifier via JSON.stringify('{"msg": "message type string"}')*/

socket.close();

#!/php -q
<?php  /*  >php -q server.php  */
ini_set('default_socket_timeout', 10);
include_once('WebSocketHandshake.class.php');
error_reporting(E_ALL);
set_time_limit(0);
ob_implicit_flush();
$master  = WebSocket('localhost',11345); /* le host et le port du serveur websocket */
$sockets = array($master);
$users   = array();
$debug   = true;
 
/*
 * serveur websocket qui tourne en continu
 */
while(true){
       $changed = $sockets;
       $expect = $sockets;
       socket_select($changed,$write=NULL,$expect,0,1000000);
       foreach($changed as $socket){
               if($socket==$master){
                       $client=socket_accept($master);
                       if($client<0){ 
                             console("socket_accept() failed"); continue; 
                       }else{
                               socket_set_option($client,SOL_SOCKET, SO_KEEPALIVE, 1) or die('Can not set keepalive');
                               connect($client);
                       }
               }else{
                       $bytes = @socket_recv($socket,$buffer,2048,0);
                       if($bytes==0){ disconnect($socket); }
                       else{
                               $user = getuserbysocket($socket);
                               if(!$user->handshake){ dohandshake($user,$buffer); }
                               else{ process($user,$buffer); }
                       }
               }
       }
}
 
/*
 * fonction pour savoir quel type d'action est demandé - dans notre cas, 
 * il n'y en a qu'un mais s"il y avait plusieurs actions sur ce serveur 
 * en plus du chat, nous aurions d'autres cas dans le switch
 */
function process($from,$msg){
       console("< ".$from->label." (".$from->userId.") : \n\t".$msg);
       $msg = unwrap($msg);
       $msg = json_decode($msg,true);
       switch($msg['action']){
               case "ctrl/chat/out"    : onCtrlChatOut($from,  $msg['msg']);  
               break;
               default : onActionError($from, $msg);
               break;
       }
}
/*
 * réécrit les données sur le socket ouvert
 */
function send($to,$msg){
       say('> '.$to->label.' ('.$to->userId.") :\n\t".$msg);
       $msg = wrap($msg);
       return socket_write($to->socket,$msg,strlen($msg));
}
/*
 * envoi du message (des données) à chaque utilisateur connecté 
 * sur le serveur de socket (et sur le même socket)
 */
function broadcast($msg, $excludeUser=''){
       say(">> ");
       global $users;
       foreach($users as $user){
               send($user, $msg);
       }
}
/*
 *initialisation du socket
 */
function WebSocket($address,$port){
       $master=socket_create(AF_INET, SOCK_STREAM, SOL_TCP)     or die("socket_create() failed");
       socket_set_option($master, SOL_SOCKET, SO_REUSEADDR, 1)  or die("socket_option() failed");
       socket_bind($master, $address, $port)                    or die("socket_bind() failed");
       socket_listen($master,20)                                or die("socket_listen() failed");
       echo "Server Started : ".date('Y-m-d H:i:s')."\n";
       echo "Master socket  : ".$master."\n";
       echo "Listening on   : ".$address." port ".$port."\n\n";
       return $master;
}
/*
 * lors de la connexion d'un utilisateur sur le serveur, 
 * il est enregistré pour le broadcast des données
 */
function connect($socket){
       global $sockets,$users;
       $user = new User();
       $user->id = uniqid();
       $user->socket = $socket;
       array_push($users,$user);
       array_push($sockets,$socket);
       console($socket." CONNECTED!");
}
/*
 * déconnexion de tous les utilisateurs
 */
function disconnect($socket){
       global $sockets,$users;
       $found=null;
       $n=count($users);
       for($i=0;$i<$n;$i++){
               if($users[$i]->socket==$socket){ $found=$i; break; }
       }
       if(!is_null($found)){ array_splice($users,$found,1); }
       $index = array_search($socket,$sockets);
       socket_close($socket);
       console($socket." DISCONNECTED!");
       if($index>=0){ array_splice($sockets,$index,1); }
}
/*
 * fonction de la persistance de la connexion websocket
 */
function dohandshake($user,$buffer){
       console("\nRequesting handshake...");
       console($buffer);
       list($resource,$host,$origin) = getheaders($buffer);
       console("Handshaking...");
       $handshake = WebSocketHandshake($buffer);
       socket_write($user->socket,$handshake,strlen($handshake));
       $user->handshake=true;
       console($handshake);
       console("Done handshaking...");
       return true;
}
function getheaders($req){
       $r=$h=$o=null;
       if(preg_match("/GET (.*) HTTP/"   ,$req,$match)){ $r=$match[1]; }
       if(preg_match("/Host: (.*)\r\n/"  ,$req,$match)){ $h=$match[1]; }
       if(preg_match("/Origin: (.*)\r\n/",$req,$match)){ $o=$match[1]; }
       return array($r,$h,$o);
}
/*
 * identification des utilisateurs dans le socket
 */
function getuserbysocket($socket){
       global $users;
       $found=null;
       foreach($users as $user){
               if($user->socket==$socket){ $found=$user; break; }
       }
       return $found;
}
/**
 *      fonction permet de formater le message de retour 
 * à envoyer vers les navigateurs (les utilisateurs)
 */
function onCtrlChatOut($from, $msg){
       $msg = json_decode($msg);
       if($msg->message==='demo.stop'){
               $msg->message='WebSockets server is going down...';
               broadcast('{"action": "ws/chat/in", "msg":'.json_encode($msg).'}');
               die();
       }
       broadcast('{"action": "ws/chat/in", "msg":'.json_encode($msg).'}');
}
/**
 *              Usefull functions
 */
function     say($msg=""){ echo $msg."\n"; }
function    wrap($msg=""){ return chr(0).$msg.chr(255); }
function  unwrap($msg=""){ return substr($msg,1,strlen($msg)-2); }
function console($msg=""){ global $debug; if($debug){ echo $msg."\n"; } }
 
class User{
       var $id;
       var $socket;
       var $handshake;
       var $userId=null;   // From GUI
}
?>

<!DOCTYPE html>
       <html>
       <head>
       <meta charset="ISO-8859-1">
       <link href="style/style.css" type="text/css" rel="stylesheet"/>
       <script type="text/javascript" src="script/script.js"></script>
       <title>Insert title here</title>
       </head>
       <body>
               <div class="sii-chat"> <-- conteneur du chat -->
                       <div>Pseudo : <input type="text" name="sii-chat-name" /><button class="sii-chat-login">Valider</button></div> <-- pseudo à saisir pour le chat -->
                       <div class="sii-chat-content"> <-- les messages apparaitront ici -->
                       </div>
                       <div>
                               <form class="sii-chat-form" onsubmit="return false;">
                                       <input type="text" value="" name="sii-chat-message" disabled="disabled"/><-- saisie du message à saisir -->
                                       <button class="sii-chat-send" disabled="disabled">ok</button> <-- Bouton d'envoi du message saisi -->
                               </form>
                       </div>
                       <div class="console"></div>
               </div>
       <script type="text/javascript" src="script/websocket.js"></script>
       </body>
       </html>

var WebsocketClass = function(host){
   this.socket = new WebSocket(host);
   this.console = document.getElementsByClassName('console')[0];
};

        var uId = ''; /* pseudo de l'utilisateur*/
       var button = document.getElementsByClassName('sii-chat-send')[0]; /* bouton d'envoi du message */ 
       var messageInput = document.getElementsByName('sii-chat-message')[0]; /* message à envoyer vers le serveur */
       var buttonUser = document.getElementsByClassName('sii-chat-login')[0]; /* bouton de soumission du pseudo */
       var contentMessage = document.getElementsByClassName('sii-chat-content')[0]; /* div contenant les messages reçus par le serveur*/
        var WebsocketClass = function(host){
               this.socket = new WebSocket(host);
               this.console = document.getElementsByClassName('console')[0];
       };
       WebsocketClass.prototype = {
               initWebsocket : function(){
                       var $this = this;
                       this.socket.onopen = function(){
                               $this.onOpenEvent(this);
                       };
                       this.socket.onmessage = function(e){
                               $this._onMessageEvent(e);
                       };
                       this.socket.onclose = function(){
                               $this._onCloseEvent();
                       };
                       this.socket.onerror = function(error){
                               $this._onErrorEvent(error);
                       };
                       this.console.innerHTML = this.console.innerHTML + 'websocket init <br />';
               },
               _onErrorEvent :function(err){
                       console.log(err);
                       this.console.innerHTML = this.console.innerHTML + 'websocket error <br />';
               },
               onOpenEvent : function(socket){
                       console.log('socket opened');
                       this.console.innerHTML = this.console.innerHTML + 'socket opened Welcome - status ' + socket.readyState + '<br />';
               },
               _onMessageEvent : function(e){
                       e = JSON.parse(e.data);
                      if(e.msg.length > 0) e.msg = JSON.parse(e.msg);
                      contentMessage.innerHTML = contentMessage.innerHTML 
                               + '><strong>' + e.msg.from + '</strong> : ' + e.msg.message + '<br />';
                      contentMessage.scrollTop = contentMessage.scrollHeight; /* permet de scroller automatiquement vers le bas dans la div contenant la réception des messages */
                      this.console.innerHTML = this.console.innerHTML + 'message event lanched <br />';
               },
               _onCloseEvent : function(){
                       console.log('connection closed');
                       this.console.innerHTML = this.console.innerHTML + 'websocket closed - server not running<br />';
                       uId = '';
                       document.getElementsByName('sii-chat-name')[0].value = '';
                       messageInput.disabled = 'disabled';
                       button.disabled = 'disabled';
               },
               sendMessage : function(){
                       var message = '{"from":"' + uId + '", "message":"' + messageInput.value + '"}';
                       this.socket.send('{"action":"ctrl/chat/out", "msg":' + JSON.stringify(message) + '}');
                       messageInput.value = '';
                       this.console.innerHTML = this.console.innerHTML + 'websocket message send <br />';
               }
       };

		var socket = new WebsocketClass('ws://localhost:11345/serveur.php'); /* on instancie un objet WebsocketClass avec l'URL en paramètre */
       if(button.addEventListener){
               buttonUser.addEventListener('click', function(e){ /* on écoute l'évènement 'click' sur le bouton permettant de valider son pseudo */
                       e.preventDefault(); /* on stoppe la propagation */
                       socket.initWebsocket(); /* initialisation de la connexion vers le serveur de socket */
                       uId = document.getElementsByName('sii-chat-name')[0].value; /* récupération de la valeur du pseudo de l'utilisateur */
                       messageInput.disabled = ''; /* on permet l'accès au chat (aux champs permettant d'envoyer des messages) */
                       button.disabled = '';
                       return false; /* on évite le rechargement de page */
               }, true);
               button.addEventListener('click',function(e){ /* on écoute l'évènement 'click' sur le bouton permettant d'envoyer le message */
                       e.preventDefault();
                       socket.sendMessage(); /* on envoie un message vers le serveur*/
                       return false;
               }, true);
       } else{
               console.log('votre navigateur n\'accepte pas le addevenlistener');
       }

        .sii-chat{
               width:400px;
               padding:10px;
               background:#ccc;
               margin:20px auto;
       }
       .sii-chat-content{
               min-height:400px;
               max-height:400px;
               overflow:hidden;
               overflow-y:scroll;
               background:#fff;
               box-shadow:0px 0px 5px 0px #000;
               margin-bottom:10px;     
       }
       .console{       
               min-height:50px;
               max-height:100px;
               overflow:hidden;
               overflow-y:scroll;
       }
       .sii-chat-form input[name="sii-chat-message"]{
               width:300px;
               box-shadow:inset 0px 0px 5px 0px #000;
       }
       .sii-chat-form button{
               width:80px;
               float:right;
               color:#ffffff;
               -moz-box-shadow: 0px 0px 5px #343434;
               -webkit-box-shadow: 0px 0px 5px #343434;
               -o-box-shadow: 0px 0px 5px #343434;
               box-shadow: 0px 0px 5px #343434;
               -moz-border-radius: 5px;
               -webkit-border-radius: 5px;
               border-radius: 5px;
               border: 1px solid #656565;
               filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="34cdf9", endColorstr="3166ff"); /* Pour IE seulement et mode gradient à linear */
               background: -webkit-gradient(linear, left top, left bottom, from(#34cdf9), to(#3166ff));
               background: -moz-linear-gradient(top center, #34cdf9, #3166ff);
       }
       .sii-chat-form button:active{
               filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="3166ff", endColorstr="34cdf9"); /* Pour IE seulement et mode gradient à linear */
               background: -webkit-gradient(linear, left top, left bottom, from(#3166ff), to(#34cdf9));
               background: -moz-linear-gradient(top center, #3166ff, #34cdf9);
       }