La révolution HTML5 est commencée. Préparez-vous à découvrir les nouvelles possibilités. Cet article vous permettra d’avoir une compréhension de haut niveau des WebSockets et des outils à mettre en place pour en bénéficier.

Websockets

Le protocole WebSocket vise à développer un canal de communication bi-directionnel et full-duplex sur un socket TCP (port 80) pour les navigateurs et les serveurs web. L’objectif est d’échanger des messages simples entre clients et serveurs. Cette technologie ouvre des portes vers plusieurs possibilités, particulièrement dans le domaine du jeu multijoueur temps-réel comme rawkets (http://rawkets.com) ou WordsQuared (http://wordsquared.com).

Le WebSocket repose sur le fait que le serveur peut initier un envoi d’informations vers le client. Si nous comparons le tout au AJAX, c’est toujours le client qui initie une demande d’information.

Plusieurs alternatives s’offrent à vous pour exploiter ce nouveau standard en voie d’adoption.

SOCKET.IO

Catégorie : JavaScript, Serveur, HTML5

http://socket.io/#how-to-use

Socket.IO a pour objectif de rendre les applications Web temps-réel possibles dans tous les navigateurs. Il permet de simplifier la logique pour déterminer la façon de gérer convenablement les WebSockets sur un client.  Socket.IO utilisera Adobe Flash en dernier recours (fallback) si le WebSocket HTML 5 n’est pas supporté sur le navigateur.

Code serveur (utilise node.js)

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
  socket.emit('actualites', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Code client

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('actualités', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

EASYWEBSOCKET

Catégorie : HTML 5, JavaScript, Réseau, HTTP

http://easywebsocket.org/

EasyWebSocket est un simple outil de broadcast WebSocket. Il est parfait pour un prototype rapide à mettre en place. L’API a été copié sur le standard WebSocket du W3C, il est donc compatible et facile à apprendre.

<script src="http://easywebsocket.org/easyWebSocket.min.js"></script>
<script>
   var socket = new EasyWebSocket("ws://example.com/resource");
   socket.onopen = function(){
            socket.send("Vive la vie!")
	}
   socket.onmessage = function(event){
	    alert("exactement "+ event.data)
	}
</script>

PHPWebSocket

Catégorie : HTML 5, PHP, Websocket
http://code.google.com/p/phpwebsocket/
Code pour un petit hack qui permet du supporter les WebSockets sur un serveur PHP.

Explication : http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/

 NODEJS

Catégorie : JavaScript, Serveur, Réseau, WebSocket
http://nodejs.org

Node.js set utilise une plate-forme construite sur le moteur d’interprétation JavaScript de Chrome. Il permet de construire des applications réseau rapides et extensibles. Node.js possède un système d’événements, il est non-bloquant sur le I/O.
Il est parfait pour une application temps-réel distribuée sur plusieurs appareils, et pour rouler votre serveur WebSocket.

Chrome’s JavaScript runtime

http://code.google.com/p/v8/
V8 l’engin JavaScript Open source de Google. V8 a été écrit en C++ et est utilisé dans Chrome et dans node.js.

Voici un exemple d’un serveur web qui répond Hello World à la requête

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

Voici comment lancer ce serveur web à partir de la console :

> node example.js
Server running at http://127.0.0.1:8124/

Source : http://nodejs.org/api/synopsis.html