小程序接入腾讯im收到消息重复踩坑之路

小程序做了直播功能，在直播功能中的聊天室引用了腾讯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参考：

img.jpg

根据工程师提出的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这样就解决了！