仿微信即时通讯SDK-解决socket.io无法接受消息的BUG

仿微信即时通讯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