小程序中创建webSocket连接
需求
- 列表页需要实时获取新消息提示，详情页（聊天室）实现用户实时聊天
页面逻辑
列表页
首先在列表页开启ws服务，并监听开启/关闭事件，ws开启后，在wx.onSocketMessage监听消息
// 列表页
onLoad(options) {
this.init();
// 监听接受消息
wx.onSocketMessage((res) => {})
},
init() {
//# 开启ws
this.openWS()
},
// 开启服务
openWS() {
const token = wx.getStorageSync('token');
const app = getApp();
wx.connectSocket({
url: app.globalData.socketPath + '?sec-websocket-protocol=' + encodeURIComponent(token),
header: {
'content-type': 'application/json',
'from': 'wechatmini'
},
success() {},
fail() {}
})
}
复制代码- ws要确保只连一个，统一在列表页监听服务开启/关闭，
- 服务断开后要重连服务，利用小程序进入详情后列表页不销毁特性，在列表页或详情页断线后都会执行列表页的重连事件
// # 列表页
init() {
// # 1.ws要确保只连一个，用全局变量判断
!this.data.socketOpened && this.openWS();
// # 监听服务
wx.onSocketOpen((res) => {
console.log('WebSocket 已开启！')
this.data.socketOpened = true;
})
// # 重连
wx.onSocketClose((res) => {
console.log('WebSocket 已关闭！')
this.data.socketOpened = false;
// # 在列表页面重连服务
this.openWS()
})
}
复制代码重连服务
为了减轻服务器的压力，防止连不上服务会一直请求连接服务，做了个延时处理，用reconnectDelay控制，成功后再重置。断线有2种情况，一是连接失败，二是连接成功后断线：
init() {
...
wx.onSocketOpen((res) => {
console.log('WebSocket 已开启！')
this.data.socketOpened = true;
this.data.reconnectDelay = 0;
})
wx.onSocketClose((res) => {
console.log('WebSocket 已关闭！')
this.data.socketOpened = false;
// 在列表页面重连服务,重连失败调用时间+1s
setTimeout(() => {
this.openWS()
this.data.reconnectDelay += 1000
}, this.data.reconnectDelay);
})
...
}
openWS() {
...
wx.connectSocket({
...
fail(res) {
console.log('连接失败');
// 在列表页面重连服务,重连失败调用时间+1s
setTimeout(() => {
this.openWS()
this.data.reconnectDelay += 1000
}, this.data.reconnectDelay);
}
})
},
复制代码重连成功后，需要给服务端发送reconnect消息，根据和服务端约定，需要发送每个聊天的usif和该聊天最后一条消息id
// # 列表页
init(){
...
wx.onSocketOpen((res) => {
...
// # msgList存储的是每个聊天最后一条消息对象
let len = this.data.msgList.length;
// # 发送重连消息
for (let i = len - 1; i >= 0; i--) {
let lastMsg = this.data.msgList[i];
// # util.sendMsg是公共方法,向服务端发送消息
util.sendMsg({
action: 'reconnect',
data: {
index: lastMsg.id
},
usif: lastMsg.usif
})
}
})
}
// # util.js
function sendMsg({action,data,usif}) {
data['usif'] = usif
let msg = {
action: action,
data: data
}
wx.sendSocketMessage({
data: JSON.stringify(msg),
success: function () {},
})
}
复制代码消息处理
列表页只要标志新消息，不涉及发送，只需要对接收的消息做处理
服务端约定的message自定义事件返回类型说明
操作 含义 fail 连接成功，但是获取用户信息失败（一般在redis连接失败，或者数据被清空时出现，此时需要重连） online 医生上线通知，此通知会广播所有用户（医生/普通用户） push 消息推送通知，收到此消息时可把数据插入到消息列表 pushback 消息推送反馈，通知用户消息是否发送成功，成功则可插入列表，失败则需要重发 read 消息已读通知，通知发消息的对象，对方已读此消息 reconnect 断线重连时，此操作会返回对方最新发送的50条未读消息，可插入消息列表 online 用户下线通知，此通知会广播所有用户，需要前端根据ID自行判断下线用户是否是在聊天的对象
// # 列表页
// # 监听接受消息
wx.onSocketMessage((res) => {
that.msgOperation({})
})
msgOperation({msgType,errcode = 0,data, errmsg}) {
let that = this
// # 根据不同消息类型做对应处理
switch (msgType) {
case 'push':
console.log('列表收到新消息');
// # Message是自定义类，用于对消息做初始化
data = new Message(data);
if (errcode == 0) {
// # taskList是存储聊天订单
for (let i = 0; i < that.data.taskList.length; i++) {
// # 收到相应订单的新消息则对该订单进行hasnews标识
if (data.booking_id == that.data.taskList[i].id) {
// # 如何只改变数组中某个值的属性值，中括号法
var hasnews = 'taskList[' + i + '].hasnews'
that.setData({
[hasnews]: 1,
})
}
}
// # 将新消息作为last_msg加到msgList,这一步是为断线重连发送消息做准备
that.data.msgList.forEach((item, idx) => {
if (item.booking_id == data.booking_id) {
item = Object.assign({}, item, data)
that.data.msgList.splice(idx, 1)
that.data.msgList.push(item)
}
})
that.setData({
msgList: that.data.msgList
})
}
break;
case 'pushback':
// # 列表页不需要对发送反馈做处理
break;
case 'read':
//消息已读反馈，根据id标记消息为已读
data = new Message(data);
var msgid = data.id;
var length = that.data.msgList.length
// # msgList更新是为了??
for (let i = length - 1; i >= 0; i--) {
if (that.data.msgList[i].id == msgid) {
let is_read = "msgList[" + i + "].is_read";
that.setData({
[is_read]: 1
})
}
}
// # 更新is_read, 消息已读/未读状态是根据taskList中的last_message来判断的
for (let i = that.data.taskList.length - 1; i >= 0; i--) {
if (that.data.taskList[i].last_message.id == msgid) {
let is_read = "taskList[" + i + "].last_message.is_read";
that.setData({
[is_read]: 1
})
}
}
break;
case 'online':
console.log('医生上线');
break;
case 'reconnect':
console.log('断线重连', data);
// # 将收到的新消息加入msgList,作新消息处理
if (data.length) {
that.data.taskList.forEach((item, index) => {
for (let i = 0; i < data.length; i++) {
if (data[i].booking_id == item.id) {
var hasnews = 'taskList[' + index + '].hasnews'
that.setData({
[hasnews]: 1,
})
}
}
});
}
default:
}
},
复制代码列表页主要负责服务开启/关闭，及对push/reconnect/read消息作处理
聊天室-详情页
服务端约定的send发送消息事件说明
操作 含义 push 消息推送（对方会在message事件中收到此消息） read 消息已读通知（对方会在message事件中收到此消息） reconnect 断线重连（会在自己客户端message事件中收到断线时未收到的消息）
操作：
- 进入聊天室接口获取历史消息列表
- 打开聊天室，对未读消息发送
read - 点击发送后，发送
push - 断线后重连成功，发送
reconnect（列表页执行）
// # 聊天室
onLoad() {
this.getMessageList();// 获取解读消息列表
// # 监听接受消息
wx.onSocketMessage((res) => {
var data = JSON.parse(res.data);
// # 聊天框打开时才执行
if (this.data.chatOpened) {
this.msgOperation({
msgType: data.action,
data: data.data,
errmsg: data.errmsg,
errcode: data.errmsg
})
}
})
},
onShow() {
this.setData({
chatOpened: true,
})
},
onUnload() {
this.setData({
chatOpened: false
})
},
// # 点击发送按钮
sendData(e) {
let data = {
msg_type: 1,
messages: e.detail.content,
usif: this.data.usif
};
wx.sendSocketMessage({
data: JSON.stringify({data, action: 'push'}),
success() {},
fail() {
wx.showToast({
title: '消息发送失败',
icon: 'none',
duration: 200
})
}
})
},
复制代码- 历史消息作已读处理,消息类型有文字，图片，语音，此处不另做分类处理
// 聊天室
getMessageList(){
...
module.messageList().then(res => {
...
if (res.data.data.length) {
let msgList = [];
for (let i = 0; i < res.data.data.length; i++) {
let msg = new Message(res.data.data[i]);
// # 标记已读 c_user_type==1 为接收消息
if (msg.is_read == 0 && msg.c_user_type == 1) {
msg.is_read = 1;
util.sendMsg({
action: 'read',
data: {
id: msg.id
},
usif: this.data.usif
});
}
msgList.push(msg);
}
this.setData({ msgList })
}
})
}
复制代码- 监听消息及处理，重点在于
pushback和reconnect的处理 pushback后将消息推送到列表reconnect时要将收到的消息追加到消息列表中
msgOperation({msgType,errcode = 0,data,errmsg}) {
let that = this
console.log('收到新消息', data);
switch (msgType) {
case 'push':
data = new Message(data);
// # 收到新消息push到消息列表
if (data.booking_id == that.data.booking_id) {
let msgList = that.data.msgList
msgList.push(data)
that.setData({
msgList: msgList,
})
console.log('若聊天框打开，则发消息告知已读');
util.sendMsg({
action: 'read',
data: data,
usif: that.data.usif
});
}
break;
case 'pushback':
data = new Message(data);
//消息发送成功的返回
if (errcode == 0) {
let msgList = that.data.msgList
//push到消息列表
msgList.push(data)
that.setData({msgList})
} else {
console.log('发送失败：', errmsg)
}
break;
case 'read':
// # 不处理
break;
case 'online':
console.log('医生上线');
break;
case 'reconnect':
if (errcode == 0) {
data.forEach(msg => {
that.data.msgList.push(msg)
});
that.setData({
msgList: that.data.msgList
})
};
default:
}
},
复制代码其实，实时聊天前端部分逻辑还是相对简单的，主要在于
- 控制服务的开启/关闭，断线后的处理
- 对各种消息事件的处理
- 发送各类消息