当前位置: 首页 > news >正文

WebSocket封装

提示:记录工作中遇到的需求及解决办法

文章目录

  • 前言
  • 二、背景
  • 三、WebSocket
    • 3.1 什么是 WebSocket ?为什么使用他?
  • 四、封装 WebSocket
    • 4.1 Javascript 版本
    • 4.2 Typescript 版本
    • 4.3 如何使用?
  • 五、我的痛点如何处理


前言

本文将介绍 WebSocket 的封装,比如:心跳机制,重连和一些问题如何去处理


二、背景

之前,钱包相关的查询,我们是使用的轮询方案来做的,后来更新了一次需求,需要做一些实时数据统计的更新,然后顺带给钱包的余额也用长连接来做了,好,那么故事就开始了…

某天,

「老板:」 我钱怎么没了,但是我这里查账户还有。

「我的内心:」 恩?这玩意难道说… 后端没返?

和后端沟通以后,感觉是返回了的,被挤账号了?排查了一段时间以后,最终我将问题锁定在手机息屏的操作上。

因为我们是一个 「H5」 的项目,APP 是嵌套在 webview 中,所以不能操作原生的事件来处理,只能将方案控制在浏览器提供的事件来处理。

好了,接下来各位可以看我是如何处理这个问题,如果没有搞过也是可以有不少收获,也欢迎大神评论区交流其他方案。

三、WebSocket

3.1 什么是 WebSocket ?为什么使用他?

以下是百度百科中对 「WebSocket」 的定义:

WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议。WebSocket 通信协议于2011年被 IETF 定为标准 RFC 6455,并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

「WebSocket 的关键特点」

  1. 「双向通信(Full Duplex)」
    • 客户端和服务器都可以主动发送数据,而不是像 HTTP 一样只能由客户端发起请求。
  2. 「实时性」
    • 消息可以实时传递,延迟更低,适合需要实时更新的场景。
  3. 「持久化连接」
    • 使用单个 TCP 连接完成多次数据交互,无需为每次通信重新建立连接。
  4. 「轻量级协议」
    • WebSocket 头部信息非常小,比传统 HTTP 请求的头部要轻量。
  5. 「节约资源」
    • 长连接减少了资源消耗,特别是在频繁通信的场景中。

上述中,是 AI 给我们总结的 WebSocket 的特点,接下来我们要知道我们为什么使用他,HTTP 他能不能做,他的局限性又在哪里?

「传统 HTTP 的局限性:」

  1. HTTP 是基于请求-响应模型的,客户端必须发起请求,服务器才能返回数据。
  2. 如果需要实时更新(如股票价格、在线聊天),通常需要使用轮询(Polling)或长轮询(Long Polling),这会导致:
    • 高资源消耗(频繁的连接建立和断开)。
    • 高网络流量(每次请求都包含冗长的 HTTP 头部信息)。
    • 更高的延迟(数据可能需要等待较长时间才能返回)。

其实 HTTP 是可以实现的,如果 HTTP 请求频繁三次握手和四次挥手的操作会占用大量资源,HTTP/1.1 以后开启了 「Keep-Alive (长连接)」,可以复用连接,但是实时的情况下,响应模型仍然会导致较高的延迟和资源消耗。

相比之下,WebSocket 通过一次握手建立连接以后,就可以保持双向通信,服务器可以主动推送数据,无需客户端轮询。解决了 HTTP 带来的一些痛点。

四、封装 WebSocket

我们将实现以下几个功能点:

  • 「重连」
  • 「心跳机制」
  • 「事件回调」
  • 「连接状态管理」
  • 「销毁」

4.1 Javascript 版本

