Un WebSocket crée une connexion persistante entre un client et un serveur, permettant une communication bi-directionnelle sur une seule connexion. Cette technologie est idéale pour les chats, jeux en ligne ou tout autre application nécessitant une mise à jour initiée par le serveur, par exemple pour du livereload.
Avec AJAX, la page web doit initier une requête vers le serveur pour vérifier les mises à jour. Avec une webSocket, la page reçoit automatiquement les mises à jour du serveur. Cela permet de réduire massivement les requêtes HTTP entre le client et le serveur.
Côté client, il faut
Initier la connexion WebSocket vers le serveur
avec le protocole ws:// (WebSocket) ou wss:// (WebSocket over SSL).
socket = new WebSocket("ws://localhost");
Attendre la confirmation du serveur
socket.onopen = function(e) {}
Une fois la connexion établie, on peut recevoir des événements du serveur avec onmessage ou en envoyer avec send
this.onmessage = function(e) {
console.log(e.data);
}
this.send("Hello world!");
var socket = null;
try {
// Connexion vers un serveur HTTP prennant en charge le protocole WebSocket ("ws://").
socket = new WebSocket("ws://localhost");
// ----- OU -----
// Connexion vers un serveur HTTPS prennant en charge le protocole WebSocket over SSL ("wss://").
socket = new WebSocket("wss://localhost");
} catch (exception) {
console.error(exception);
}
// La connexion ne s'établie pas
socket.onerror = function(error) {
console.error(error);
};
// Lorsque la connexion est établie
socket.onopen = function(event) {
console.log("Connexion établie.");
// Lorsque la connexion se termine.
this.onclose = function(event) {
console.log("Connexion terminé.");
};
// Lorsque le serveur envoi un message
this.onmessage = function(event) {
console.log("Message:", event.data);
};
// Envoi d'un message vers le serveur
this.send("Hello world!");
};
Pour un support complet, y compris sous Internet Explorer, utiliser la librairie Socket.io.
Le serveur doit de son côté accepter et gérer les connexions WebSockets.