最近的项目中使用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.在重新连接前需要判断之前的订阅是不是存在  存在的话先取消订阅,

  if (this.clientSubscribe) {
          this.clientSubscribe.unsubscribe()
       }

h5 websocket 断开重新连接的更多相关文章

  1. WebSocket断开原因、心跳机制防止自动断开连接

    1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...

  2. JS中使用reconnecting-websocket实现websocket断开自动重新连接

    这里用了第三方的js 官方地址:https://github.com/joewalnes/reconnecting-websocket 引入js reconnecting-websocket.min. ...

  3. H5 WebSocket 如何和C#进行通信

    HTML5作为下一代的 Web 标准, 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等.WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连 ...

  4. Node + H5 + WebSocket + Koa2 实现简单的多人聊天

    服务器代码  ( 依赖于 koa2,  koa-websocket ) /* 实例化外部依赖 */ let Koa = require("koa2"); let WebSocket ...

  5. h5:WebSocket

    实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特 ...

  6. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  7. 接入WebSocket记录

    为什么用 WebSocket 因为APP里面有个聊天功能,需要服务器主动推数据到APP.HTTP 通信方式只能由客户端主动拉取,服务器不能主动推给客户端,如果有实时的消息,要立刻通知客户端就麻烦了,要 ...

  8. 接入WebSocket

    闲扯 WebSocket 以前没用过,之前写过一篇博客是基于原生socket的(查看)比较复杂,慎入.今天另外一个APP需要接websocket了,然后便找到了facebook的 SocketRock ...

  9. JavaScript是如何工作: 深入探索WebSocket和HTTP/2与SSE + 如何选择正确的路径!

    原文:<JavaScript是如何工作: 深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 文章底部分 ...

随机推荐

  1. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  2. .Net Core 配置文件读取 - IOptions、IOptionsMonitor、IOptionsSnapshot

    原文链接:https://www.cnblogs.com/ysmc/p/16637781.html 众所周知,appsetting.json 配置文件是.Net 的重大革新之心,抛开了以前繁杂的xml ...

  3. 高阶 CSS 技巧在复杂动效中的应用

    最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...

  4. 国内外各大物联网IoT平台鸟瞰和资源导航

    一.国内外物联网平台 国内 百度物接入IoT Hub 阿里云物联网套件 智能硬件开放平台 京东微联 机智云IoT物联网云服务平台及智能硬件自助开发平台 庆科云FogCloud Ablecloud物联网 ...

  5. salesforce零基础学习(一百一十七)salesforce部署方式及适用场景

    本篇参考:https://architect.salesforce.com/decision-guides/migrate-change https://developer.salesforce.co ...

  6. Win32简单图形界面程序逆向

    Win32简单图形界面程序逆向 前言 为了了解与学习底层知识,从 汇编开始 -> C语言 -> C++ -> PE文件 ,直至今天的Win32 API,着实学的令我头皮发麻(笑哭). ...

  7. flink-cdc同步mysql数据到hbase

    本文首发于我的个人博客网站 等待下一个秋-Flink 什么是CDC? CDC是(Change Data Capture 变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据 或 数据表的 ...

  8. day03-3私聊功能

    多用户即时通讯系统03 4.编码实现02 4.4功能实现-私聊功能实现 4.4.1思路分析 客户端 - 发送者: 用户在控制台输入信息,客户端接收内容 将消息构建成Messgae对象,通过对应的soc ...

  9. 7.第六篇 二进制安装 kube-apiserver

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483812&idx=1&sn=e6773e56 ...

  10. 第四章:Django表单 - 4:表单的Widgets

    不要将Widget与表单的fields字段混淆.表单字段负责验证输入并直接在模板中使用.而Widget负责渲染网页上HTML表单的输入元素和提取提交的原始数据.widget是字段的一个内在属性,用于定 ...