WebSocket详解与封装工具类

一、前言

在我们了解websocket之前,不妨先想想这几个问题:

  1. websocket是什么?
  2. websocket有什么好处和特点?
  3. 为什么要用到websocket?
  4. 什么情况下会用到websocket?

好了,带着这几个疑问一起来了解一下websocket。

二、websocket简介

2.1 什么是websocket

WebSocket是HTML5开始提供的一种基于TCP的协议,用于在客户端和服务器之间建立持久连接,实现实时通讯的功能。

早期,客户端如果想实时拿到浏览器的最新数据就必须要通过发送http请求定时做轮询。每隔一段时间去向浏览器请求最新数据,这样大大的消耗了服务器的资源。

当使用了websocket与服务器建立连接,就不需要反复去轮询请求数据;当有最新消息时服务器会返回给客户端,而websocket可以立马监听到服务器的返回消息。

2.2 websocket的特点

2.2.1 优点
  1. 可以说实现连接的持久化,使客户端与服务器可以实时双向通讯;
  2. 减少了HTTP请求,大大减少了服务器的资源消耗,降低了网络负载;
  3. 没有同源限制,客户端可以与任意服务器通信;
  4. 协议标识符为ws,如果是加密的话就是wss;
2.2.2 缺点
  1. 有兼容问题,有一些老版本的浏览器不支持,同时有一些网络代理或防火墙会阻止连接;
  2. 缺乏安全策略,前面讲过没有同源策略的限制(这个需要注意);
  3. 对网络要求比较高,如果网络波动频繁可以回导致经常断联(导致断联原因不好排查);
  4. 需要保持长连接也会占用服务器的较多资源;
  5. 不适合大文件传输,websocket协议发送数据包不能超过2GB;

2.3 使用场景

websocket的主要优点就是保持客户端与服务端双向实时通讯,所以他主要的引用场景在于:

  1. 在线聊天室、游戏消息推送;
  2. 多媒体对话,例如视频会议等;
  3. 网页更新实时的数据流,股票价格波动、票房分析等;

三、websocket对象详解

WebSocket 对象提供了用于创建和管理 WebSocket]连接,以及可以通过该连接发送和接收数据的 API。

3.1 实例属性

通过使用WebSocket()构造函数来实例化一个WebSocket对象。

3.1.1 url

Websocket的绝对路径(只读)

3.1.2 readyState

WebSocket当前连接的状态(只读)

  1. WebSocket.CONNECTING:正在连接中
  2. WebSocket.OPEN:已经连接可以通信
  3. WebSocket.CLOSING:连接正在关闭
  4. WebSocket.CLOSED:连接已关闭或者没有连接成功
3.1.3 protocol

protocol是个只读属性,用于返回服务器端选中的子协议的名字;这是一个在创建 WebSocket对象时,在参数 protocols 中指定的字符串,当没有已建立的链接时为空串。

3.2 实例方法

3.2.1 close()

WebSocket.close() 方法关闭 WebSocket连接或连接尝试(如果有的话)。如果连接已经关闭,则此方法不执行任何操作。

3.2.2 send()

WebSocket.send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值。若数据无法传输(例如数据需要缓存而缓冲区已满)时,套接字会自行关闭。

3.3 事件监听回调

3.3.1 close

监听将在 WebSocket 连接的readyState变为 CLOSED时被调用

3.3.2 error

websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个error事件将被引发。

3.3.3 message

message 事件会在 WebSocket 接收到新消息时被触发。

3.3.4 open

监听将在 WebSocket 连接的readyState变为 CONNECTING时被调用

四、封装WebSocket工具函数

