vue+websokect实现实时聊天，可单聊、可群聊
.png)
效果图
效果网站链接，安全性不符合实际上线使用，仅供学习交流
https://livequeen.top
效果小程序二维码 （需现在web端获取账号）
思路
一个实时聊天功能
第一，肯定要能够实现单聊或者群聊，所以不能无差别广播，要实现向指定用户发送广播。
第二，区分在线和离线，所以必须实现聊天信息要能保存到MYSQL数据库，即便离线，也能再次上线时收到消息。
第一步
一个实时聊天的功能，其核心就是websokect，进行双向平等对话，从后端主动推送消息到前端，实现实时推送消息的功能。关于websokect相关介绍，就不过多介绍，都能百度到，我这里推荐两个:
阮一峰老师的一篇文章
MDN文档
第二步
写后端核心代码，这里用的是Node.js的express框架。
ps：如果需要用java做后端的，可以看看我的这个帖子，链接如下：Springboot实现websocket（连接前jwt验证token）_springboot整合websocket好友聊天如何实现 token的方式-CSDN博客
注释解析：conn是用户的连接信息，在用户连接上ws端口时，将用户id信息发送过来，并以其id为key存储conn连接信息，用于指定用户发送广播，实现单聊或指定群聊，而broadcast（）就是我们写的指定用户实现单聊的广播的方法。
let conns2 = {}// 实时聊天用户连接属性集
// websocket实时聊天
const wss2 = new WebSocket.Server({ port: 8082 })
wss2.on('connection', function connection (ws, req) {
// 获取传递来的参数，req.url为端口号后的地址，需要处理只留下参数
let index = req.url.indexOf('=')
let id = req.url.substr(index + 1, req.url.length)
console.log('成功连接实时聊天,用户:' + id)
// 储存用户连接属性,用于识别发送对象
conns2[id] = ws
// 收到前端传来的消息
ws.on('message', function incoming (message) {
const obj = JSON.parse(message)
// 广播给前端
broadcast(obj)
})
// 关闭
ws.on('close', function (e) {
console.log(e, '服务端连接关闭')
})
// 错误
ws.on('error', function (e) {
console.log(e, '服务端异常')
})
})
forEach遍历循环，利用typeof判断conns已连接用户集合（在线集合）中是否有该用户，来判断是否在线，然后使用sendText()发送消息。
// 实时聊天发送消息处理
function broadcast (obj) {
// 储存需要广播的对象id
let users = []
// 判断是否为群聊，1为否，2为是
if (obj.type === '1') {
users.push(obj.send_id)
users.push(obj.accept_id)
} else if (obj.type === '2') {
users = obj.accept_group
}
// 判断是否存在发送对象
if (users && users.length) {
users.forEach(item => {
// 判断是否’正在连接中‘是否有该用户
if (typeof conns2[item] === 'undefined') {
console.log(item + '---该用户已离线')
} else {
// 发送消息给前端
conns2[item].send(JSON.stringify(obj))
}
})
}
}
第三步
写前端样式，这里用的是vue框架
{{userName}}
{{item.name}}
[{{messlst[item.id][messlst[item.id].length-1].send_name}}]{{messlst[item.id][messlst[item.id].length-1].content}}
暂无消息
{{acceptUser}}
{{item.send_name}} {{item.send_date}}
{{item.content}}
{{item.send_date}} {{item.send_name}}
{{item.content}}
发送
暂无消息，请选择用户对象
CSS样式
.mess{
border-radius: 5px;
background-clip: padding-box;
margin:20px auto;
width: 950px;
height: 600px;
border: 1px #8a8282;
box-shadow: 0 0 10px #9b9393;
background-color: white;
display: flex;
}
.mess_user_list{
width: 270px;
height: 100%;
background-color: #9f9c9c;
}
.mess_dialog{
width: 680px;
height: 600px;
}
.mess_dialog_false{
width: 680px;
height: 600px;
text-align: center;
line-height: 600px;
}
.dlog_header{
width: 680px;
height: 50px;
border-bottom: 1px solid #8a8282;
display: flex;
align-items: center;
}
.dlog_content{
width: 680px;
height: 370px;
border-bottom: 1px solid #8a8282;
overflow-y: scroll;
}
.dlog_footer{
width: 680px;
height: 180px;
}
.user{
height: 60px;
width: 270px;
/*垂直居中*/
display: flex;
align-items: center;
border-bottom: 1px solid #0a0a0a;
}
.user_list{
height: 540px;
overflow-y: scroll;
}
.user_list_item{
height: 60px;
background-color: #b3b3b4;
border-bottom: 1px solid #0a0a0a;
display: flex;
align-items: center;
}
.content_other{
width: 650px;
}
.content_me{
width: 650px;
text-align: right;
}
第四步
前端js代码，连接后端ws端口，监听ws的四个状态，并各种绑定事件：
open-连接成功
close-连接关闭
error-连接错误
message-收到后端传来的消息
const ws = new WebSocket('ws://localhost:8082?id=' + id)
mounted () {
ws.addEventListener('open', this.handleWsOpen.bind(this), false)
ws.addEventListener('close', this.handleWsClose.bind(this), false)
ws.addEventListener('error', this.handleWsError.bind(this), false)
ws.addEventListener('message', this.handleWsMessage.bind(this), false)
},
methods: {
handleWsOpen () {
console.log('WebSocket2已经打开 ')
},
handleWsClose (e) {
console.log('WebSocket2关闭')
console.log(e)
},
handleWsError (e) {
console.log('WebSocket2发生错误')
console.log(e)
},
handleWsMessage (e) {
console.log('WebSocket2收到消息:' + e.data)
}
}
在连接成功ws后端端口后，前端就可以使用ws.send()发送消息给后端，同时存储消息于mysql，然后后端处理完成后，再按需发送给需要发送的前端对象即可。
