最近的项目中使用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. LOJ6029「雅礼集训 2017 Day1」市场 (线段树)

    题面 从前有一个学校,在 O n e I n D a r k \rm OneInDark OneInDark 到任之前风气都是非常良好的,自从他来了之后,发布了一系列奇怪的要求,挟制了整个学校,导致风 ...

  2. 「学习笔记」字符串基础:Hash,KMP与Trie

    「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...

  3. python进阶__struct数据处理详解

    一.此模块可以执行 Python 值和以 Python bytes 对象表示的 C 结构之间的转换 二.打包解包时,需要按照特定的方式来打包或者解包.该方式就是格式化字符串,它指定了数据类型,除此之外 ...

  4. 第五篇:vue.js起步

    <div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...

  5. 在 C# CLR 中学习 C++ 之了解 extern

    一:背景 在 CLR 源码中有很多的 extern 和 extern "C" 这样的关键词,比如下面这些代码: extern size_t gc_global_mechanisms ...

  6. Helm安装ingress-nginx-4.2.0

    Application version 1.3.0 Chart version 4.2.0 获取chart包 helm fetch ingress-nginx/ingress-nginx --vers ...

  7. Kubernetes后台数据库etcd:安装部署etcd集群,数据备份与恢复

    目录 一.系统环境 二.前言 三.etcd数据库 3.1 概述 四.安装部署etcd单节点 4.1 环境介绍 4.2 配置节点的基本环境 4.3 安装部署etcd单节点 4.4 使用客户端访问etcd ...

  8. WSUS无法发现客户端

    这几天遇到一个问题,刚装好的WSUS服务器同步完补丁后,打算上线使用.挑了几个客户端,使用注册表配置了WSUS,但是迟迟无法在控制台上看到这些客户端.由于部分客户端不在域中,无法使用组策略配置,就写了 ...

  9. mysqld_exporter参数信息

    [root@database03 mysqld_exporter]# ./mysqld_exporter --help usage: mysqld_exporter [<flags>] F ...

  10. 举例:Network Policies

    本文描述了如何在 Kubernetes 集群中通过创建 NetworkPolicy 的方式来声明网络策略,以管理 Pod 之间的网络通信流量. 前提条件 创建一个Deployment并配置Servic ...