export class WebSocketClient {url = '';socket = null;// #计时器idheartbeatTimer = undefined;// 是否彻底关闭stopWebSocket = false;// 消息列表msgList = [];// 事件监听对象eventListenerInfo = {};// 构造函数constructor(url) {this.url = url;}// 添加事件监听addEventListener(type, listener) {if (!this.eventListenerInfo[type]) {this.eventListenerInfo[type] = [];}if (this.eventListenerInfo[type].indexOf(listener) === -1) {this.eventListenerInfo[type].push(listener);}}// 删除事件监听removeEventListener(type) {this.eventListenerInfo[type] = [];}// 监听事件绑定dispatchEvent(type, data) {const listenerArray = this.eventListenerInfo[type] || [];if (listenerArray.length === 0) return;listenerArray.forEach(listener => {listener.call(this, data);});}// 监听回调onopen(callBack) {this.addEventListener('open', callBack);}onmessage(callBack) {this.addEventListener('message', callBack);}onclose(callBack) {this.addEventListener('close', callBack);}onerror(callBack) {this.addEventListener('error', callBack);}// 消息列表增加addMsgList(list) {this.msgList = [...this.msgList, ...list];}// 批量发送消息pushMsgListAll() {if (this.msgList.length && this.socket && this.socket.readyState === WebSocket.OPEN) {// 发送头部数据const msg = this.msgList.shift();this.send(msg);pushMsgListAll();} else {// 重连重新发送this.connect();}}// 消息发送send(message) {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(message);} else {console.error('websocket 未连接或已断开,请查看!');}}// 心跳检测onHeartbeat() {if (this.stopWebSocket) return;if (this.heartbeatTimer) {this.offHeartbeat();}this.heartbeatTimer = setInterval(() => {if (this.socket) {this.socket.send('ping,测试是否连接中');} else {console.error('websocket 未连接或已断开,请查看!');}}, 10000);}// 关闭心跳检测offHeartbeat() {clearInterval(this.heartbeatTimer);this.heartbeatTimer = undefined;}// 连接connect() {console.log(`WebSocket连接地址: ${this.url}`);if (this.socket && this.socket.readyState === WebSocket.OPEN) {return;}this.socket = new WebSocket(this.url);// !websocket连接成功this.socket.onopen = event => {this.stopWebSocket = false;// 开启心跳检测this.onHeartbeat();console.log(`连接成功`);// 判断是否有消息未发送成功if (this.msgList.length) {this.pushMsgListAll();}this.dispatchEvent('open', event);};this.socket.onmessage = event => {this.dispatchEvent('message', event);this.onHeartbeat();};this.socket.onclose = event => {if (!this.stopWebSocket) {// 断网重连逻辑setTimeout(() => {this.connect();}, 5000);}this.dispatchEvent('close', event);};this.socket.onerror = event => {this.offHeartbeat();this.dispatchEvent('error', event);};}// 关闭连接close() {if (this.socket) {this.stopWebSocket = true;this.socket.close();this.socket = null;this.removeEventListener('open');this.removeEventListener('message');this.removeEventListener('close');this.removeEventListener('error');}this.offHeartbeat();}
}

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

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

相关文章

