在互聯網時代，聊天室成為了人們交流、社交的一個重要場所。而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
- 客戶端頁面
首先，我們需要編寫一個頁面，用于向聊天室發送消息。代碼如下：
<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><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}`; 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>
這段代碼中，我們將聊天室頁面劃分為兩個部分：消息展示框和消息輸入框。同時，定義了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服務器，這為實現高性能、低延遲、可靠的實時通信提供了便捷的手段。
