vue实现简单的WebSocket聊天功能

1. Websocket 介绍
• 简介
• Websocket 与 HTTP 图解
2. 搭建 FE
• 链接后台并登陆
• 绑定登陆
• 绑定退出
• 接受消息
• 发送消息
3. 搭建 BE
• 用户登陆
• 用户退出
• 广播聊天内容
4. 结语

最近项目中一直在使用 vue 作为前端框架，可是用到的只有很少一部分的功能，特别是 vuex，为了更加深入了解 vue 框架，在工作之余搭建了一款基于 vue+WebSocket 的简单聊天项目，里面有很多不足之处欢迎大佬批评指正。

相信大家对 Websocket 都不会陌生，耳熟能详的都知道一点，这里我简单的对 Websocket 做一个介绍，需要详细研究的，下去自行查资料。

先附一张效果图

为什么引入 Websocket 协议

比如说，我们想了解今天的股票，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。

我们只能使用”轮询“：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。WebSocket 就这样诞生了。

搭建 FE

前端基于vue/cli，Vant使用了bootcdn的socketjs文件

链接后台并登陆

initChat() {
  let userInfo = {
    userId: Date.now(),
    username: this.username,
  }；
  //登录之后幵始连接 ws
  window.socket = window.io.connect('ws://localhost:3000/');
  window.socket.emit('login', userlnfo);
  window.userInfo = userInfo

绑定登陆

window.socket.on('login', (data) =>{
 _this.updateMessage(data, 'login');
});

绑定退出

window.socket.on('logout', (data) =>{
 _this.updateMessage(data, 'logout');
});

接受消息

window.socket.on('message', (dataObj) =>{
  this.messageList.push({
    …dataObj,
    addtime: new Date().toLocaleTimeString(),
  });
});

发送消息

subnitNessage() {
  if (this.message != '') {
    var obj = {
      ...this.userInfo,
      content: this.message,
    };
    this.socket.emit('message', obj);
    this.message = '';
    return;
  }
  alert('请输入聊天内容');

搭建 BE

后台才用express，socket.io搭建

用户登陆

socket.on('login',function(obj) {
  socket.name = obj.userId;
  //筛选
  // eslint-disable-next-line no-prototype-builtins 
  if (!onlineUsers.hasOwnProperty(obj.userId)) {
    onlineUsers[obj.userId] = obj.username;
    //在线人数+1 
    onlineCount++;
  }
  //登陆
  io.emit('login', {
    onlineUsers: onlineUsers,
    onlineCount: onlineCount,
    user: obj,
  })；console.log(obj.username + '加入了聊天室');
});

用户退出

socket.on('disconnect'，function() {
  //退出的用户从在线列表中删除
  // eslint-disable-next-line no-prototype-builtins
  if (onlineUsers.hasOwnProperty(socket.name)) {
    //退出用户的信息
    var obj = {
      userId: socket.name,
      username: onlineUsers[socket.name];
      //删除
      delete onlineUsers[socket.name];
      //在线人数-1 
      onlineCount--;
      //向所有客户端广播用户退出 
      io.emit('logout', {
        onlineUsers: onlineUsers,
        onlineCount: onlineCount,
        user: obj,
      });
      console.log(obj.username + '退出了聊天室');
    }
  });

广播聊天内容

socket.on('message',function(obj) {
  //向所有客户端广播发布的消息 
  io.emit('message', obj);
  console.log(obj.username + '说:' + obj.content);
});

结语

以上就是 vue 实现简单的 WebSocket 聊天功能，欢迎指正！