WebSocket en TypeScript : créer des applications en temps réel

WebSocket sur TypeScript : Créer des applications en temps réel

Les applications web modernes exigent de plus en plus un transfert instantané de données entre le client et le serveur. La technologie WebSocket est devenue la norme pour créer des applications en temps réel — des chats et notifications aux jeux en ligne et plateformes de trading. Dans cet article, nous allons voir comment utiliser WebSocket avec TypeScript et montrer des exemples de code pour créer une application temps réel complète.

Qu'est-ce que WebSocket et pourquoi TypeScript ?

WebSocket est un protocole qui assure une connexion bidirectionnelle permanente entre le client et le serveur. Contrairement à HTTP, où le client envoie une requête et reçoit une réponse, WebSocket permet aux deux parties d'initier un transfert de données à tout moment. C'est idéal pour les applications en temps réel où une faible latence est cruciale.

TypeScript ajoute le typage statique à JavaScript, ce qui est essentiel pour les projets utilisant WebSocket. Les types aident à éviter les erreurs lors du traitement des messages et rendent le code plus prévisible. Par exemple, vous pouvez définir une interface pour les messages entrants et sortants :

interface ChatMessage {    type: 'message' | 'join' | 'leave';    user: string;    text?: string;    timestamp: number;}

interface ServerResponse {    status: 'ok' | 'error';    data?: ChatMessage;    error?: string;}

Cette approche simplifie considérablement le débogage et la maintenance du code.

Configuration du serveur WebSocket en TypeScript

Pour créer le serveur, nous utiliserons la bibliothèque ws — une implémentation WebSocket populaire pour Node.js. Installons les dépendances :

npm init -ynpm install ws @types/ws typescript @types/nodenpx tsc --init

Créons le fichier server.ts :

import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws: WebSocket, req) => {    console.log('Nouveau client connecté');

    // Envoyer un message de bienvenue    ws.send(JSON.stringify({        type: 'system',        message: 'Bienvenue dans le chat !'    }));

    // Traiter les messages entrants    ws.on('message', (data: Buffer) => {        try {            const message = JSON.parse(data.toString());            console.log('Reçu :', message);

            // Diffuser le message à tous les clients connectés            wss.clients.forEach((client) => {                if (client.readyState === WebSocket.OPEN) {                    client.send(JSON.stringify({                        type: 'broadcast',                        user: message.user,                        text: message.text,                        timestamp: Date.now()                    }));                }            });        } catch (error) {            ws.send(JSON.stringify({                type: 'error',                message: 'Format de message incorrect'            }));        }    });

    ws.on('close', () => {        console.log('Client déconnecté');    });});

console.log('Serveur WebSocket démarré sur ws://localhost:8080');

Lancez le serveur avec la commande npx ts-node server.ts. Le serveur est prêt à accepter les connexions et à diffuser les messages.

Client WebSocket en TypeScript

Créons maintenant la partie cliente. TypeScript fonctionne parfaitement dans le navigateur, nous allons donc écrire un client en TypeScript pur qui sera compilé en JavaScript.

Fichier client.ts :

interface ChatMessage {    type: string;    user?: string;    text?: string;    message?: string;    timestamp?: number;}

class WebSocketClient {    private socket: WebSocket;    private url: string;

    constructor(url: string) {        this.url = url;        this.socket = new WebSocket(url);```