API WebSocket JavaScript
Introduction à la technologie WebSocket
WebSocket révolutionne la manière dont les applications web communiquent, en dépassant le HTTP traditionnel pour offrir des canaux de communication full-duplex sur une seule connexion. Cela permet aux applications web d'envoyer des messages à un serveur et de recevoir des réponses événementielles sans avoir à interroger le serveur en permanence pour obtenir une réponse. Explorons comment exploiter la puissance des WebSockets dans vos projets web à travers un exemple pratique : la création d'une application de chat Echo.
Configuration du chat Echo WebSocket
Structure HTML de base
Tout d'abord, nous établissons l'interface utilisateur avec un HTML incluant une zone d'affichage des messages, un champ de saisie et des boutons de contrôle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebSocket Echo Chat</title>
</head>
<body>
<textarea id="chatBox" readonly style="width: 100%; height: 300px"></textarea><br />
<input type="text" id="messageInput" placeholder="Type a message..." style="width: 75%" />
<button onclick="sendMessage()">Send</button>
<button onclick="closeConnection()">Close Connection</button>
</body>
</html>Intégration de WebSocket avec JavaScript
Le JavaScript chargé de gérer la communication WebSocket est essentiel pour permettre des interactions en temps réel.
<script>
// Accessing the chat box and message input elements from the HTML.
const chatBox = document.getElementById("chatBox");
const messageInput = document.getElementById("messageInput");
// Establishing a WebSocket connection to the echo server.
const socket = new WebSocket("wss://echo.websocket.events");
// When the connection is open, display a connected message in the chat box.
socket.addEventListener("open", function (event) {
chatBox.value += "Connected to the echo server\n";
});
// Handle incoming messages by adding them to the chat box.
socket.addEventListener("message", function (event) {
chatBox.value += "Echoed back: " + event.data + "\n";
});
// Handle connection errors.
socket.addEventListener("error", function (event) {
chatBox.value += "Connection error occurred.\n";
});
// Handle connection closure.
socket.addEventListener("close", function (event) {
chatBox.value += "Connection closed. Code: " + event.code + "\n";
});
// Function to send a message when the send button is clicked.
function sendMessage() {
const message = messageInput.value; // Get the message from the input field.
if (!message) return; // If there's no message, don't do anything.
socket.send(message); // Send the message to the server.
chatBox.value += "You: " + message + "\n"; // Show the message in the chat box.
messageInput.value = ""; // Clear the message input field.
}
// Function to close the WebSocket connection.
function closeConnection() {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The user closed the connection"); // Close the connection normally.
chatBox.value += "Connection closed by user\n"; // Inform the user in the chat box.
} else {
alert("Connection is not open or already closed."); // Alert if the connection can't be closed.
}
}
// Ensure the WebSocket is closed properly when the webpage is closed or reloaded.
window.addEventListener("beforeunload", function () {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The page is unloading"); // Close the connection normally.
}
});
</script>Ce script configure une fonctionnalité de chat sur une page web qui se connecte à un serveur à l'aide de WebSockets. Voici une explication simple de ses parties :
- Accès aux éléments HTML : Le script récupère la zone de chat et le champ de saisie de la page web afin de pouvoir interagir avec eux.
- Connexion WebSocket : Il ouvre une connexion vers un serveur qui renvoie les messages (echo). Cela signifie que tout ce que vous envoyez à ce serveur vous sera renvoyé immédiatement.
- Affichage du statut de connexion : Lorsque la connexion est établie avec succès, un message s'affiche dans la zone de chat indiquant que la connexion au serveur echo est active.
- Gestion des messages entrants : Tous les messages renvoyés par le serveur sont ajoutés à la zone de chat, confirmant que le serveur a bien echo les messages.
- Envoi de messages : Une fonction permet d'envoyer les messages saisis dans le champ de saisie. S'il y a du texte, il est envoyé au serveur, puis affiché dans la zone de chat en tant que votre message.
- Fermeture de la connexion : Une autre fonction permet de fermer la connexion WebSocket lorsque cela est nécessaire, par exemple lorsque l'utilisateur décide de la fermer ou lorsque la page web se ferme.
Cette configuration permet une communication en temps réel avec le serveur et aide à tester et démontrer le fonctionnement des applications de messagerie.
Et maintenant, assemblons le tout et voyons cela en action :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebSocket Echo Chat</title>
</head>
<body>
<textarea id="chatBox" readonly style="width: 100%; height: 300px">
</textarea>
<br />
<input
type="text"
id="messageInput"
placeholder="Type a message..."
style="width: 75%"
/>
<button onclick="sendMessage()">Send</button>
<button onclick="closeConnection()">Close Connection</button>
</body>
<script>
const chatBox = document.getElementById("chatBox");
const messageInput = document.getElementById("messageInput");
const socket = new WebSocket("wss://echo.websocket.events");
socket.addEventListener("open", function (event) {
chatBox.value += "Connected to the echo server\n";
});
socket.addEventListener("message", function (event) {
chatBox.value += "Echoed back: " + event.data + "\n";
});
socket.addEventListener("error", function (event) {
chatBox.value += "Connection error occurred.\n";
});
socket.addEventListener("close", function (event) {
chatBox.value += "Connection closed. Code: " + event.code + "\n";
});
function sendMessage() {
const message = messageInput.value;
if (!message) return;
socket.send(message);
chatBox.value += "You: " + message + "\n";
messageInput.value = "";
}
function closeConnection() {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The user closed the connection");
chatBox.value += "Connection closed by user\n";
} else {
alert("Connection not open or already closed.");
}
}
window.addEventListener("beforeunload", function () {
if (socket.readyState === WebSocket.OPEN) {
socket.close(1000, "The page is unloading");
}
});
</script>
</html>Dans l'exemple ci-dessus, dès que vous vous connectez au serveur, vous pouvez commencer à envoyer des messages et vous recevrez exactement ce que vous avez tapé, renvoyé sous forme d'écho. Si vous cliquez sur le bouton « Fermer la connexion », la connexion WebSocket sera interrompue et vous ne recevrez plus de messages en écho.
Fonctionnalités et techniques avancées de WebSocket
Gestion des données binaires
Les WebSockets ne se limitent pas aux données textuelles. Ils peuvent également gérer des données binaires, ce qui est utile pour des applications comme le streaming vidéo en direct ou les jeux en ligne. L'API WebSocket permet d'envoyer et de recevoir des blobs ou des tableaux typés de données binaires.
Mise en œuvre de la sécurité WebSocket
La sécurité est primordiale lors de l'utilisation des WebSockets :
- Utiliser WSS : Utilisez toujours WebSocket Secure (WSS), qui chiffre les données transmises entre le client et le serveur.
- Authentification : Mettez en place une authentification par jeton (token) pour garantir que seuls les utilisateurs autorisés peuvent établir des connexions WebSocket.
- Validation : Validez correctement toutes les données envoyées au serveur pour prévenir les vulnérabilités web courantes telles que les XSS ou les injections SQL.
WebSocket et le modèle Pub/Sub
Le modèle publish/subscribe (pub/sub) est un modèle populaire dans les services de données en temps réel où les messages sont diffusés via un canal. Des services WebSocket comme PubNub proposent des APIs qui prennent en charge le modèle pub/sub, améliorant ainsi les capacités de WebSocket en gérant les connexions, en fournissant un chiffrement des données et en facilitant la diffusion basée sur des canaux.
Bibliothèques et frameworks WebSocket
Plusieurs bibliothèques JavaScript facilitent et renforcent l'utilisation des WebSockets :
- Socket.IO : Fournit des fonctionnalités supplémentaires comme la reconnexion automatique, la gestion des événements et la gestion des salles.
- WebSocket-Node : Une implémentation de serveur WebSocket pour Node.js.
- ReconnectingWebSocket : Une petite bibliothèque qui ajoute des fonctionnalités de reconnexion aux WebSockets natifs.
Conclusion
La technologie WebSocket est un élément de base fondamental pour développer des applications web interactives et en temps réel. En intégrant les WebSockets dans vos applications, vous permettez une interaction directe et bidirectionnelle entre les clients et les serveurs. Ce guide a fourni les étapes pour créer une simple application de chat Echo, et en explorant davantage les fonctionnalités avancées et la sécurité, vous pouvez construire des applications plus sophistiquées qui fonctionnent efficacement dans des environnements en temps réel.
Pratique
Quels sont les principaux avantages de l'utilisation des WebSockets dans les applications web ?