搜索

首页 >php框架 >Swoole >Swoole实战：快速打造基于WebSocket的聊天室

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

WBOY
WBOY原创
2023-06-14 16:20:081324浏览

在互联网时代，聊天室成为了人们交流、社交的一个重要场所。而WebSocket技术的出现，则使得实时通信变得更为流畅、稳定。今天，我们介绍如何利用Swoole框架快速搭建一个基于WebSocket的聊天室。

Swoole是一款高性能的 PHP 协程网络通信框架，采用 C 语言编写，集异步IO、协程、网络通信等功能于一身，使得 PHP 代码能够像 Node.js 一样高效处理事件驱动异步并发编程。可以说，Swoole是开发高并发网络应用的重要工具。

下面，我们将一步步介绍如何使用Swoole实现基于WebSocket的聊天室，并且能够支持多人在线聊天。

  1. 环境准备

在开始之前，需要确保你已经安装了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
  1. 客户端页面

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

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

  1. 服务端代码

接下来，我们编写服务端代码。通过 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 服务器。

  1. 结论

到此为止，我们已经实现了基于WebSocket的多人在线聊天室。在客户端页面中，你可以发送任意消息，并且消息将被广播到所有在线客户端中进行展示。

通过Swoole框架，我们能够轻松创建高效的WebSocket服务器，这为实现高性能、低延迟、可靠的实时通信提供了便捷的手段。

以上是Swoole实战：快速打造基于WebSocket的聊天室的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Swoole网络编程实现异步任务的技巧下一篇：Swoole实践经验：使用协程集成高并发消息队列

相关文章

查看更多