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 pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue验证码(vue_drf实现短信验证码)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue加载html5动画(vue实现旋转木马动画)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue 父组件传值(Vue两个同级组件传值实现)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue 组件布局(Vue实现固定底部组件的示例)
- mongovue的使用
- 如何看待美国数十万加仑牛奶倒下水道 历史又重演了(如何看待美国数十万加仑牛奶倒下水道)
- 历史惊人的相似,美国80万加仑牛奶倒入下水道,意味着什么(历史惊人的相似)
- 美国数十万加仑牛奶倒进下水道,世界会重演1929年的大萧条吗(美国数十万加仑牛奶倒进下水道)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
热门推荐
- 详解Python locals()的陷阱(详解Python locals的陷阱)
- python中怎样将字符串倒序(python字符串循环左移)
- mysql密码设置(mysql密码中有特殊字符&在命令行下登录的操作)
- python转pdf教程(Python实现将HTML转成PDF的方法分析)
- django操作默认数据库(Django数据库类库MySQLdb使用详解)
- SQL Server中的临时表的用法
- SQL Server数据类型有哪些
- C#正则表达式验证是否日期
- linux如何使用gdb调试(Linux下如何使用gdb调试core文件)
- 利用数据库安装centos7(CentOS安装SQL Server vNext CTP1教程)