PHP用Swoole的WebSocket功能编写聊天室Demo

这篇具有很好参考价值的文章主要介绍了PHP用Swoole的WebSocket功能编写聊天室Demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前提:

  1. linux环境下PHP有可用的Swoole扩展。
  2. 9501端口可访问。

后端

<?php
class Helper {
    /**
     * @function 将数组中的null值转化为空字符串
     * @param    $arr array 要转化的数组
     * @return   array
     * @other    void
     */
    public static function nullToEmptyString($arr) {
        if (! $arr) {
            return $arr;
        }

        foreach ($arr as $key => $value) {
            if (null === $value) {
                $arr[$key] = '';
            }
            if (is_array($value)) {
                $arr[$key] = static::nullToEmptyString($value);
            }
        }

        return $arr;
    }


    /**
     * @function 统一的RestFul风格的Api格式
     * @param    $code int    状态码
     * @param    $msg  string 显示的信息
     * @param    $data mixed  返回的数据
     * @return   string
     * @other    void
     */
    public static function jsonReturn($code = 0, $msg = '', $data = []) {
        header('Content-type:text/json;Charset=UTF-8');
        return json_encode([
            'code' => $code,
            'msg'  => $msg,
            'data' => $data === null ? [] : static::nullToEmptyString($data),
        ], JSON_UNESCAPED_UNICODE);
    }


    /**@function 配置人数
     * @param    $num
     * @return   bool
     */
    public static function setPersonNumber($num) {
        return file_put_contents(__DIR__ . '/personNum.txt', $num);
    }


    /**
     * @function 获取人数
     * @return   int
     */
    public static function getPersonNumber() {
        $file = __DIR__ . '/personNum.txt';
        if(! file_exists($file)) {
            return 0;
        }

        return file_get_contents($file);
    }


    /**
     * @function 发消息对外广播
     * @param    $ws  object \Swoole\WebSocket\Server
     * @param    $msg string 广播数据
     * @return   null
     */
    public static function broadcast(Swoole\WebSocket\Server $ws, $msg) {
        $fd = static::getPersonNumber();
        if($fd > 0) {
            for($i = 1; $i <= $fd; $i++) {
                $ws->push($i, $msg);
            }
        }

        return null;
    }
}


//创建WebSocket Server对象,监听0.0.0.0:9501端口。
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9501);


//监听WebSocket连接打开事件。
$ws->on('Open', function ($ws, $request) {
    $ws->nickname = '游客'. $request->fd;
    Helper::setPersonNumber($request->fd);
    Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'enter', 'user' => $ws->nickname, 'content' => '']));
    return null;
});


//监听WebSocket消息事件。
$ws->on('Message', function ($ws, $frame) {
    Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'say', 'user' => $ws->nickname, 'content' => htmlspecialchars($frame->data)]));
    return null;
});


//监听WebSocket连接关闭事件。
$ws->on('Close', function ($ws, $fd) {
    Helper::setPersonNumber(-- $fd);
    Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'leave', 'user' => $ws->nickname, 'content' => '']));
    return null;
});


$ws->start();

前端

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简易聊天室</title>
    <style>
        body * {font-size: 20px;width: 400px;height: 40px;}
    </style>
</head>
<body>
    <input type="text" id="text">
    <input type="button" id="send" value="发送">
    <div id="box"></div>

</body>
<script>
    //初始化
    var websocket = new WebSocket('ws://192.168.3.180:9501/swoole.php');


    //打开事件
    websocket.onopen = function (evt) {
        document.getElementById('send').onclick = function() {
            var msg = document.getElementById('text').value;
            if(msg) {
                websocket.send(msg);
            }
        }
    };


    //消息事件
    websocket.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        var data = data.data;
        if(data.type == 'enter') {
            var e = '<p style="color:green">' + data.user + '进入聊天室</p>';
        } else if(data.type == 'leave') {
            var e = '<p style="color:red">' + data.user + '离开聊天室</p>';
        } else if (data.type == 'say') {
            var e = '<p style="color:black">' + data.user + '说:' + data.content + '</p>';
        }

        var element = document.getElementById('box').innerHTML += e;
    };


    //关闭事件
    websocket.onclose = function (evt) {
        console.log("WebSocket 已断开连接");
    };


    //错误事件
    websocket.onerror = function (evt, e) {
        console.log("WebSocket 错误:" + evt.data);
    };
