websocket实现私聊、群聊

主流程

连接websocket 携带自身 id 连接 websocket，服务端记录用户

获取会话列表 分别获取好友列表、群列表、最近会话列表

阅读消息 根据会话获取历史消息，并将选中会话变为已读

发送消息 消息发送后，服务端将消息返回给发送者作为发送成功的依据，并将消息处理后转发给所有接收者，并记录聊天记录

接收消息 判断接收到的消息是不是自己发的。如果是，则所谓消息发送成功的依据去处理；如果不是，继续判断用户是不是在此私聊/群聊的聊天界面，发出不同的消息提醒

连接 websocket

携带自身 id 连接 websocket

1	let ws = new WebSocket("ws://127.0.0.1:8080/" + uid);

发送消息

// 消息格式
// 通过 chatType 来区分私聊和群聊
{
  chatType: 1,           //聊天类型 (0私聊，1群聊)
  uid: 1,                //发送者id
  birdge: 3,             //接收者 (私聊或群聊的id)
  type: 0,               //消息类型 (0文字，1图片，2音频，3地图)
  message: "消息内容"，   //消息内容
}

ws.send(JSON.stringify(msg));
// 为优化用户体验，在发送时也要在界面上添加此条消息，并将消息状态设置为loading
// 消息发送成功后将状态设为success，10秒后没有接收到发送成功的信号则改为error
msg.state = "loading";
setTimeout(() => {
  if (msg && msg.state === "loading") {
    msg.state = "error";
  }
}, 10000);
msgList.push(msg);

发送表情

发送图片

发送音频

发送地图

接收消息

// 消息格式
// 在原有基础上添加 消息 id、未读消息者列表、消息发送时间
// 接收者阅读消息后，从 unreadids 中移除此接收者 id
{
  id: 4654,              //消息id
  unreadids: [5,6,7]     //未读消息者列表
  time: 548621354,       //发送时间

  chatType: 1,           //聊天类型 (0私聊，1群聊)
  uid: 1,                //发送者id
  birdge: 3,             //接收者 (私聊或群聊的id)
  type: 0,               //消息类型 (0文字，1图片，2音频，3地图)
  message: "消息内容"，   //消息内容
}

ws.onmessage = (e) => {
  const msg = e.data && JSON.parse(e.data);
  // 如果接受到的消息是自己发的，则为发送成功的信号,把消息状态改为success
  if (msg.uid) {
    const m = this.msgList.find((it) => it.state === "loading" && it.message);
    m.state = "success";
  } else {
    // 继续处理消息
    console.log(msg);
  }
};