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

我们是最后一代

于 2022-02-25 23:48:06 发布

阅读量500

点赞数 1

分类专栏：仿微信多房间IM即时通信聊天室文章标签：微信服务器 cordova vue

本文链接：https://blog.csdn.net/jtyxj/article/details/123142990

版权

仿微信多房间IM即时通信聊天室专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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"
}