首頁 >php框架 >Swoole >Swoole實戰：快速打造基於WebSocket的聊天室

Swoole實戰：快速打造基於WebSocket的聊天室

WBOY原創: 2023-06-14 16:20:081324瀏覽

在網路時代，聊天室成為了人們交流、社交的重要場所。而WebSocket技術的出現，則使得即時通訊變得更流暢、更穩定。今天，我們介紹如何利用Swoole框架快速建立一個基於WebSocket的聊天室。

Swoole是一款高效能的PHP 協程網路通訊框架，採用C 語言編寫，集非同步IO、協程、網路通訊等功能於一身，使得PHP 程式碼能夠像Node.js 一樣高效處理事件驅動異步並發程式設計。可以說，Swoole是開發高並發網路應用的重要工具。

下面，我們將一步步介紹如何使用Swoole實作基於WebSocket的聊天室，並且能夠支援多人線上聊天。

環境準備

在開始之前，需要確保你已經安裝了Swoole擴展，並且開啟了WebSocket支援。

安裝方法如下：

pecl install swoole

或編譯安裝：

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

如果使用了Docker，則可以在Dockerfile中加入以下語句：

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

客戶端頁面

首先，我們需要寫一個頁面，用於向聊天室發送訊息。程式碼如下：

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

這段程式碼中，我們將聊天室頁面分成兩個部分：訊息展示框和訊息輸入框。同時，定義了WebSocket的連線和發送訊息的相關邏輯。

要注意的是，在本機環境部署時，需要修改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 方法啟動 WebSocket 伺服器。

結論

到此為止，我們已經實現了基於WebSocket的多人線上聊天室。在客戶端頁面中，你可以發送任意訊息，並且訊息將被廣播到所有線上用戶端中進行展示。

透過Swoole框架，我們能夠輕鬆創建高效的WebSocket伺服器，這為實現高效能、低延遲、可靠的即時通訊提供了便捷的手段。

以上是Swoole實戰：快速打造基於WebSocket的聊天室的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Swoole網路程式設計實現非同步任務的技巧下一篇：Swoole網路程式設計實現非同步任務的技巧

看更多