vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
类别:编程学习 浏览量:1487
时间:2021-10-27 10:03:41 vue websocket实时刷新数据
Vue+WebSocket页面实时刷新长连接的实现最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死。。。
与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题;
注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了。。。
ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度。。。。
<template> <li> </li> </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可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue考试链接重置(Vue实现答题功能)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9