163.二叉树:二叉树的最小深度(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…

海南省三支一扶报名照上传失败?别忘了这

一、海南三支一扶报名照上传失败的2个原因 1.未按要求使用浏览器:请使用IE浏览器(IE8以上版本)、Chrome(谷歌浏览器)或 Firefox(火狐)浏览器 来使用本系统,360浏览器等其他浏览器请使用极速模式…

C语言编程中的问号:深入解析三元运算符与条件编译

C语言编程中的问号:深入解析三元运算符与条件编译 在C语言编程的广阔天地中,问号(?)这一看似简单的符号,实则蕴含着丰富的内涵和多样的用法。它既可以作为三元运算符的一部分,用于在代码中实现条件判断&a…

数电课设:电动机转速测量控制电路

电动机转速测量控制电路设计 摘要 本文设计的电动机转速测量控制电路通过数字电路核心实现对电机转速的测量和显示。与市面上基于单片机的电机转速测量相比,该电路无需要注重复杂的软件设计,功耗小,稳定性高,实现了更好的底层封装…

C语言编程电子印章:技术与应用的深度探索

C语言编程电子印章:技术与应用的深度探索 在数字化时代,电子印章以其高效、便捷的特性逐渐取代了传统的物理印章。而C语言,作为一种基础且强大的编程语言,为电子印章的开发提供了强大的技术支持。本文将从四个方面、五个方面、六…

如何组织我的 Python 代码

编写代码更像是一门艺术,而不是一门科学。编写精炼、合乎逻辑且强大的工程解决方案对于解决问题非常重要。然而,似乎存在一个重大挑战:让这些解决方案全面且易读。 本文的重点是如何最好地组织 Python 类,使其既可读又整洁。Pyth…

pdf文件太大如何变小,苹果电脑压缩pdf文件大小工具软件

压缩PDF文件是我们在日常办公和学习中经常会遇到的需求。PDF文件由于其跨平台、保持格式不变的特点,被广泛应用于各种场合。然而,有时候我们收到的PDF文件可能过大,不便于传输和存储,这时候就需要对PDF文件进行压缩。下面&#xf…

针对硅基氮化镓高电子迁移率晶体管(GaN-HEMT)的准物理等效电路模型,包含基板中射频漏电流的温度依赖性

来源:Quasi-Physical Equivalent Circuit Model of RF Leakage Current in Substrate Including Temperature Dependence for GaN-HEMT on Si(TMTT 23年) 摘要 该文章提出了一种针对硅基氮化镓高电子迁移率晶体管(GaN-HEMT&…

【Java数据结构】详解LinkedList与链表(四)

🔒文章目录: 1.❤️❤️前言~🥳🎉🎉🎉 2.什么是LinkedList 3.LinkedList的使用 3.1LinkedList的构造方法 3.2LinkedList的其他常用方法介绍 addAll方法 subList方法 LinkedList的常用方法总使…

网络I/O模型

网络I/O模型 同步I/O阻塞I/O非阻塞I/OI/O多路复用select函数接口示例 poll函数接口示例 poll 和 select 的区别epoll原理:示例 Reactor单 Reactor 单进程 / 线程;单 Reactor 多线程 / 进程;多 Reactor 多进程 / 线程; 异步I/O 同步…

歌声合成算法流程和基于lstm的算法实例

歌声合成(Singing Voice Synthesis, SVS)是一项复杂的任务,旨在生成具有自然音质和情感的歌声。实现这种效果的算法通常涉及多个步骤,包括音高预测、音素时长预测、声学特征生成和波形生成等。基于LSTM(Long Short-Term Memory)网络的歌声合成算法是其中一种常见的方法。…

【吊打面试官系列】Java高并发篇 - 什么是自旋 ?

大家好,我是锋哥。今天分享关于 【什么是自旋 ?】面试题,希望对大家有帮助; 什么是自旋 ? 很多 synchronized 里面的代码只是一些很简单的代码,执行时间非常快,此时等待的线程都加锁可能是一种不…

CCIG学术论坛|文档解析技术加速大模型训练与应用

目录 前言一、大模型训练和应用过程的关键环节面临的问题1、数据2、算力3、语料4、训练时间5、模型规模与复杂度6、部署和推理效率7、安全和隐私 二、高精准、高效率的文档解析三、文档解析技术难点四、TextIn文档解析1、算法Pipeline2、文档图像预处理算法效果3、版面分析算法…

关于单链表——数组

1.单链表统计负数个数 要求实现一个函数,返回带头结点的单链表中负整数的个数。 函数接口定义: int NegativeInt(LinkList L); L是带头结点的单链表的头指针,函数NegativeInt返回L中负整数的个数。如果单链表为空,返回0。 其中Lin…

5岁幼儿编程:开启未来的神秘之门

5岁幼儿编程:开启未来的神秘之门 在数字化浪潮席卷全球的今天,编程教育已经逐渐渗透到各个年龄段,甚至包括5岁的幼儿。那么,5岁幼儿编程究竟是什么样的呢?它是否像成年人所理解的那样复杂和抽象?本文将从四…

小熊家务帮day5-day7 客户管理模块1 (小程序认证,手机验证码认证,账号密码认证,修改密码,找回密码等)

客户管理模块 1.认证模块1.1 认证方式介绍1.1.1 小程序认证1.1.2 手机验证码登录1.1.3 账号密码认证 1.2 小程序认证1.2.1 小程序申请1.2.2 创建客户后端工程jzo2o-customer1.2.3 开发部署前端1.2.4 小程序认证流程1.2.4.1 customer小程序认证接口设计Controller层Service层调用…

【人工智能】第一部分:ChatGPT的基本概念和技术背景

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

STM32作业实现(八)触摸按键TPAD

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

C语言编程训练图:解锁编程之路的迷宫与宝藏

C语言编程训练图:解锁编程之路的迷宫与宝藏 在编程的世界里,C语言如同一张错综复杂的训练图,它既是迷宫,也是宝藏图。只有那些勇敢而智慧的探险者,才能在其中找到通往编程大师的道路。本文将带领你一起探索这张神秘的…

Tika介绍

Apache Tika 是一个开源的Java库,用于检测和提取各种文件格式的内容。它能够识别超过1000种文件格式,并从中提取文本、元数据和结构化信息。Tika 是 Apache Software Foundation 的一个项目,它提供了一个简单的API,可以轻松地集成…