class ReSocket {constructor(url, options = {}) {this.url = url; // WebSocket 服务器地址this.options = options; // 可选参数this.socket = null; // WebSocket 实例this.maxReconnectTimes = options.maxReconnectTimes || 5; // 最大重连次数this.reconnectTimes = 0; // 当前重连次数this.reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间(毫秒)this.isClosed = false; // 是否已关闭this.isOpen = false; // 是否已打开this.isConnect = false; // 是否已连接this.isReconnecting = false; // 是否正在重连this.isDestroyed = false; // 是否已销毁this.reconnectTimer = null; // 重连定时器this.heartbeatTimer = null; // 心跳定时器this.heartbeatInterval = options.heartbeatInterval || 30000; // 心跳间隔时间(默认30秒)this.heartbeatData = options.heartbeatData || "ping"; // 心跳数据this.onMessageCallback = null; // 消息接收回调this.onOpenCallback = null; // 连接成功回调this.onCloseCallback = null; // 连接关闭回调}// 创建WebSocket实例createSocket() {this.socket = new WebSocket(this.url);this.socket.onopen = () => {this.isOpen = true;this.isConnect = true;this.reconnectTimes = 0; // 重连次数归零this.startHeartbeat(); // 启动心跳机制if (this.onOpenCallback) this.onOpenCallback(); // 调用连接成功回调};this.socket.onmessage = event => {if (this.onMessageCallback) this.onMessageCallback(event.data); // 调用消息接收回调};this.socket.onclose = () => {this.isOpen = false;this.isConnect = false;this.stopHeartbeat(); // 停止心跳机制if (this.onCloseCallback) this.onCloseCallback(); // 调用连接关闭回调if (!this.isClosed && this.reconnectTimes < this.maxReconnectTimes) {this.reconnect(); // 尝试重连}};this.socket.onerror = error => {console.error("WebSocket 错误: ", error); // 错误处理};}// 开始连接connect

相关文章:

WebSocket封装

提示:记录工作中遇到的需求及解决办法 文章目录 前言二、背景三、WebSocket3.1 什么是 WebSocket ?为什么使用他?四、封装 WebSocket4.1 Javascript 版本4.2 Typescript 版本4.3 如何使用?五、我的痛点如何处理前言 本文将介绍 WebSocket 的封装,比如:心跳机制,重连和一…...

基于Flask后端框架的均值填充

Flask可以在Jupyter上运行&#xff0c;首先需要安装这两个库&#xff1a; !pip install Flask-CORS !pip install Flask 引入依赖&#xff1a; from flask import Flask, request, jsonify, send_file import os import pandas as pd import io from flask import Flask fr…...

SQL-Server链接服务器访问Oracle数据

SQL Server 链接服务器访问 Oracle 离线安装 .NET Framework 3.5 方法一&#xff1a;使用 NetFx3.cab 文件 下载 NetFx3.cab 文件&#xff0c;并将其放置在 Windows 10 系统盘的 C:Windows 文件夹中。 以管理员身份运行命令提示符&#xff0c;输入以下命令并回车&#xff1a; …...

Python中continue语句的使用

1 问题 本文将对在循环中continue语句的用途和如何正确使用continue进行分析与总结。 2 方法 &#xff08;1&#xff09;定义&#xff1a; 在编程中&#xff0c;“continue”是一个关键字&#xff0c;用于循环结构中。它的作用是跳过当前循环的剩余部分&#xff0c;立即进入下一…...

JavaScript的diff库详解(示例:vue项目实现两段字符串比对标黄功能)

diff库介绍 diff 库是基于 Myers 差分算法 实现的 JavaScript 文本差异库。 Myers 差分算法 是由 Eugene Myers 在 1986 年发表的一篇经典算法论文 “An O(ND) Difference Algorithm and its Variations” 中描述的一种高效算法&#xff0c;用于计算两个序列&#xff08;通常是…...

自动驾驶3D目标检测综述(六)

停更了好久终于回来了&#xff08;其实是因为博主去备考期末了hh&#xff09; 这一篇接着&#xff08;五&#xff09;的第七章开始讲述第八章的内容。第八章主要介绍的是三维目标检测的高效标签。 目录 第八章 三维目标检测高效标签 一、域适应 &#xff08;一&#xff09;…...

the request was rejected because no multipart boundary was found

文章目录 1. 需求描述2. 报错信息3. 探索过程 1. 使用postman 排除后端错误2. 搜索网上的解决方法3. 解决方法 1. 需求描述 想要在前端上传一个PDF 发票&#xff0c;经过后端解析PDF之后&#xff0c;将想要的值自动回填到对应的输入框中 2. 报错信息 org.apache.tomcat.u…...

HarmonyOS-面试整理

目录 为什么选择HarmonyOS/ 优点/特点鸿蒙系统的权限有哪些说一说鸿蒙系统的安全机制说一说鸿蒙系统的微内核与安卓的内核区别鸿蒙操作系统的微内核架构有哪些优势分布式能力在鸿蒙系统中如何实现请解释一下鸿蒙系统中的分布式软总线技术如何在鸿蒙操作系统中进行多设备协同开发…...

[C#] 「Unity」「游戏开发」如何在Canvas下的Button控件下实例化Image元素

在开发过程中,经常需要在UI上动态添加元素。特别是在Unity中,Canvas控件通常用来作为UI元素的容器,而Button控件则常用于交互。而在某些情况下,我们可能需要在一个Button下实例化一个Image元素,并确保它的位置与Button的位置保持一致。然而,简单地使用Button的坐标值往往…...

Nginx1.20.2-Linux-安装

文章目录 1.下载压缩包1.官网下载2.找到1.20.23.百度网盘 2.Linux安装1.搭建gcc环境2.上传到 /usr/local/nginx1.20.23.解压1.解压到当前目录2.删除压缩包 4.配置Nginx的编译路径1.进入nginx-1.20.22.执行内部的脚本&#xff0c;指定编译路径为/usr/local/nginx 5.编译并安装6.…...

Elasticsearch名词解释

文章目录 1.什么是Elasticsearch?2.什么是elastic stack(ELK)?3.什么是Lucene?4.什么是文档(document)&#xff1f;5.什么是词条(term)&#xff1f;6.什么是正向索引&#xff1f;7.什么是倒排索引&#xff1f;8.ES中的索引(index)9.映射(Mapping)10.DSL11.elastcisearch与my…...

Node项目——从0开始构建且共享至Gitee

从0开始构建一个Node.js项目涉及多个步骤&#xff0c;包括设置开发环境、初始化项目、安装依赖、编写代码以及配置版本控制等。以下是一个详细的步骤指南&#xff1a; 1. 安装Node.js和npm 首先&#xff0c;确保你已经安装了Node.js和npm&#xff08;Node Package Manager&am…...

layui多图上传,tp8后端接收处理

环境&#xff1a;layui2.9.21\thinkphp8.1 前端代码&#xff1a; layui.use([upload, layer], function() {const upload layui.upload;const layer layui.layer;const $ layui.$;// 上传图片const uploadInstImage upload.render({elem: #uploadImage,url: /admin/demo/…...

QEMU网络配置简介

本文简单介绍下qemu虚拟机网络的几种配置方式。 通过QEMU的支持&#xff0c;常见的可以实现以下4种网络形式&#xff1a; 基于网桥&#xff08;bridge&#xff09;的虚拟网络。基于NAT&#xff08;Network Addresss Translation&#xff09;的虚拟网络。QEMU内置的用户模式网…...

28.Marshal.PtrToStringAnsi C#例子

//怎么说呢&#xff0c;这个代码Marshal的英文意思有将军&#xff0c;控制等等&#xff0c; //我的理解是类似于console控制台。 //然后后面这个Ansi是一种ASCII的扩展&#xff0c;还有其他编码方式可选 就是一个把后面的指针转化为字符串的一个代码 这是用法…...

基于feapder爬虫与flask前后端框架的天气数据可视化大屏

# 最近又到期末了&#xff0c;有需要的同学可以借鉴。 一、feapder爬虫 feapder是国产开发的新型爬虫框架&#xff0c;具有轻量且数据库操作方便、异常提醒等优秀特性。本次设计看来利用feapder进行爬虫操作&#xff0c;可以加快爬虫的速率&#xff0c;并且简化数据入库等操作…...

Linux隐藏登录和清除历史命令以及其他相关安全操作示例

隐藏登录 ssh -T rootxxx.xxx.xxx.xxx /bin/bash -i 命令拆解-T &#xff1a;告诉ssh客户端&#xff0c;不要分配一个TTY&#xff08;伪终端&#xff09;root &#xff1a;连接用户xxx.xxx.xxx.xxx &#xff1a;连接的服务器ip地址/bin/bash &#xff1a;在远程服务器上启动…...

从授权校验看SpringBoot自动装配

背景 最近需要实现一个对于系统的授权检测功能&#xff0c;即当SpringBoot应用被启动时&#xff0c;需要当前设备是否具有有效的的授权许可信息&#xff0c;若无则直接退出应用。具体的实现方案请继续看下文。 环境 Ruoyi-Vue SpringBoot3 RuoYi-Vue: &#x1f389; 基于Spr…...

tensorboard的界面参数与图像数据分析讲解

目录 1.基础概念&#xff1a; (a)精确率与召回率&#xff1a; (b)mAP: (c)边界框损失&#xff1a; (d)目标损失&#xff1a; (e)分类损失&#xff1a; (f):学习率&#xff1a; 2.设置部分&#xff08;最右边部分&#xff09;&#xff1a; GENERAL&#xff08;常规设置…...

MTK 平台关于WIFI 6E P2P的解说

一 前言 官方 P2P 6E 设计原理,请查看这个网站 hostap - hostapd/wpa_supplicant 配置:p2p_6ghz_disable 允许上层指定是否允许6G连接 仅允许6G用于WFD –不允许6G用于纯P2P 缺点:存在很多 IOT issues 如:一些物联网设备无法识别6G类/信道,可能存在物联网问…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...