Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死。。。
与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题;
注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了。。。
代码:
先安装 sockjs-client 和 stompjs
npm install sockjs-client
npm install stompjs
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
data(){
return {
stompClient:'',
timer:'',
}
},
methods:{
initWebSocket() {
this.connection();
let that= this;
// 断开重连机制,尝试发送消息,捕获异常发生时重连
this.timer = setInterval(() => {
try {
that.stompClient.send("test");
} catch (err) {
console.log("断线了: " + err);
that.connection();
}
}, 5000);
},
connection() {
// 建立连接对象
let socket = new SockJS('http://10.10.91.4:8081/ws');
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息,按需求配置
let headers = {
Authorization:''
}
// 向服务器发起websocket连接
this.stompClient.connect(headers,() => {
this.stompClient.subscribe('/topic/public', (msg) => { // 订阅服务端提供的某个topic
console.log('广播成功')
console.log(msg); // msg.body存放的是服务端发送给我们的信息
},headers);
this.stompClient.send("/app/chat.addUser",
headers,
JSON.stringify({sender: '',chatType: 'JOIN'}),
) //用户加入接口
}, (err) => {
// 连接发生错误时的处理函数
console.log('失败')
console.log(err);
});
}, //连接 后台
disconnect() {
if (this.stompClient) {
this.stompClient.disconnect();
}
}, // 断开连接
},
mounted(){
this.initWebSocket();
},
beforeDestroy: function () {
// 页面离开时断开连接,清除定时器
this.disconnect();
clearInterval(this.timer);
}
}