保持一个长连接,当服务端有新的消息,能够实时的推送到使用方。像知乎的点赞通知、评论等,都可以使用WebSocket通信。
那该如何搭建呢
首先在utils文件夹下创建一个websocket.ts文件
import { onUnmounted } from 'vue';
const actions = {
cmdList: [{ cmd: "C002" }, { cmd: 'C001' }], //需要发往后端的命令 后端根据命令返回相应的数据
};
let randnum = localStorage.getItem('randnum'); //获取随机数
export function projectNoise() {
var websocket: any = null
// 判断当前环境是否支持Websocket
if (window.WebSocket) {
if (!websocket) {
websocket = new WebSocket(`ws:172.16.10.52:9072/websocket/server/${randnum}`);
} else {
console.log('不支持websocket')
}
// 连接到消息得回调方法
websocket.onmessage = function (e: any) {
let res = JSON.parse(e.data);
if (res.indexCmd == 'C001') {
console.log(res) //根据命令不同打印不一样的数据
} else if (res.indexCmd == 'C002') {
console.log(res)
}
}
// 接受到服务端关闭连接时的回调方法
websocket.onclose = function () {
console.log('onclose断开连接')
clearInterval(time);
}
}
. //每10秒向后端发送一次ping
let time = setInterval(() => {
websocket.send('ping');
}, 10000);
// 连接成功建立得回调方法
websocket.onopen = function (e: any) {
websocket.send(JSON.stringify(actions));
}
//离开当前页面断开websocket 及销毁定时器
onUnmounted(() => {
websocket.close()
clearInterval(time);
})
}
建立完成后即可在需要使用的组件里面进行数据使用