脚本宝典收集整理的这篇文章主要介绍了Vue+WebSocket页面实时刷新长连接的实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。
与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题；
注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了。。。
ps: 如果实在有这个需求的话，网上貌似有实现刷新页面长连接不断的方法，请自行百度。。。。
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
websock: null,
}
},
created(){
//页面刚进入时开启长连接
this.initWebSocket()
},
destroyed: function() {
//页面销毁时关闭长连接
this.websocketclose();
},
methods: {
initWebSocket(){ //初始化weosocket
const wsuri = process.env.WS_API + "/websocket/threadsocket";//ws地址
this.websock = new WebSocket(wsuri);
this.websocket.onopen = this.websocketonopen;
this.websocket.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
},
websocketonopen() {
console.log("WebSocket连接成功");
},
websocketonerror(e) { //错误
console.log("WebSocket连接发生错误");
},
websocketonmessage(e){ //数据接收
const redata = JSON.parse(e.data);
//注意：长连接我们是后台直接1秒推送一条数据，
//但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
//这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
console.log(redata.value);
},
websocketsend(agentData){//数据发送
this.websock.send(agentData);
},
websocketclose(e){ //关闭
console.log("connection closed (" + e.code + ")");
},
},
}
</script>
到此这篇关于Vue+WebSocket页面实时刷新长连接的实现的文章就介绍到这了,更多相关Vue+WebSocket实时刷新长连接内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue+WebSocket页面实时刷新长连接的实现全部内容，希望文章能够帮你解决Vue+WebSocket页面实时刷新长连接的实现所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。