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

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

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}.tgztar xzvf swoole-{version}.tgzcd swoole-{version}phpize./configure --enable-async-redis --enable-coroutine --enable-openssl --enable-http2 --enable-socketsmake && 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的聊天室的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:php转换时间md5大写
下一篇:在ThinkPHP框架下怎么进行增删改操作

发表评论

关闭广告
关闭广告