IM即时通信多房间聊天室仿微信聊天(二)

IM即时通信多房间聊天室仿微信聊天(服务器自定义处理客户端消息)

在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构，接下来重点就是如何在自己的后台接收并处理客户端用户的消息了
1、客户端消息发送
前面我们已经讲过了，为了实现自己在后台对客户端消息的处理，我们将Gatway集成在自己后台项目中了，从而实现客户端发消息>>服务端接收消息>>Gatway转发>>广播客户端的流程
客户端直接将消息Ajax post/get提交给服务端，为了后台清楚的辨别消息的来源我们在发送给服务端的数据中加一个msgtype字段用来指明消息的类型如文字消息、图片消息、视频消息、语音消息等

send() {this.content = this.message;this.action_type = 'send_msg';this.msgtype = 0;this.send2Server();  this.message = '';this.getHeight();
},
/* 发送消息至服务器 */
async send2Server() {const json = await send2Server({method: "post",query:{action_type:this.action_type,group_id:this.roominfo.roomid,content:this.content,msgtype:this.msgtype}});
},

2、服务端通过Gatway接收消息
服务端方法中调用

// 设置GatewayWorker服务的Register服务ip和端口，请根据实际情况改成实际值(ip不能是0.0.0.0)
`Gateway::$registerAddress = '127.0.0.1:1236';`

注册GatwayWorker服务
然后接收客户端请求来的数据根据msgtype进行不同的处理逻辑拼接要广播给所有客户端的消息然后调用Gateway::sendToAll将拼接好的消息广播给客户端用户

public function send2Server(){if(!IS_POST){$this->res['code'] = 100;$this->res['msg'] = '请用post方法请求接口';$this->response($this->res,'json');}//接收客户端消息数据$post_data = file_get_contents('php://input');$json = json_decode($post_data);$action_type = $json->action_type;$msgtype = $json->msgtype;$content = $json->content;Gateway::$registerAddress = '127.0.0.1:1238';$photo = $this->user['head_img'];$username = $this->user['nickname'];// 登录if ($action_type == 'login') {// 向客户端发送 $data// 给所在群组广播新用户加入$send_data = json_encode(['action_type' => 'new_user_login','username' => $username,'photo' => $photo,]);// 向任意群组的网站页面发送数据Gateway::sendToAll($send_data);}// 发送消息if ($action_type == 'send_msg') {// 给所用用户广播新用户加入$send_data = json_encode(['action_type' => 'new_msg','msgtype' => $msgtype,'uid' => $uid,'photo' => $photo,'username' => $username,'content' => $content,]);// 向任意群组的网站页面发送数据Gateway::sendToAll($send_data);}
}

3、客户端接收广播消息
同IM即时通信多房间聊天室仿微信聊天(一)中的(6)

onmessage(){ws.onmessage = e => {let msg = JSON.parse(e.data);console.log(msg)let action_type = msg.action_type;};
}

打印msg我们就可以看到某个用户发送的消息了：

{"action_type": "new_msg","msgtype": 0,"uid": "2","photo": "http://81.68.107.23/Public/attached/2022/02/05091330275.jpeg","username": "南京⌘陆小凤","content": "2222"
}

至此相信大家都能看得出来为什么要走服务器进行处理消息然后再进行分发广播了吧。
因为业务场景是将聊天室集成在app中公用app的登陆系统的，所以走服务端处理时候我们可以很轻松的获取到客户端用户的昵称、头像等信息拼接到send_msg中转发给客户端用户
下一节我们讲客户端消息展示

IM即时通信多房间聊天室仿微信聊天(二)相关推荐

IM即时通信多房间聊天室仿微信聊天(四)
聊天记录的保存和展示 IM即时通信多房间聊天室仿微信聊天(一) IM即时通信多房间聊天室仿微信聊天(二) IM即时通信多房间聊天室仿微信聊天(三) 聊天消息的保存我们直接在服务端接收到客户端发送的消息 ...
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
react仿微信web版聊天室|仿微信客户端react版
基于react+react-dom+react-router-dom+redux+react-redux+webpack+nodeJs等技术混合开发的手机端仿微信界面聊天室--reactChatRoo ...
h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
php类似微信聊天框,仿微信聊天功能
摘要: 微信聊天 window.onload = () => { // 获取按钮 let btn = document.getElementById('btn'); // 获取输入框 let t ...
h5仿微信聊天室weChatRoom|仿微信聊天界面
html5仿微信聊天|h5仿微信聊天室|仿微信聊天界面|仿微信群聊/单聊平时一闲下来就撸项目代码,最近一直在开发h5仿微信聊天项目,使用到了html5+css3+zepto+iscroll+swip ...
electron-vue仿微信聊天客户端|electron聊天应用
使用Electron+Vue+electron-vue+vuex+Node+vue-video-player等技术构建开发的高仿微信客户端聊天室,实现了消息发送/表情,光标处插入表情,图片/视频预览, ...
react仿微信聊天室|react即时聊天IM系统|react群聊
react+redux仿微信聊天IM实战|react仿微信界面|react多人群聊天室最近一直捣鼓react开发,就运用react开发了个仿微信聊天室reactChatRoom项目,基于react+ ...

IM即时通信多房间聊天室仿微信聊天(二)

IM即时通信多房间聊天室仿微信聊天(服务器自定义处理客户端消息)

IM即时通信多房间聊天室仿微信聊天(二)相关推荐

最新文章

热门文章