h5 websocket 断开重新连接
最近的项目中使用ws 长连接来接收和发送消息, 直接上代码
import * as SockJS from "sockjs-client";
import Stomp from "stompjs";
connection() {
if (this.clientSubscribe) {
console.log('unsubscribe')
this.clientSubscribe.unsubscribe()
}
const token = "";
// const TENANT_ID = getStore({name: 'tenantId'}) ? getStore({name: 'tenantId'}) : '1'
const headers = {
Authorization: "Bearer " + token,
chatSessionId: this.chatBaseInfo.chatSessionId,
tempToken: this.chatBaseInfo.tempToken,
};
// 建立连接对象
this.socket = new SockJS("/bot/ws"); // 连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息
//获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(this.socket);
//this.stompClient.debug = true
//向服务器发起websocket连接
this.stompClient.connect(
headers,
() => {
this.isConnection = false
this.successCallback()
},
() => {
console.log('断开重新连接')
this.isConnection = true
console.log( this.stompClient)
if (this.env === "WEB") {
setTimeout(() => {
this.connection()
},2000)
} //this.reconnect(this.successCallback);
}
);
},
successCallback(){ this.clientSubscribe = this.stompClient.subscribe(
"/x99/receive/" + this.chatBaseInfo.chatSessionId,
(msg) => {
// 订阅服务端提供的某个topic;
// 处理接收的数据 }
);
},
遇到的问题是 在ios手机端 锁屏的情况下 会把websocket 断开 解决的方案是
mounted() { document.addEventListener('visibilitychange', () => { if (!document.hidden) {//页面呼出 if (this.stompClient&&!this.stompClient.connected) { this.connection()
}
}
})
},
注意 1.在web 端是没有这个事件的 所以在重新连接的地方加了判断 是web 端用了定时器去冲新连接
2.在重新连接前需要判断之前的订阅是不是存在 存在的话先取消订阅,
h5 websocket 断开重新连接的更多相关文章
- WebSocket断开原因、心跳机制防止自动断开连接
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
- JS中使用reconnecting-websocket实现websocket断开自动重新连接
这里用了第三方的js 官方地址:https://github.com/joewalnes/reconnecting-websocket 引入js reconnecting-websocket.min. ...
- H5 WebSocket 如何和C#进行通信
HTML5作为下一代的 Web 标准, 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等.WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连 ...
- Node + H5 + WebSocket + Koa2 实现简单的多人聊天
服务器代码 ( 依赖于 koa2, koa-websocket ) /* 实例化外部依赖 */ let Koa = require("koa2"); let WebSocket ...
- h5:WebSocket
实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特 ...
- 初探和实现websocket心跳重连
心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...
- 接入WebSocket记录
为什么用 WebSocket 因为APP里面有个聊天功能,需要服务器主动推数据到APP.HTTP 通信方式只能由客户端主动拉取,服务器不能主动推给客户端,如果有实时的消息,要立刻通知客户端就麻烦了,要 ...
- 接入WebSocket
闲扯 WebSocket 以前没用过,之前写过一篇博客是基于原生socket的(查看)比较复杂,慎入.今天另外一个APP需要接websocket了,然后便找到了facebook的 SocketRock ...
- JavaScript是如何工作: 深入探索WebSocket和HTTP/2与SSE + 如何选择正确的路径!
原文:<JavaScript是如何工作: 深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 文章底部分 ...
随机推荐
- Vue刷新页面VueX中数据清空了,怎么重新获取?
Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...
- .Net Core 配置文件读取 - IOptions、IOptionsMonitor、IOptionsSnapshot
原文链接:https://www.cnblogs.com/ysmc/p/16637781.html 众所周知,appsetting.json 配置文件是.Net 的重大革新之心,抛开了以前繁杂的xml ...
- 高阶 CSS 技巧在复杂动效中的应用
最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...
- 国内外各大物联网IoT平台鸟瞰和资源导航
一.国内外物联网平台 国内 百度物接入IoT Hub 阿里云物联网套件 智能硬件开放平台 京东微联 机智云IoT物联网云服务平台及智能硬件自助开发平台 庆科云FogCloud Ablecloud物联网 ...
- salesforce零基础学习(一百一十七)salesforce部署方式及适用场景
本篇参考:https://architect.salesforce.com/decision-guides/migrate-change https://developer.salesforce.co ...
- Win32简单图形界面程序逆向
Win32简单图形界面程序逆向 前言 为了了解与学习底层知识,从 汇编开始 -> C语言 -> C++ -> PE文件 ,直至今天的Win32 API,着实学的令我头皮发麻(笑哭). ...
- flink-cdc同步mysql数据到hbase
本文首发于我的个人博客网站 等待下一个秋-Flink 什么是CDC? CDC是(Change Data Capture 变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据 或 数据表的 ...
- day03-3私聊功能
多用户即时通讯系统03 4.编码实现02 4.4功能实现-私聊功能实现 4.4.1思路分析 客户端 - 发送者: 用户在控制台输入信息,客户端接收内容 将消息构建成Messgae对象,通过对应的soc ...
- 7.第六篇 二进制安装 kube-apiserver
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483812&idx=1&sn=e6773e56 ...
- 第四章:Django表单 - 4:表单的Widgets
不要将Widget与表单的fields字段混淆.表单字段负责验证输入并直接在模板中使用.而Widget负责渲染网页上HTML表单的输入元素和提取提交的原始数据.widget是字段的一个内在属性,用于定 ...