vue实现简单的WebSocket聊天功能

目录
文章目录隐藏
  1. Websocket 介绍
  2. 搭建 FE
  3. 搭建 BE
  4. 结语

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

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

先附一张效果图

vue 实现简单的 WebSocket 聊天功能

Websocket 介绍

简介

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

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

Websocket 与 HTTP 图解

Websocket 与 HTTP 图解

为什么引入 Websocket 协议

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

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

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

搭建 FE

前端基于vue/cliVant使用了bootcdnsocketjs文件

链接后台并登陆

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

后台才用expresssocket.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 聊天功能,欢迎指正!

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue实现简单的WebSocket聊天功能

1 评论

  1. 博主文章写得很棒,学习到了。
    之前做聊天IM开发,使用的是【GoEasy】,支持单聊、群聊、在线用户列表、用户上下线提醒等,对前端技术的支持挺全面的,支持微信小程序、uniapp、vue、react等。有IM开发需求的可以去了解下。地址:

发表回复