前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用Swoole实现简单IM聊天

利用Swoole实现简单IM聊天

作者头像
北溟有鱼QAQ
发布2019-12-19 13:33:15
1.6K0
发布2019-12-19 13:33:15
举报
文章被收录于专栏:北溟有鱼QAQ

利用Swoole实现一个简单的IM通讯聊天

  1. 为了大家方便理解,直接上代码,并在代码中写了详细注释
服务端代码如下
代码语言:javascript
复制
<?php
//创建websocket服务器并监听9501 端口
$ws = new Swoole\WebSocket\Server('0.0.0.0',9501);

//当用户连接后,执行的函数
$ws->on('open',function ($ws,$request){
    //控制台中输出
    echo "新用户 {$request->fd} 加入了\n";
    //将用户的fd存到全局变量中,并设置用户的默认昵称
    $GLOBALS['user'][$request->fd]['id'] = $request->fd;
    $GLOBALS['user'][$request->fd]['name'] = "匿名用户".mt_rand(1000,9999);
});
//当收到消息时,执行的函数
$ws->on('message',function ($ws,$data){
    //要返回的消息内容
    $mgs = $GLOBALS['user'][$data->fd]['name'].": " .$data->data;
    //循环每个在线用用户
    foreach ($GLOBALS['user'] as $user)
    {
        //向每个在线的用户推送消息
        $ws->push($user['id'],$mgs);
    }
});
//当用户断开连接时,执行的函数
$ws->on('close',function ($ws,$fd){
    //控制台中输出
    echo "用户 {$fd} 已掉线\n";
    //当用户掉线后,清除掉全局变量中的用户信息
    unset($GLOBALS['user'][$fd]);
});
//启动websocket服务
$ws->start();
前端代码如下
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="width: 60%;height: 100%;border: 1px solid #ccc;margin: 0 auto;">
<!--    消息显示框-->
    <div id="msg" style="width: 100%;height: 400px;text-align: center;"></div>
    <div style="text-align: center;margin-bottom: 20px;">
<!--        输入消息框-->
        <input type="text" id="text" >
<!--        发送按钮-->
        <input type="submit" onclick="send();" value="发送消息">
    </div>
</div>



<script>
    //连接websocket服务端,并创创建 WebSocket 对象
    var wsServer = "ws://106.14.40.226:9501";
    var webSocket = new WebSocket(wsServer);

    //获取消息显示div的dom元素
    var msg = document.getElementById('msg');

    //当用户连接后,简单输出一下
    webSocket.onopen = function (res) {
        console.log('连接成功');
    }
    //当收到用户消息后
    webSocket.onmessage = function (res) {
        //追加收到的消息到消息列表
        msg.innerHTML += res.data + "<br>";
        console.log(res.data);
    }
    //当关闭连接后
    webSocket.onclose = function (res) {
       console.log('服务器拒绝');
    }
    //当发生错误后
    webSocket.onerror = function (res,e) {
        console.log('error');
    }
    //点击发送按钮,实现获取输入框数据并发送
    function send() {
        var text = document.getElementById('text').value;
        webSocket.send(text);
    }
</script>
</body>
</html>
上面就展示了一个简单的IM通讯实例,运行结果如下

本文为北溟有鱼QAQ原创文章,转载无需和我联系,但请注明来自北溟有鱼QAQ https://www.umdzz.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/08/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 利用Swoole实现一个简单的IM通讯聊天
    • 服务端代码如下
      • 前端代码如下
        • 上面就展示了一个简单的IM通讯实例,运行结果如下
        相关产品与服务
        即时通信 IM
        即时通信 IM(Instant Messaging)基于腾讯二十余年的 IM 技术积累,支持 Android、iOS、Mac、Windows、Web、H5、小程序平台且跨终端互通,低代码 UI 组件助您30分钟集成单聊、群聊、好友与资料、消息漫游、群组管理、会话管理、直播弹幕、内容审核和推送等能力。适用于直播互动、电商带货、客服咨询、社交沟通、企业办公、互动游戏、医疗健康等场景。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档