Erstellen Sie eine Echtzeit-Chat-Anwendung mit PHP und WebSocket

Mit der Entwicklung des Internets steigt auch die Nachfrage nach Echtzeitkommunikation. Live-Chat-Apps sind wegen ihrer Unmittelbarkeit und Bequemlichkeit beliebt. In diesem Artikel erfahren Sie, wie Sie mit PHP und WebSocket eine zuverlässige Echtzeit-Chat-Anwendung erstellen.

Was ist WebSocket?

WebSocket ist ein Protokoll für die Vollduplex-Kommunikation zwischen einem Webbrowser und einem Webserver. Dies bedeutet, dass eine bidirektionale Kommunikation mit dem Server anstelle von Anfragen und Antworten über das HTTP-Protokoll möglich ist. Mit WebSocket ist eine effiziente Kommunikation in Echtzeit möglich, was für Echtzeit-Chat-Anwendungen sehr wichtig ist.

So erstellen Sie einen WebSocket-Server mit PHP

Um einen WebSocket-Server zu erstellen, verwenden wir die Ratchet-Bibliothek. Ratchet ist eine PHP-WebSocket-Bibliothek, die auf Symfony-Komponenten basiert und uns dabei helfen kann, schnell und einfach WebSocket-Server zu erstellen. Um Ratchet verwenden zu können, müssen Sie Composer in PHP installieren, einen Abhängigkeitsmanager für PHP-Anwendungen. Wenn Sie Composer noch nicht installiert haben, installieren Sie es zuerst.

Erstellen Sie einen neuen PHP-Projektordner und verwenden Sie den folgenden Composer-Befehl, um Ratchet zu installieren:

composer require cboden/ratchet

Sobald Ratchet installiert ist, können wir mit dem Schreiben des WebSocket-Servercodes beginnen. Das Folgende ist ein einfaches Beispiel:

<?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();

In diesem Beispiel definieren wir eine Klasse mit dem Namen „Chat“, die die MessageComponentInterface-Schnittstelle von Ratchet implementiert. Wir verwenden SplObjectStorage, um Client-Verbindungen zu speichern, und wenn ein Client eine Verbindung zum Server herstellt, verwenden wir die Funktion onOpen(), um ihn an den Speicher anzuhängen. Wenn eine Nachricht an den Server gesendet wird, verwenden wir die Funktion onMessage(), um die Nachricht an alle anderen Clients zu senden. Wenn der Client die Verbindung trennt, verwenden wir die Funktion onClose(), um den Client aus dem Speicher zu entfernen.

Schließlich verwenden wir die IoServer-Klasse, um den WebSocket-Server an Port 8080 zu binden und den Server zu starten. Jetzt haben wir erfolgreich einen einfachen WebSocket-Server erstellt und können ihn mithilfe der JavaScript-WebSocket-API mit einem Webbrowser verbinden.

So erstellen Sie einen Client mit JavaScript und der WebSocket-API

Da wir nun einen WebSocket-Server haben, müssen wir JavaScript-Code schreiben, um eine Verbindung zu ihm herzustellen. Wir werden die WebSocket-API verwenden.

Das Folgende ist ein einfaches WebSocket-Client-Beispiel:

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 = '';
}

Wir verwenden den WebSocket-Konstruktor, um eine neue WebSockets-Instanz zu erstellen und diese mit dem angegebenen WebSocket-Server zu verbinden. Wir verwenden die Ereignishandler onopen, onmessage, onclose und onerror, um verschiedene Zustände und Nachrichten von WebSocket zu verarbeiten. Wir definieren außerdem eine Funktion namens „sendMsg“, um vom Benutzer eingegebene Nachrichten an den Server zu senden. Diese Funktion ruft die send()-Funktion von WebSocket auf, um Daten zu senden.

Zuletzt müssen wir noch ein einfaches Formular in der HTML-Seite mit Texteingabe und einem Senden-Button erstellen, damit wir die Nachricht versenden können. Hier ist der HTML-Code:

<!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>

Durch die Verwendung einer HTML-Seite mit JavaScript-Code können wir jetzt eine vollständige Live-Chat-Anwendung erstellen. Wenn der Benutzer eine Nachricht in den Browser eingibt und auf die Schaltfläche „Senden“ klickt, wird die Nachricht über WebSocket an den Server gesendet und in allen anderen verbundenen Client-Browsern angezeigt.

Zusammenfassung

In diesem Artikel haben wir eine Echtzeit-Chat-Anwendung mit PHP und WebSocket erstellt. Wir verwenden die Ratchet-Bibliothek, um schnell einen WebSocket-Server zu erstellen, und die JavaScript-WebSocket-API, um den Client zu erstellen. Mithilfe der Ratchet- und WebSocket-API können wir auf einfache Weise eine effiziente Echtzeitkommunikation erreichen und so zuverlässige Echtzeit-Chat-Anwendungen erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Echtzeit-Chat-Anwendung mit PHP und WebSocket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!