前端WebSocket的方法封装
一、封装方法
在项目根目录src下的utils中新增webSocketManager.js封装文件，代码内容如下：
// webSocketManager.js
/** WebSocketMessenger封装类 */
class WebSocketManager {
constructor(url = null, userId = null, receiveMessageCallback = null) {
this.socket = null // WebSocket 对象
this.sendTimeObj = null // 发送信息给服务端的重复调用的时间定时器
this.reconnectTimeObj = null // 尝试链接的宏观定时器
this.reconnectTimeDistance = 5000 // 重连间隔，单位：毫秒
this.maxReconnectAttempts = 10 // 最大重连尝试次数
this.reconnectAttempts = 0 // 当前重连尝试次数
this.id = userId //用户ID（业务逻辑，根据自己业务需求调整）
this.url = url // WebSocket 连接地址
this.receiveMessageCallback = receiveMessageCallback // 接收消息回调函数
}
/**
* 开启WebSocket
*/
async start() {
if (this.url && this.id) {
// 连接WebSocket
this.connectWebSocket()
} else {
console.error('WebSocket erros: 请传入连接地址和用户id')
}
}
/**
* 创建WebSocket连接
*/
connectWebSocket() {
// 通过id生成唯一值（服务端要求，具体根据自己业务去调整）
let protocol = `${this.id}-${Math.random()}` //字符串用于指定子协议，可以实现单个服务器多个 WebSocket 子协议
// 创建 WebSocket 对象，protocol为可选参数，默认值为空字符串
this.socket = new WebSocket(this.url, protocol) // WebSocket连接实例
// 处理连接打开事件
this.socket.onopen = (event) => {
// 给服务端发送第一条反馈信息
this.startSendServe()
}
// 处理接收到消息事件
this.socket.onmessage = (event) => {
this.receiveMessage(event)
}
// 处理连接关闭事件
this.socket.onclose = (event) => {
// 清除定时器
clearTimeout(this.sendTimeObj)
clearTimeout(this.reconnectTimeObj)
// 尝试重连
if (this.reconnectAttempts < this.maxReconnectAttempts) {
this.reconnectAttempts++
console.log('重试链接次数：'+ this.reconnectAttempts)
this.reconnectTimeObj = setTimeout(() => {
this.connectWebSocket()
}, this.reconnectTimeDistance)
} else {
// 重置重连次数
this.reconnectAttempts = 0
console.error(
'WebSocketManager erros: Max reconnect attempts reached. Unable to reconnect.'
)
}
}
// 处理 WebSocket 错误事件
this.socket.onerror = (event) => {
console.error('WebSocketManager error:', event)
}
}
/**
* 发送给服务器的第一条信息，测试链接打开
*/
startSendServe() {
this.sendMessage('hi I come from client')
}
/**
* 发送消息
* @param {String} message 消息内容
*/
sendMessage(message) {
if (this.socket.readyState === WebSocket.OPEN) {
this.socket.send(message)
} else {
console.error(
'WebSocketManager error: WebSocket connection is not open. Unable to send message.'
)
}
}
/**
* 接收到消息
*/
receiveMessage(event) {
// 根据业务自行处理
console.log('receiveMessage:', event.data)
this.receiveMessageCallback && this.receiveMessageCallback(event.data)
}
/**
* 关闭连接
*/
closeWebSocket() {
this.socket.close()
// 清除定时器 重置重连次数
clearTimeout(this.sendTimeObj)
clearTimeout(this.reconnectTimeObj)
this.reconnectAttempts = 0
}
}
二、使用示例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./utils/webSocketManager.js"></script>
<script>
//引入 const WebSocketManager = require('./webSocketManager.js')
console.log(WebSocketManager)
/**
* 接收消息回调
*/
const receiveMessage = (res)=>{
console.log('接收消息回调：',res)
}
const socketManager = new WebSocketManager('ws://localhost:3000', 'userid292992', receiveMessage)
socketManager.start()
</script>
</head>
感谢梦幻星辰吧大佬的技术分享，本文为自用备忘记录，原文链接：https://mp.weixin.qq.com/s/mSfgo3SRAwT83JJsVZ1HJw
前端WebSocket的方法封装的更多相关文章
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 前端js重组树形结构数据方法封装
不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能.那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟 ...
- WebIM技术---编写前端WebSocket组件
过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...
- 常用js方法封装
常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...
- 循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- js引用类型深拷贝、浅拷贝方法封装
引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...
- C#常用字符串加解密方法封装
C#中常用的字符串加密.解密方法封装,包含只加密但不解密的方法.收藏起来备用. //方法一 //须添加对System.Web的引用 //using System.Web.Security; /// & ...
- 编写SqlHelper使用，在将ExecuteReader方法封装进而读取数据库中的数据时会产生Additional information: 阅读器关闭时尝试调用 Read 无效问题，解决方法与解释
在自学杨中科老师的视频教学时,拓展编写SqlHelper使用,在将ExecuteReader方法封装进而读取数据库中的数据时 会产生Additional information: 阅读器关闭时尝试调用 ...
- C#方法封装与重构
C#作为一个完全面向对象的语言,有个特性很重要但是往往会不重视,而不重视的结果就会造成代码杂乱难以解读.维护.这个特性就是封装. 这里不是大谈C#的封装,我只讲一个,关于方法封装的一些问题. ...
- 基于promise对小程序http请求方法封装
原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...
随机推荐
- The selected directory is not a valid home for Go SDK
前言 The selected directory is not a valid home for Go SDK 出现这个错误的原因是 idea 的 Go-plugin 插件,和 Go 的sdk版本不 ...
- python web服务器--WSGI/ASGI协议--web框架，三者之间的关系
在 Python Web 开发中,Web 服务器.WSGI/ASGI 协议 和 Web 框架 是三个核心组成部分,它们共同协作以实现完整的 Web 应用程序.以下是三者之间的关系和作用的详细讲解: 1 ...
- CentOS 版本选择DVD、Everything、LiveCD、Minimal、NetInstall
CentOS 7.X,主要是下载的时候有很多版本供选择,如何选择? DVD版:这个是常用版本,就是普通安装版了,推荐大家安装.里面包含大量的常用软件,大部分情况下安装时无需再在线下载,体积为4G.Ev ...
- 寻找可靠的长久的存储介质之旅，以及背后制作的三个网页“图片粘贴转base64”、“生成L纠错级别的QR码”、“上传文件转 base64以及粘贴 base64 转可下载文件”
其实对于目前的形式来说,虽然像 U 盘.固态硬盘.甚至光盘这些信息储存介质(设备)的容量越来越高,但是不得不说这些设备的可靠性依然像悬着的一块石头,虽然这块石头确实牢牢的粘在天花板上,但是毕竟是粘上去 ...
- Let’s Encrypt & Certbot 浅谈
前言 当我们想给网站启用HTTPS, 通常需要从证书颁发机构购买证书, 并配置到现有的HTTP服务上来实现HTTPS. 这里暗藏的痛点是: 我们需要花钱(买证书) 证书颁发机构(质量参差不齐, 不一定 ...
- Armbian 安装与更换为国内软件源
Armbian 是为 ARM 架构的单板计算机(如树莓派.NanoPi.Orange Pi 等)提供的开源镜像系统,它基于 Debian 或 Ubuntu 系统.在使用 Armbian 进行开发.调试 ...
- LinkedBlockingQueue的poll方法底层原理
一.LinkedBlockingQueue的poll方法底层原理 LinkedBlockingQueue 的 poll 方法用于从队列头部移除并返回元素.如果队列为空,poll 方法会立即返回 nul ...
- 记一次 .NET某固高运动卡测试 卡慢分析
一:背景 1. 讲故事 年前有位朋友找到我,说他们的程序会偶发性卡慢 10s 钟,在某些组合下会正常,某些组合下就会出现问题,解释不了其中的原因,让我帮忙看下怎么回事?截图如下: private vo ...
- python开发箱号批量查询关联SN号码的程序
# 需要导入的包 import tkinter as tk from tkinter import ttk, messagebox, filedialog import pyodbc import p ...
- python基础必练题！！
水仙花数 水仙花数 info = 3 while info: # 用户输入数字 try: print(f"请输入数字,您有{info}次机会!!") num = int(input ...