Vue通过WebSocket建立长连接的实现代码


Posted in Javascript onNovember 05, 2019

使用场景:

在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的。

使用时间:

在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回的数据进行对应的操作。

代码展示:

<template>
</template>
<script>
export default {
 data() {
  return{
   // 用户Id
   userId:'',
   appid:'',
   // 事件类型
   type:'',
   msg:'',
   wsUrl:''
  }  
 },
 methods: {
  //初始化weosocket
  initWebSocket() {
   if (typeof WebSocket === "undefined") {
    alert("您的浏览器不支持WebSocket");
    return false;
   }
   const wsuri = 'ws://(后端WebSocket地址)/websocket/' + this.userId + '/' + this.appid // websocket地址
   this.websock = new WebSocket(wsuri);
   this.websock.onopen = this.websocketonopen;
   this.websock.onmessage = this.websocketonmessage;
   this.websock.onerror = this.websocketonerror;
   this.websock.onclose = this.websocketclose;
  },
  //连接成功
  websocketonopen() {
   console.log("WebSocket连接成功");
   // 添加心跳检测,每30秒发一次数据,防止连接断开(这跟服务器的设置有关,如果服务器没有设置每隔多长时间不发消息断开,可以不进行心跳设置)
   let self = this;
   this.timer = setInterval(() => {
    try {
     self.websock.send('test')
     console.log('发送消息');
    }catch(err){
     console.log('断开了:' + err);
     self.connection()
    }
   }, 30000)
  },
  //接收后端返回的数据,可以根据需要进行处理
  websocketonmessage(e) {
   var vm = this;
   let data1Json = JSON.parse(e.data);
   console.log(data1Json);
  },
  //连接建立失败重连
  websocketonerror(e) {
   console.log(`连接失败的信息:`, e);
   this.initWebSocket(); // 连接失败后尝试重新连接
  },
  //关闭连接
  websocketclose(e) {
   console.log("断开连接", e);
  }
 },
 created() {
  if (this.websock) {
   this.websock.close(); // 关闭websocket连接
  }
  this.initWebSocket();
 },
 destroyed() {
  //页面销毁时关闭ws连接
  if (this.websock) {
   this.websock.close(); // 关闭websocket
  }
 }
};
</script>

问题回顾:

在实际使用的时候遇到的问题:有的时候页面链接还没有建立上,但是后端已经把数据都处理好了,这个时候推给前端,前端接收不到。

解决方案:

1)简单的方法:让后端延迟几秒再推

优势:简单

劣势:降低了性能

2)优化之后的方法:使用Redis保存用户的登录状态,缓存这个用户的数据,等到建立连接之后再推,推完就清空Redis

总结

以上所述是小编给大家介绍的Vue通过WebSocket建立长连接的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php minixml详解
2008/07/19 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
python选择排序算法的实现代码
2013/11/21 Python
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python操作列表的常用方法分享
2014/02/13 Python
Python urlopen()函数 示例分享
2014/06/12 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python实现扫雷游戏
2020/03/03 Python
python属于跨平台语言码
2020/06/09 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python 解决函数返回return的问题
2020/12/05 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
行政经理岗位职责
2013/11/09 职场文书
单位承诺书格式
2014/05/21 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL