Créez une application de chat en temps réel en utilisant PHP et WebSocket

Avec le développement d'Internet, la demande de communication en temps réel augmente également. Les applications de chat en direct sont populaires pour leur immédiateté et leur commodité. Cet article vous montrera comment créer une application de chat en temps réel fiable à l'aide de PHP et WebSocket.

Qu'est-ce que WebSocket ?

WebSocket est un protocole de communication full-duplex entre un navigateur Web et un serveur Web. Cela signifie qu'il permet une communication bidirectionnelle avec le serveur au lieu des requêtes et des réponses via le protocole HTTP. Grâce à WebSocket, une communication efficace en temps réel est possible, ce qui est très important pour les applications de chat en temps réel.

Comment créer un serveur WebSocket en utilisant PHP

Afin de créer un serveur WebSocket, nous utiliserons la bibliothèque Ratchet. Ratchet est une bibliothèque PHP WebSocket basée sur des composants Symfony qui peut nous aider à créer des serveurs WebSocket rapidement et facilement. Pour utiliser Ratchet, vous devez installer Composer en PHP, qui est un gestionnaire de dépendances d'application PHP. Si Composer n’est pas encore installé, installez-le d’abord.

Créez un nouveau dossier de projet PHP et utilisez la commande Composer suivante pour installer Ratchet :

composer require cboden/ratchet

Une fois Ratchet installé, nous pouvons commencer à écrire le code du serveur WebSocket. Voici un exemple simple :

<?php
require __DIR__ . '/vendor/autoload.php';

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})
";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected
";
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        echo "An error has occurred: {$e->getMessage()}
";
        $conn->close();
    }
}

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

echo "Server started at port 8080...
";

$server->run();

Dans cet exemple, nous définissons une classe appelée "Chat" qui implémente l'interface MessageComponentInterface de Ratchet. Nous utilisons SplObjectStorage pour stocker les connexions client, et lorsqu'un client se connecte au serveur, nous utilisons la fonction onOpen() pour l'attacher au stockage. Lorsqu'un message est envoyé au serveur, nous utilisons la fonction onMessage() pour envoyer le message à tous les autres clients. Lorsque le client se déconnecte, nous utilisons la fonction onClose() pour supprimer le client du stockage.

Enfin, nous utilisons la classe IoServer pour lier le serveur WebSocket au port 8080 et démarrer le serveur. Nous avons désormais créé avec succès un serveur WebSocket simple et pouvons le connecter à un navigateur Web à l'aide de l'API JavaScript WebSocket.

Comment créer un client à l'aide de JavaScript et de l'API WebSocket

Maintenant que nous avons un serveur WebSocket, nous devons écrire du code JavaScript pour nous y connecter. Nous utiliserons l'API WebSocket.

Voici un exemple simple de client WebSocket :

let ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
    console.log('Connected to WebSocket server');
};

ws.onmessage = evt => {
    console.log('Received message: ' + evt.data);
};

ws.onclose = () => {
    console.log('Disconnected from WebSocket server');
};

ws.onerror = error => {
    console.error('WebSocket error: ' + error);
};

function sendMsg() {
    let input = document.getElementById('message');
    let msg = input.value;
    ws.send(msg);
    input.value = '';
}

Nous utilisons le constructeur WebSocket pour créer une nouvelle instance WebSockets et la connecter au serveur WebSocket spécifié. Nous utilisons les gestionnaires d'événements onopen, onmessage, onclose et onerror pour gérer différents états et messages de WebSocket. Nous définissons également une fonction appelée "sendMsg" pour envoyer les messages saisis par l'utilisateur au serveur. Cette fonction appelle la fonction send() de WebSocket pour envoyer des données.

Enfin, nous devons créer un formulaire simple dans la page HTML avec une saisie de texte et un bouton d'envoi afin que nous puissions envoyer le message. Voici le code HTML :

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat App</title>
    <script src="chat.js"></script>
</head>
<body>
    <h1>WebSocket Chat App</h1>
    <div id="messages"></div>
    <input type="text" id="message">
    <button onclick="sendMsg()">Send</button>
</body>
</html>

En utilisant une page HTML avec du code JavaScript nous pouvons désormais créer une application complète de chat en direct. Lorsque l'utilisateur saisit un message dans le navigateur et clique sur le bouton d'envoi, le message est envoyé au serveur via WebSocket et affiché dans tous les autres navigateurs avec des clients connectés.

Résumé

Dans cet article, nous avons créé une application de chat en direct utilisant PHP et WebSocket. Nous utilisons la bibliothèque Ratchet pour créer rapidement un serveur WebSocket et l'API JavaScript WebSocket pour créer le client. Grâce à l'API Ratchet et WebSocket, nous pouvons facilement établir une communication efficace en temps réel pour créer des applications de chat en temps réel fiables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!