小程序做了直播功能,在直播功能中的聊天室引用了腾讯im来做,主播端只需要监听游客端发起的消息进行展示,而游客端是需要发送消息同时也需要监听到其他游客发送的新消息。
一开始我的想法监听消息就是在onload中进行,监听到新的消息push到messageList数组中并在页面中渲染(一开始错误写法):
tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event) => { //监听新消息
let messageList = that.data.messageList;
messageList.push(...event.data)
that.setData({
messageList
});
})
这时候发现当游客退出直播间再进入直播页面后收到的消息会重复,并且会随着退出重新进入的次数会累加重复的次数。这时候百度了很多:
先是在onUnload生命周期中调用tim.off(TIM.EVENT.MESSAGE_RECEIVED)取消监听但是并没有生效,并且还报错了,发现后面的func是必传的,就把监听写到了一个方法里调用:
groupUpdate() {
let tim = app.globalData.tim
tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event) => { //监听新消息
let messageList = that.data.messageList;
messageList.push(...event.data)
that.setData({messageList})
})
}
tim.off(TIM.EVENT.MESSAGE_RECEIVED, that.groupUpdate);
然而并没有解决。提了腾讯im的工单之后给出了一个demo参考:
根据工程师提出的demo和项目本身进行修改优化之后是这样操作的:
onLoad(options) {
let tim = app.globalData.tim
tim.off(TIM.EVENT.MESSAGE_RECEIVED, that.groupUpdate);
tim.on(TIM.EVENT.MESSAGE_RECEIVED, that.groupUpdate);
},
groupUpdate({data: messageList}) {
messageList.forEach(msg => {
if (msg.type == 'TIMTextElem' || msg.type == 'TIMGroupSystemNoticeElem') {
var messageList = that.data.messageList;
messageList.push(msg);
that.setData({messageList})
}
})
},
onUnload() {
let tim = app.globalData.tim;
tim.off(TIM.EVENT.MESSAGE_RECEIVED, that.groupUpdate);
}
okk这样就解决了!