IM即时通讯（完结 群聊功能的实现）2019年3月15日

今天，完结IM即时通讯，最后的功能是群聊。

一、功能需求

在前台index.php上的群聊绑定点击事件chat_group（），该方法就是调用chating(),然后传值0，将该值通过get方法传给弹出层chat.php，在弹出层获取到uid，通过隐藏域传递js方法sends，如果是0法的话，那么就是广播群聊，就用brodcast_msg处理，在index.php建立brodcast_msg方法，通过websoket传递给workerman服务器，服务器接收到数据调用方法，如果type是brodcast_msg，那么就用类方法process_bordcast_msg处理，将处理后的数据传给前台，前台在判断，数据的uid和登陆用户的uid一直的话，就按“我“进行渲染，否则的话按其他渲染。

二、功能实现

• 前台点击事件

实例

// 群聊
	function chat_group(){
		chating(0);
	}

• 弹出层传递uid调用sends方法

实例

//获取get传过来的uid
    $uid = (int)get('uid');
    if ($uid < 0) {
        exit('用户ID错误');
    }


    //连接数据库
    $db = new Db();
    $title = '';
    if ($uid == 0) {
        //群聊
        $count = $db->table('member')->count();
        $title = "群聊（{$count}）";
    }else {
        //获取点击朋友的信息
        $user = $db->table('member')->where(array('uid'=>$uid))->item();
        $title = $user['nickname'];
    }
// 发送消息
	function sends(){
	    var to_uid = $('#uid').val();
	    var msg = $('.txt-chat').html();
	    if (to_uid == 0) {
	        //广播消息
            brodcast_msg(to_uid, msg)
        } else {
	        //私聊消息
            private_msg(to_uid, msg);
        }

	    $('.txt-chat').html('');
    }
//广播群聊消息
    function brodcast_msg(to_uid, msg) {
        var data = new Object();
        data.type = 'broadcast_msg';
        data.to_uid = to_uid;
        data.msg = msg;
        ws.send(JSON.stringify(data));
    }

• 后台处理数据返回给前台

实例

//处理群发广播消息
    private function process_bordcast_msg ($data) {
        global $ws_worker;
        //拿到发送者用户详细信息
        $send_user_json = $this->redis->hGet($this->hash_wsuid_user_key, $this->connection->uid);
        $send_user_info = json_decode($send_user_json, true);
        //2、遍历服务器上所有的连接
        $connection_list = $ws_worker->connections;
        foreach ($connection_list as $conn) {
            $data['send_uid'] = $send_user_info['uid'];
            $data['nickname'] = $send_user_info['nickname'];
            $data['avatar'] = $send_user_info['avatar'];
            $data['send_time'] = date('Y-m-d H:i:s');
            $conn->send(json_encode($data));
        }
    }

• 前台收到数据后渲染群聊界面

实例

ws.onmessage = function (ev) {
            console.log(ev.data);
            var obj_msg = $.parseJSON(ev.data);
            var myuid = $('#myuid').val();
            if (obj_msg.send_uid == myuid) {
                // 我发的
                var html = '<div class="item me">\
						<img class="avatar" src="'+obj_msg.avatar+'">\
						<div class="userinfo">\
							<p ondblclick="menu(this)"><span class="username" >我</span><span class="layui-badge-rim times">'+obj_msg.send_time+'</span></p>\
							<div class="msg"><div class="layui-badge" style="height: 100%;max-width: 200px;background:#1E9FFF;color:#fff">'+obj_msg.msg+'</div></div>\
						</div>\
					</div>';
                $('#msg_list').append(html);
            }else {
                var html = '<div class="item">\
						<img class="avatar" src="'+obj_msg.avatar+'">\
						<div class="userinfo">\
							<p ondblclick="menu(this)"><span class="username" >'+obj_msg.nickname+'</span><span class="layui-badge-rim times">'+obj_msg.send_time+'</span></p>\
							<div class="msg"><div class="layui-badge" style="height: 100%;max-width: 200px;background:#fff;color:#333">'+obj_msg.msg+'</div></div>\
						</div>\
					</div>';
                $('#msg_list').append(html);
            }
        }

三、总结

整个项目主要是数据在客户端（浏览器）服务器（workerman）之间的数据交互，这里用到了js点击绑定事件、ajax交互、数据库的连接、查询，还有workerman里面的提供的绑定事件等；遇到了各种坑，但是细致检查都解决了，还有各种环境插件的安装也是大费周章，甚至通宵在安装，后来全部解决，这个项目对我来说进步巨大，信心慢慢，继续加油！