Formation HTML5 : WebSockets
HTML5 - connectivité

Formation HTML5 : WebSocket et Node.js

  1. Description de l'API
  2. Exemple côté client
  3. Exemple côté serveur (node.js)
  4. Polyfills et librairies

WebSocket

WebSocket

http://terezi.local:1337/ GET / HTTP/1.1 Host: terezi.local:1337 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:8.0.1) Gecko/20100101 Firefox/8.0.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: fr-ca,en-us;q=0.8,fr;q=0.6,fr-fr;q=0.4,en;q=0.2 Accept-Encoding: gzip, deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 DNT: 1 Connection: keep-alive, Upgrade Sec-WebSocket-Version: 8 Sec-WebSocket-Origin: http://terezi.local Sec-WebSocket-Key: DENhncwcHDDWSGjauI87rw== Pragma: no-cache Cache-Control: no-cache Upgrade: websocket HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: EDD/nmmbgGB8IV3guUv2vzvfYzk= Sec-WebSocket-Origin: http://terezi.local

WebSocket côté client

// Utiliser la version expérimentale de Mozilla si nécessaire window.WebSocket = window.WebSocket || window.MozWebSocket; var connection = new WebSocket('ws://terezi.local:1337'); connection.onopen = function () { // Exécuter ce qui est nécessaire au début d'une connexion }; connection.onerror = function (error) { // Gestion d'une erreur de connexion }; connection.onmessage = function (message) { // décoder et traiter le message (par exemple en JSON) // traiter ou afficher le message }; connection.send("Envoyer un message texte");

WebSocket côté serveur (Node.js)

"use strict"; var WebSocketServerFactory = require("websocket").server; var http = require("http"); // Port sur lequel roule le server var webSocketsServerPort = 1337; var webSocketApplication = (function(){ var myHttpServer = http.createServer(function (request, response) { // Le serveur http ne fait rien dans notre cas }); myHttpServer.listen(webSocketsServerPort, function() { console.log((new Date()) + " Le serveur WebSocket écoute sur le port " + webSocketsServerPort); }); // Nous faisons ecouter le server sur le port 1337 pour ne pas ecouter sur le meme // port que notre server http pour le traffic normal. La meilleure solution est // d'ecouter sur le port 80 et d'avoir un serveur proxy en avant qui // redirige le transport websocket vers notre serveur var websocketServer = new WebSocketServerFactory({ httpServer : myHttpServer, serverName : "My petit serveur magique", }); websocketServer.on('request', function (request) { var connection = request.accept(null, request.origin); connection.on('message', function(message) { if (message.type === 'utf8') { // accept seulement du texte console.log(this.serverName + ": Message recu"); // jounralise le message console.log((new Date()) + " J'ai reçu un message : " + message.utf8Data); } }); connection.on('close', function(connection){ console.log((new Date()) + " Client" + connection.remoteAddress + " s'est déconnecté."); }); });

WebSocket : polyfills et librairies

Socket.io
Polyfil encapsulant côté client et serveur les diverses techniques de communications bidirectionnelles et les versions de WebSocket
jWebSocket
Serveur WebSocket en Java
SuperWebSocket
Serveur WebSocket .NET
em-websocket
Serveur Web Socket en Ruby
phpwebsocket
Serveur Web Socket en PHP