最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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聊天功能,欢迎指正!

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue实现简单的WebSocket聊天功能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发