</script>
</html>

文章来源地址https://www.toymoban.com/news/detail-498265.html

到了这里,关于PHP用Swoole的WebSocket功能编写聊天室Demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • websocket网页聊天室

    实现websocket网页聊天室可以遵循以下步骤: 创建一个基于浏览器的WebSocket客户端,使用JavaScript。可以使用HTML5的WebSocket API。 编写服务器端的WebSocket应用程序,可以使用Node.js和WebSocket模块。 在服务器端创建一个WebSocket服务器,监听客户端请求,并将客户端与服务器端连接起

    2024年02月06日
    浏览(16)
  • Django实现websocket聊天室

    WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器双向通信,即允许服务器主动发送信息给客户端。因此,在WebSocket中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,客户端和服务器之间的数据交换变

    2023年04月23日
    浏览(17)
  • 【WebSocket】SpringBoot整合WebSocket实现聊天室(一)

    目录 一、准备 1、引入依赖 2、创建配置类 二、相关注解 首先我们需要在项目中引入依赖,有两种方式。第一种我们可以在创建Spring Boot项目时搜索WebSocket然后勾选依赖 第二种是我们可以直接在项目的pom.xml文件中插入以下依赖 我们需要进行如下配置 ServerEndpointExporter 是一个

    2024年02月13日
    浏览(18)
  • 基于WebSocket的在线文字聊天室

    与Ajax不同,WebSocket可以使服务端主动向客户发送响应,本案例就是基于WebSocket的一个在线聊天室,不过功能比较简单,只能满足文字交流。演示如下。 案例学习于b站up主,链接 。这位up主讲的非常清楚,值得去学习。本文属于记录自我学习过程的文章。 项目目录下app.js 项

    2024年02月13日
    浏览(20)
  • Java+Vue实现聊天室(WebSocket进阶-聊天记录)

    WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服

    2024年02月11日
    浏览(14)
  • webSocket 聊天室 node.js 版

    全局安装vue脚手架  npm install @vue/cli -g 创建 vue3 + ts 脚手架  vue create vue3-chatroom src 同级目录下建 server:   核心代码: 完整代码:

    2024年02月12日
    浏览(19)
  • springboot+websocket实现简单的聊天室

    HTML HTML是创建和构造网页的标准标记语言。它使用一组标记标签描述网页上的内容结构。HTML文档由HTML元素的嵌套结构组成,每个元素由尖括号( )括起的标签表示。这些元素定义了网页的各个部分,如标题、段落、图像、链接、表单等。 JavaScript JavaScript是一种高级、解释性

    2024年01月21日
    浏览(28)
  • 在线聊天室(Vue+Springboot+WebSocket)

    实现了一个简单的在线聊天室的前后端。前端用Vue实现,后端用Springboot实现。         在线聊天室的功能包括创建用户和显示在线用户列表、发送消息和显示消息列表、用户和消息列表实时更新这几点。以下是整体功能的活动图: 用户身份         进入聊天室的用户需

    2024年01月15日
    浏览(16)
  • 【项目设计】基于WebSocket的Web聊天室

    本项目的名称为Web聊天室,即类QQ群组聊天,多个用户可以在同一个群组收发消息进行聊天 项目实现的业务 注册功能:用户输入账号,密码,昵称,图像点击即可注册用户(账号和昵称不能重复) 登陆功能:用户输入账号,密码即可进行登陆(如果登陆的账号已在别处登陆

    2023年04月18日
    浏览(37)
  • websocket+elementui+vue实现简易聊天室

    搭建服务端环境 安装socket.io 服务端基于node,js的express框架生成,所以写成模块,引入至app.js中 其中,io.sockets.emit用于向所有建立连接的客户端发送信息,socket.broadcast.emit用于向除发送方之外的客户端发送信息。 客户端基于vue和elementui 进入聊天页面后,先判断用户是否登录,

    2024年04月25日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包