websocket实现仿微信聊天功能

最新推荐文章于 2025-10-24 12:50:57 发布

原创

最新推荐文章于 2025-10-24 12:50:57 发布 · 4.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#聊天 #仿微信聊天 #websocket #springboot

本文介绍了如何使用SpringBoot后端结合H5和Mui前端框架实现仿微信聊天功能。关键步骤包括前端的WebSocket连接、消息处理，以及后端的ChatHandler处理逻辑，如消息类型判断、通道管理和数据库交互。通过WebSocket实现实时通信，并通过心跳维持连接状态，确保聊天的顺畅进行。

后端使用的技术是springboot前端是H5+和mui框架。
具体步骤很多，我主要概况一下大概，如果有朋友想要源码欢迎加我qq997355706。

前端最主要的地方有4个：
在这里插入图片描述
分别是登录创建与后端websocket的连接，关闭连接和发生错误，和接收消息。
其中open和message又最为重要，里面包括了发送和接收消息。

wsopen: function() {
					console.log("websocket连接已建立...");
					
					var me = app.getUserGlobalInfo();
					//构建ChatMsg
					var chatMsg = new app.ChatMsg(me.id,null,null,null);
					// 构建DateContent	
					var dateContent = new app.DataContent(app.CONNECT,chatMsg,null);
					//发送WebSocket
					CHAT.chat(JSON.stringify(dateContent));
					
					// //每次连接过后,获取用户的未读未签收消息列表
					fetchUnReadMsg();
					
					// //定时发送心跳,要小于后端关闭的时间
					setInterval("CHAT.keepalive()",10000);  
				},

| | |wsmessage: function(e) {
console.log(“接受消息：”+e.data);

				// //转换为DataContent对象
				var dataContent = JSON.parse(e.data);
				// var chatMsg = JSON.parse(e.data);
				
				
				//获取action,判断是否为重新拉取好友/
				var action = dataContent.action;
				if (action === app.PULL_FRIEND) {
					fetchContactList();
					return false;
				}
				
				// //如果不是重新拉取好友列表,则获取聊天消息模型,渲染接收到的聊天记录
				var chatMsg = dataContent.chatMsg;
				var msg = chatMsg.msg;
				var friendUserId = chatMsg.senderId;
				var myId = chatMsg.receiverId;
				// // console.log(msg);
				// // console.log(myId);
				// // console.log(friendUserId);
				
				//调用聊天页面的webview的reciveMsg方法
				// var chatWebview = plus.webview.getWebviewById("chatting-190810CHXGPYWNHH");
				var chatWebview = plus.webview.getWebviewById("chatting-" + friendUserId);
				
				var isRead = true;    //设置消息的默认状态为已读
				
				//当要接受的webview不为空的时候才做渲染
				if (chatWebview != null) {

最低0.47元/天解锁文章