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调用flash的效果代码
Apr 26 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
Vue渲染过程浅析
Mar 14 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
Element-UI+Vue模式使用总结
Jan 02 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
destoon整合UCenter图文教程
2014/06/21 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
总经理秘书岗位职责
2014/03/17 职场文书
让世界充满爱观后感
2015/06/10 职场文书
董事会决议范本
2015/07/01 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers