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