Heim >PHP-Framework >Swoole >Swoole in Aktion: Erstellen Sie schnell einen Chatroom auf Basis von WebSocket

Swoole in Aktion: Erstellen Sie schnell einen Chatroom auf Basis von WebSocket

WBOYOriginal: 2023-06-14 16:20:081323Durchsuche

Im Internetzeitalter sind Chatrooms zu einem wichtigen Ort für Menschen geworden, an dem sie kommunizieren und Kontakte knüpfen können. Das Aufkommen der WebSocket-Technologie hat die Echtzeitkommunikation reibungsloser und stabiler gemacht. Heute stellen wir vor, wie Sie mit dem Swoole-Framework schnell einen Chatroom auf Basis von WebSocket erstellen können.

Swoole ist ein leistungsstarkes PHP-Coroutine-Netzwerkkommunikations-Framework, das in der Sprache C geschrieben ist und asynchrone E/A, Coroutine, Netzwerkkommunikation und andere Funktionen integriert, sodass PHP-Code ereignisgesteuerte asynchrone Parallelität genauso effizient verarbeiten kann wie Node.js-Programmierung. Man kann sagen, dass Swoole ein wichtiges Werkzeug für die Entwicklung von Netzwerkanwendungen mit hoher Parallelität ist.

Im Folgenden stellen wir Ihnen Schritt für Schritt vor, wie Sie mit Swoole einen auf WebSocket basierenden Chatroom implementieren und den Online-Chat für mehrere Personen unterstützen.

Umgebungsvorbereitung

Bevor Sie beginnen, müssen Sie sicherstellen, dass Sie die Swoole-Erweiterung installiert und die WebSocket-Unterstützung aktiviert haben.

Die Installationsmethode ist wie folgt:

pecl install swoole

oder kompilieren und installieren:

wget https://pecl.php.net/get/swoole-{version}.tgz

tar xzvf swoole-{version}.tgz

cd swoole-{version}

phpize

./configure --enable-async-redis --enable-coroutine --enable-openssl --enable-http2 --enable-sockets

make && make install

Wenn Docker verwendet wird, können Sie die folgende Anweisung in die Docker-Datei einfügen:

RUN pecl install swoole 
    && docker-php-ext-enable swoole 
    && docker-php-ext-install pcntl

Client-Seite

Zuerst müssen wir schreiben eine Seite zum Senden einer Nachricht an den Chatroom. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket ChatRoom Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 30px auto;
            width: 800px;
            height: 600px;
            border: 1px solid #aaa;
            border-radius: 5px;
            overflow: hidden;
        }
        .message-box {
            width: 800px;
            height: 500px;
            border-bottom: 1px solid #aaa;
            overflow-y: scroll;
        }
        .input-box {
            width: 800px;
            height: 100px;
            border-top: 1px solid #aaa;
        }
        .input-text {
            width: 600px;
            height: 80px;
            margin: 10px;
            padding: 10px;
            font-size: 20px;
            border-radius: 5px;
            border: 1px solid #aaa;
            outline: none;
        }
        .send-btn {
            width: 100px;
            height: 100%;
            margin: 0 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message-box"></div>
        <div class="input-box">
            <textarea class="input-text"></textarea>
            <button class="send-btn">Send</button>
        </div>
    </div>
    <script>
        // 初始化WebSocket
        let socket = new WebSocket('ws://localhost:9502');

        // 监听连接成功事件
        socket.onopen = function (event) {
            console.log('WebSocket connection established.');
        }

        // 监听服务端发送的消息
        socket.onmessage = function (event) {
            let message_box = document.querySelector('.message-box');
            message_box.innerHTML += `<p>${event.data}</p>`;
            message_box.scrollTop = message_box.scrollHeight;
        }

        // 监听连接关闭事件
        socket.onclose = function (event) {
            console.log('WebSocket connection closed.');
        }

        // 发送消息
        let send_btn = document.querySelector('.send-btn');
        let input_text = document.querySelector('.input-text');
        send_btn.addEventListener('click', function (event) {
            if (input_text.value.trim() == '') return;
            socket.send(input_text.value);
            input_text.value = '';
        });
    </script>
</body>
</html>

In diesem Code teilen wir die Chatroom-Seite in zwei Teile: das Nachrichtenanzeigefeld und das Nachrichteneingabefeld. Gleichzeitig werden die WebSocket-Verbindung und die zugehörige Logik zum Versenden von Nachrichten definiert.

Es ist zu beachten, dass bei der Bereitstellung in einer lokalen Umgebung die Adresse von WebSocket in die lokale IP-Adresse anstelle von localhost geändert werden muss. Wenn Sie eine Online-Umgebung nutzen möchten, müssen Sie die WebSocket-Adresse in die öffentliche IP des Servers ändern. WebSocket的地址为本地IP地址，而不是localhost。如果你想使用在线环境，则需要将WebSocket地址改为服务器公网IP。

服务端代码

接下来，我们编写服务端代码。通过 Swoole 提供的类库，我们可以很方便地创建一个 WebSocket 服务器。代码如下：

<?php
// 创建WebSocket服务器
$server = new SwooleWebsocketServer("0.0.0.0", 9502);

// 监听WebSocket连接打开事件
$server->on('open', function (SwooleWebsocketServer $server, $request) {
    echo "connection open: {$request->fd}
";
});

// 监听WebSocket消息事件
$server->on('message', function (SwooleWebsocketServer $server, $frame) {
    echo "received message: {$frame->data}
";

    // 广播消息
    foreach ($server->connections as $fd) {
        $server->push($fd, $frame->data);
    }
});

// 监听WebSocket连接关闭事件
$server->on('close', function (SwooleWebsocketServer $server, $fd) {
    echo "connection close: {$fd}
";
});

// 启动WebSocket服务器
$server->start();

首先，我们创建了一个 WebSocket 服务器，并将其绑定在0.0.0.0:9502的地址上，以等待客户端连接。通过on方法监听了 WebSocket 连接打开、消息、连接关闭三个事件，并已经实现了对于这三个事件的处理逻辑。

在 open 事件中，我们使用了 Swoole 记录的客户端 fd，将其输出至控制台。

在 message 事件中，我们获得了客户端传来的信息，使用了 echo 将其输出到控制台，并通过 foreach 遍历已经建立连接的客户端，将消息广播给所有客户端。

在 close 事件中，我们又一次使用了 Swoole 记录的客户端 fd，将其输出至控制台。

最后，我们使用 start

Als nächstes schreiben wir den serverseitigen Code. Über die von Swoole bereitgestellte Klassenbibliothek können wir ganz einfach einen WebSocket-Server erstellen. Der Code lautet wie folgt:

Zuerst erstellen wir einen WebSocket-Server und binden ihn an die Adresse 0.0.0.0:9502, um auf Client-Verbindungen zu warten. Die drei Ereignisse WebSocket-Verbindungsöffnung, Nachricht und Verbindungsschließung werden durch die Methode on überwacht und die Verarbeitungslogik für diese drei Ereignisse wurde implementiert.

Im open-Ereignis verwenden wir den von Swoole aufgezeichneten Client-FD, um ihn an die Konsole auszugeben.

message

echo

foreach

close

start

Das obige ist der detaillierte Inhalt vonSwoole in Aktion: Erstellen Sie schnell einen Chatroom auf Basis von WebSocket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Swoole-Netzwerkprogrammiertechniken zur Implementierung asynchroner AufgabenNächster Artikel：Swoole-Netzwerkprogrammiertechniken zur Implementierung asynchroner Aufgaben

In Verbindung stehende Artikel

Mehr sehen