Swoole实战：快速打造基于WebSocket的聊天室

在互联网时代，聊天室成为了人们交流、社交的一个重要场所。而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

登录后复制

首先，我们需要编写一个页面，用于向聊天室发送消息。代码如下：

WebSocket ChatRoom Demo

* {
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;
}

Send

// 初始化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 += `

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

登录后复制

这段代码中，我们将聊天室页面划分为两个部分：消息展示框和消息输入框。同时，定义了WebSocket的连接和发送消息的相关逻辑。

需要注意的是，在本地环境部署时，需要修改WebSocket的地址为本地IP地址，而不是localhost。如果你想使用在线环境，则需要将WebSocket地址改为服务器公网IP。

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