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

2022-03-06 05:53:02 浏览数 (1)

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

效果图效果图

在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构,接下来重点就是如何在自己的后台接收并处理客户端用户的消息了

1、客户端消息发送

前面我们已经讲过了,为了实现自己在后台对客户端消息的处理,我们将Gatway集成在自己后台项目中了,从而实现客户端发消息>>服务端接收消息>>Gatway转发>>广播客户端的流程

客户端直接将消息Ajax post/get提交给服务端,为了后台清楚的辨别消息的来源我们在发送给服务端的数据中加一个msgtype字段用来指明消息的类型如文字消息、图片消息、视频消息、语音消息等

代码语言:javascript复制
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接收消息

服务端方法中调用

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

注册GatwayWorker服务

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

代码语言:php复制
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)

代码语言:php复制
onmessage(){
	ws.onmessage = e => {
		let msg = JSON.parse(e.data);
		console.log(msg)
		let action_type = msg.action_type;
	};
}

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

代码语言:javascript复制
{
    "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中转发给客户端用户

下一节我们讲客户端消息展示

0 人点赞