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

2023年 8月 5日 86.6k 0

在互联网时代,聊天室成为了人们交流、社交的一个重要场所。而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 服务器。代码如下:

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论