socket连接封装

效果:
在这里插入图片描述

class websocketMessage {constructor(params) {this.params = params; // 传入的参数this.socket = null;this.lockReconnect = false; // 重连的锁this.socketTimer = null; // 心跳this.lockTimer = null; // 重连this.timeout = 3000; // 发送消息this.callbacks = []; // 存储外部的回调函数// this.init(); // websocket 初始化}/*** @description: websocket 初始化* @return {*}*/init() {if (!("WebSocket" in window)) {console.warn("当前浏览器不支持 WebSocket");return;}this.lockReconnect = false;this.socket = new WebSocket(this.params.ws);this.socket.onopen = this.open.bind(this);this.socket.onmessage = this.onMessage.bind(this);this.socket.onerror = this.error.bind(this);// this.socket.onclose = this.close.bind(this);}/*** @description: websocket 已连接* @return {*}*/open() {console.log(`${this.params.ws}:WebSocket已连接。`);}/*** @description: 监听接收消息* @param {*} event* @return {*}*/onMessage({data}) {// 判断是否开启心跳if (this.params.heart) {this.socketTimer && clearTimeout(this.socketTimer);this.socketTimer = setTimeout(() => {this.socket.send(JSON.stringify(this.params.heart.data));}, 3000);}// 如果开启心跳,过滤掉心跳的数据if (data === this.params?.heart?.data) {return;}// 将消息传递给所有注册的回调函数this.callbacks.forEach((callback) => callback(typeof data === 'string' ? data : JSON.parse(data)));}/*** @description: 注册消息回调函数* @param {*} callback 回调函数* @return {*}*/message(callback) {if (typeof callback === "function") {this.callbacks.push(callback);} else {console.warn("注册的回调必须是一个函数");}}/*** @description: 发送消息* @param {*} msg* @return {*}*/send(msg) {if (!this.socket) {return;}let timer = null;clearTimeout(timer);timer = setTimeout(() => {if (this.socket?.readyState === 1) {this.socket.send(JSON.stringify(msg));clearTimeout(timer);} else {this.send(msg);}}, 50);}/*** @description: 连接发送错误的时候,输出信息* @param {*} e 错误消息* @return {*}*/error(e) {this.socket = null;console.log(`${this.params.ws}:WebSocket正在重新连接`, e);this.reconnect();}/*** @description: 关闭 websocket 连接* @return {*}*/close() {this.socket = null;this.lockReconnect = true;this.callbacks = []; // 清除回调clearTimeout(this.lockTimer);clearTimeout(this.socketTimer);this.socket?.onclose();console.log(`${this.params.ws}:WebSocket连接已关闭`);}/*** @description: 重新连接 websocket* @return {*}*/reconnect() {if (this.lockReconnect) {return;}this.lockReconnect = true;clearTimeout(this.lockTimer);this.lockTimer = setTimeout(() => {this.init();}, this.timeout);}
}// 调用:
let socket = new websocketMessage({ws: "wss://toolin.cn/echo",
});socket.init();// 注册消息处理回调
socket.message((data) => {console.log("接收到的消息:", data);
});// 发送登录消息
socket.send({type: "login",data: {userId: "123",},
});
setTimeout(() => {// 发送登录消息socket.send({type: "sadfasd",data: {userId: "sadf",},});
}, 5000)
setTimeout(() => {// 发送登录消息socket.send({type: "20000",data: {userId: "2",},});
}, 2000)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61648.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker compose的安装和使用

1. Docker Compose 简介 Docker Compose 是一个工具,用于定义和运行多容器的 Docker 应用。通过编写一个 docker-compose.yml 文件,可以一次性启动所有容器,并且方便管理容器之间的依赖。 2. 安装 Docker Compose 前提条件 确保已安装 Do…

银河麒麟v10 x86架构二进制方式kubeadm+docker+cri-docker搭建k8s集群(证书有效期100年) —— 筑梦之路

环境说明 master:192.168.100.100 node: 192.168.100.101 kubeadm 1.31.2 (自编译二进制文件,证书有效期100年) 银河麒麟v10 sp2 x86架构 内核版本:5.4.x 编译安装 cgroup v2启用 docker版本:27.x …

大语言模型---RewardBench 介绍;RewardBench 的主要功能;适用场景

文章目录 1. RewardBench 介绍2. RewardBench 的主要功能3. 适用场景 1. RewardBench 介绍 RewardBench: Evaluating Reward Models是一个专门用于评估 Reward Models(奖励模型) 的公开平台,旨在衡量模型在多种任务上的性能,包括…

基于Redis实现的手机短信登入功能

目录 开发准备 注册阿里短信服务 依赖坐标 阿里短信 依赖 mybatis-plus 依赖 redis 依赖 配置文件 导入数据库表 短信发送工具类 生成随机验证码的工具类 校验合法手机号的工具类 ThreadLocal 线程工具类 消息工具类 基于 session 的短信登录的问题 开发教程 Redis 结构设计 …

Java语言程序设计 选填题知识点总结

第一章 javac.exe是JDK提供的编译器public static void main (String args[])是Java应用程序主类中正确的main方法Java源文件是由若干个书写形式互相独立的类组成的Java语言的名字是印度尼西亚一个盛产咖啡的岛名Java源文件中可以有一个或多个类Java源文件的扩展名是.java如果…

免费好用的静态网页托管平台全面对比介绍

5个免费好用的静态网页托管平台全面对比 前言 作为一名前端开发者,经常会遇到需要部署静态网页的场景。无论是个人项目展示、简单的游戏demo还是作品集网站,选择一个合适的托管平台都很重要。本文将详细介绍5个免费的静态网页托管平台,帮助…

python正则表达式基本字符字符

字符 描述 text 匹配text字符串 . 匹配除换行符之外的任意一个单个字符 ^ 匹配一个字符串的开头 $ 匹配一个字符串的末尾 在正则表达式中,我们还可用匹配限定符来约束匹配的次数 2. 匹配限定符 最大匹配 最小匹配 描述 * *? 重复匹配前表达式零次或多次 &a…

k8s篇之控制器类型以及各自的适用场景

1. k8s中控制器介绍 在 Kubernetes 中,控制器(Controller)是集群中用于管理资源的关键组件。 它们的核心作用是确保集群中的资源状态符合用户的期望,并在需要时自动进行调整。 Kubernetes 提供了多种不同类型的控制器,每种控制器都有其独特的功能和应用场景。 2. 常见的…

python程序的编写以及发布(形象类比)

最近重新接触python,本人之前对于python的虚拟环境,安装包比较比较迷惑,这里给出一个具象的理解。可以将 Python 程序运行的过程类比成一次 做菜的过程,从准备食材到最后出锅。以下是具体的类比步骤: 1. 安装 Python 环…

shell基础知识3 --- 流程控制之条件判断

条件判断语句是一种最简单的流程控制语句。该语句使得程序根据不同的条件来执行不同的程序分支。 一、if语句语法 1.单分支结构 法1&#xff1a; 法2&#xff1a; if <条件表达式> if…

功耗中蓝牙扫描事件插桩埋点

手机功耗中蓝牙扫描事件插桩埋点 功耗主要监控蓝牙扫描的时间和次数&#xff0c;进而换算为频次监控。其中不同的蓝牙扫描模式带来的功耗影响也是不一样的。 即功耗影响度低延迟扫描>平衡模式扫描>低功耗模式。例如某款机型分别为&#xff1a;低延迟扫描 14.64mA,平衡模…

电容测试流程

一、外观检测 1. 目的&#xff1a;检验电容样品外观是否与规格书一致&#xff0c;制程工艺是否良好&#xff0c;确保部品的品质。 2. 仪器&#xff1a;放大镜 3. 测试说明&#xff1a; &#xff08;1&#xff09;样品上丝印与规格书中相符&#xff0c;丝印信息&#xff08;…

探索 .NET 9 控制台应用中的 LiteDB 异步 CRUD 操作

本文主要是使用异步方式&#xff0c;体验 litedb 基本的 crud 操作。 LiteDB 是一款轻量级、快速且免费的 .NET NoSQL 嵌入式数据库&#xff0c;专为小型本地应用程序设计。它以单一数据文件的形式提供服务&#xff0c;支持文档存储和查询功能&#xff0c;适用于桌面应用、移动…

leetcode刷题记录(四十二)——101. 对称二叉树

&#xff08;一&#xff09;问题描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/symmetric-tree/description/给你…

【一个简单的整数问题2——线段树】

题目 代码 下面的两个代码的区别在于modify的分类&#xff0c;modify最简单的分类方式是存在性分类&#xff0c;另一种类似某些query采用的三段式分类&#xff0c;详细见代码 存在性 #include <bits/stdc.h> using namespace std; using ll long long; const int N 1…

从源码到应用:在线教育系统与教培网校APP开发实战指南

时下&#xff0c;各类教培网校APP逐渐成为教育机构的核心工具。那么&#xff0c;如何从源码出发&#xff0c;开发一套符合需求的在线教育系统与教培网校APP&#xff1f;本文将从架构设计、功能实现到部署上线&#xff0c;提供一份全面的开发实战指南。 一、在线教育系统的核心架…

vscode下面python调试报错ImportError: cannot import name ‘Literal‘ from ‘typing‘

1 问题描述 我在vscode下面编写python程序&#xff0c;这个程序是在一个英伟达anoconda环境下的项目。之前能运行能调试&#xff0c;最近发现只能运行ctlf5&#xff0c;但是使用f5进行调试时&#xff0c;报错“File “c:\Users\86137.vscode\extensions\ms-python.debugpy-202…

微知-ib_write_bw的各种参数汇总(-d -q -s -R --run_infinitely)

背景 经常忘记使用ib_write_bw打流的一些参数&#xff0c;特此整理记录在这里方便快速查阅。尤其是run_infinitely这个参数容易写错。 最简洁 ib_write_bw -d mlx5_0 # server ib_write_bw -d mlx5_0 1.1.1.1 # client常用参数 非常常用 -d mlx5_0, --ib-dev 指定ib设备&a…

智能外呼,轻松触达海外客户

在全球化的今天&#xff0c;海外市场已成为众多企业寻求增长的重要阵地。然而&#xff0c;如何高效、精准地触达海外客户&#xff0c;一直是企业面临的一大挑战。沃丰科技推出了智能外呼机器人&#xff0c;为企业打开了一扇通往海外市场的智慧之门。 沃丰科技外呼机器人的核心…

小鹏汽车智慧材料数据库系统项目总成数据同步

1、定时任务处理 2、提供了接口 小鹏方面提供的推送的数据表结构&#xff1a; 这几个表总数为100多万&#xff0c;经过条件筛选过滤后大概2万多条数据 小鹏的人给的示例图&#xff1a; 界面&#xff1a; SQL: -- 查询车型 select bmm.md_material_id, bmm.material_num, bm…