使用场景:

  在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到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建立长连接的更多相关文章

  1. http中长连接和websocket的长连接的区别

    一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0.   HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...

  2. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  3. Websocket、长连接、循环连接

    [转]转自知乎高票回答  https://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系 ...

  4. 关于Socket建立长连接遇到的bug信息

    下面是本人在Socket连接的开发中遇到的bug总结 1."远程服务器关闭了Socket长连接'的错误信息 2.关于"kCFStreamNetworkServiceTypeVoIP ...

  5. 【土旦】Vue+WebSocket 实现长连接

    1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...

  6. WebSocket IO和后端建立长连接,即时接受后端消息

    https://github.com/TooTallNate/Java-WebSocket ant得到java_websocket.jar改名为WebSocket.jar放到 https://gith ...

  7. vue 项目中实时请求接口 建立长连接

    需求:在项目中需要每隔五秒请求一次接口 第一种方法:直接在mounted钩子函数中处理 mounted() { window.setInterval(() => { setTimeout(thi ...

  8. 石墨文档Websocket百万长连接技术实践

    引言 在石墨文档的部分业务中,例如文档分享.评论.幻灯片演示和文档表格跟随等场景,涉及到多客户端数据同步和服务端批量数据推送的需求,一般的 HTTP 协议无法满足服务端主动 Push 数据的场景,因此 ...

  9. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

随机推荐

  1. Hadoop运行原理总结(详细)

    本编随笔是小编个人参照个人的笔记.官方文档以及网上的资料等后对HDFS的概念以及运行原理进行系统性地归纳,说起来真的惭愧呀,自学了很长一段时间也没有对Hadoop知识点进行归纳,有时候在实战中或者与别 ...

  2. SQLSERVER根据提成比率区间计算业绩提成

    USE [Employee] GO /****** Object: Table [dbo].[Commission] Script Date: 2019/11/17 14:10:21 ******/ ...

  3. python操作excel——openpyxl

    一.概述 python操作excel各个库对比:https://www.cnblogs.com/paul-liang/p/9187503.html 官方文档:https://openpyxl.read ...

  4. iOS UILabel文字自适应高度自适应

    第一步:创建UILabel对象,并设置一些基本设置 UILabel *label = [[UILabel alloc] init]; label.text = @"8月29日,在雅加达亚运会 ...

  5. 转:laydate只显示时分,不显示秒

    @转载地址 原文全文: 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40 ...

  6. SAP 更新模块1

    RSM13000 / RSM13000 / 5.747FORM / VB_CALL_FUNC CALL 'ThVBCall' ID 'OPCODE' FIELD vb_update_modul_pro ...

  7. net::ERR_ABORTED 404 (Not Found)

    对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片.文件等)来说,webpack的配置,output.publicPath是很重要的选项.如果指 ...

  8. [LeetCode] 169. Majority Element 多数元素

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  9. [LeetCode] 218. The Skyline Problem 天际线问题

    A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...

  10. openstack 权限控制 (添加自定义角色)keystone等组件

    每一个平台.系统都会对于用户的权限进行严格的管理与控制. openstack是一个开源的项目,我们可以直接下载其源码,进行更改以达到我们的要求. 这里只是针对于用户的权限进行管理,以keystone: ...