PHP 实现多人聊天室系统（WebSocket 实时通信）网站首页 技术教程

PHP 实现多人聊天室系统（WebSocket 实时通信）

安丨 2026-03-26 00:01:05

简介PHP 实现多人聊天室系统（WebSocket 实时通信）

代码：

<?php
// 引入 WebSocket 服务端的库
require_once 'vendor/autoload.php';  // 假设你已经通过 Composer 安装了 Ratchet 库

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use ReactEventLoopFactory;
use RatchetServerIoServer;

class Chat implements MessageComponentInterface {
    protected $clients;

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

    public function onOpen(ConnectionInterface $conn) {
        // 新的客户端连接
        echo "New connection: " . $conn->resourceId . "
";
        $this->clients->attach($conn);
    }

    public function onClose(ConnectionInterface $conn) {
        // 客户端断开连接
        echo "Connection closed: " . $conn->resourceId . "
";
        $this->clients->detach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        // 处理客户端发送的消息，并广播给所有连接的客户端
        echo "Message from {$from->resourceId}: $msg
";
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                // 向所有其他客户端广播消息
                $client->send($msg);
            }
        }
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        echo "Error: " . $e->getMessage() . "
";
        $conn->close();
    }
}

// 创建事件循环
$loop = Factory::create();

// 设置 WebSocket 服务器
$chat = new Chat();
$server = IoServer::factory(
    new RatchetHttpHttpServer(
        new RatchetWebSocketWsServer(
            $chat
        )
    ),
    8080, // 监听端口
    '0.0.0.0' // 绑定地址，允许所有网络访问
);

// 启动服务器
echo "WebSocket server started at ws://localhost:8080
";
$server->run();
?>

使用说明：

1. 安装所需依赖

这个 PHP 聊天室系统是基于 Ratchet 库构建的，它是一个 PHP WebSocket 库，可以处理实时通讯。首先，你需要安装 Composer 和 Ratchet 库。

在项目目录下运行以下命令来安装所需的依赖：

composer require cboden/ratchet

2. WebSocket 服务端

此代码段中，我们使用了 Ratchet 来创建一个简单的 WebSocket 服务端。此服务端能够监听客户端的连接，接收消息并广播给所有已连接的客户端。

Chat 类： 实现了 MessageComponentInterface 接口，包含了几个方法来处理连接、消息和关闭事件：
- onOpen: 每当有客户端连接时调用，用来存储连接。
- onClose: 每当有客户端断开连接时调用。
- onMessage: 接收到客户端消息时调用，将消息广播给所有连接的客户端。
- onError: 发生错误时调用，关闭连接。
IoServer 和 WsServer：IoServer 是 Ratchet 的服务器对象，WsServer 包装了 WebSocket 协议的实现，并传递到服务器。
事件循环：Factory::create() 创建一个事件循环，IoServer::factory() 启动 WebSocket 服务器，监听 8080 端口。

3. 运行 WebSocket 服务器

保存上述代码到 PHP 文件中（例如 chat-server.php），然后通过命令行启动服务器：

php chat-server.php

服务器启动后，你将看到类似以下的信息：

WebSocket server started at ws://localhost:8080

这意味着 WebSocket 服务器已经在本地的 8080 端口启动，等待客户端连接。

4. 客户端连接

为了测试聊天功能，您需要一个 WebSocket 客户端。您可以使用浏览器的 JavaScript 来连接 WebSocket 服务器并发送消息。

在 HTML 页面中插入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP WebSocket Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #chat {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 10px;
            overflow-y: scroll;
        }
        #message {
            width: 80%;
        }
    </style>
</head>
<body>
    <div id="chat"></div>
    <input type="text" id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const socket = new WebSocket('ws://localhost:8080');
        
        // 当连接建立时
        socket.onopen = function() {
            console.log("Connected to server");
        };

        // 接收来自服务器的消息
        socket.onmessage = function(event) {
            const chatBox = document.getElementById('chat');
            const message = document.createElement('p');
            message.textContent = event.data;
            chatBox.appendChild(message);
        };

        // 发送消息到服务器
        function sendMessage() {
            const messageInput = document.getElementById('message');
            const message = messageInput.value;
            if (message) {
                socket.send(message);
                messageInput.value = '';  // 清空输入框
            }
        }
    </script>
</body>
</html>