后端使用的技术是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) {
//运用其他webview页面的js脚本