仿微信即時通訊SDK-解決socket.io無法接受消息的BUG

E聊是免費開源的IM架構, 使用它可以快速二次開發聊天應用。

1. 現象

使用Web版登入，打開一個好友聊天框，發消息時可以正常發送出去。但好友發往該登入使用者的消息無法在聊天框展示，但朋友清單左側出現消息提示數量。

2. 問題定位

可以顯示消息提示證明用戶端的确收到了消息，但因為某些原因無法在用戶端上展示。可以通過觀察ws下行消息。如下圖:

用戶端收到了服務發過來的ws消息，并傳回了應答消息。

是以，問題應該在下行消息處理，vue展示等方面。

3. 問題解決

經參考E聊其他消息在聊天框展示的代碼，補全Message消息的結構後，問題得到解決。

問題代碼

// 加入剛剛收到的資訊到聊天視窗
this.chatsContent.chats.push({
  toMe: 1,
  body: message.body,
  createTime: new Date().toLocaleString() 
});
           

修複後

// 加入剛剛收到的資訊到聊天視窗
const msgReceive = {
  avatar: message.toTargetAvatar,
  body: message.body,
  createTime: new Date().toLocaleString(),
  fromUser: message.fromUser,
  fromUserAvatar: message.fromUserAvatar,
  fromUserName: message.fromUserName,
  toMe: 1,
  toTarget: message.toTarget,
  toTargetAvatar: message.toTargetAvatar,
  toTargetName: message.toTargetName,
  type: message.type,
  way: message.way,
};
this.chatsContent.chats.push(msgReceive);
           

進入官網

SDK版本:v1.02

技術交流QQ群: 471688937