利用Swoole实现简单IM聊天

北溟有鱼QAQ

发布于 2019-12-19 05:33:15

1.6K00

代码可运行

文章被收录于专栏：北溟有鱼QAQ北溟有鱼QAQ

运行总次数：0

代码可运行

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

为了大家方便理解，直接上代码,并在代码中写了详细注释

服务端代码如下

<?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();

前端代码如下

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