今天，完结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一直的话，就按“我“进行渲染，否则的话按其他渲染。
二、功能实现
前台点击事件
弹出层传递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里面的提供的绑定事件等；遇到了各种坑，但是细致检查都解决了，还有各种环境插件的安装也是大费周章，甚至通宵在安装，后来全部解决，这个项目对我来说进步巨大，信心慢慢，继续加油！
