vue实现简单的WebSocket聊天功能

最近项目中一直在使用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抓紧创作!

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue实现简单的WebSocket聊天功能

1 评论

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

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们