vue实现简单的WebSocket聊天功能

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

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

先附一张效果图

Websocket 介绍

简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。诞生于 2008 年，在 2011 年的时候被定为标准。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

Websocket 与 HTTP 图解

为什么引入 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 聊天功能，欢迎指正！

以上关于vue实现简单的WebSocket聊天功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。