Vue3 + Ts + Vite项目 websoket封装使用

news2024/12/24 21:31:57

文章目录

    • 一、安装
    • 二、封装
    • 三、请求地址配置
        • 3.1 将接口地址放到 public
        • 3.2 引入 ipconfig.js 文件
        • 3.3 全局类型声明
    • 四、页面使用
        • 4.1 引用
        • 4.2 注册
    • 五、说明


一、安装

npm

npm install websocket --save-dev

pnpm

pnpm install websocket --save-dev

二、封装

在 /src/utils 文件夹下创建 websocket.ts 文件,并放入如下代码

import { onUnmounted } from 'vue'

//设置
interface SocketOptions {
  //心跳间隔
  heartbeatInterval?: number
  //超时重传
  reconnectInterval?: number
  //最大重传次数
  maxReconnectAttempts?: number
}

class Socket {
  //路径
  url: string
  ws: WebSocket | null = null
  opts: SocketOptions
  //重传次数
  reconnectAttempts: number = 0
  listeners: { [key: string]: Function[] } = {}
  //心跳间隔
  heartbeatInterval: number | null = null
  //构造函数
  constructor(url: string, opts: SocketOptions = {}) {
    this.url = url
    this.opts = {
      //心跳间隔
      heartbeatInterval: 30000,
      //超时重传
      reconnectInterval: 5000,
      //最大重传次数
      maxReconnectAttempts: 5,
      ...opts
    }

    this.init()
  }
  //初始化
  init() {
    this.ws = new WebSocket(this.url)
    this.ws.onopen = this.onOpen.bind(this)
    this.ws.onmessage = this.onMessage.bind(this)
    this.ws.onerror = this.onError.bind(this)
    this.ws.onclose = this.onClose.bind(this)
  }
  //打开
  onOpen(event: Event) {
    console.log('WebSocket opened:', event)
    this.reconnectAttempts = 0
    this.startHeartbeat()
    this.emit('open', event)
  }
  //收到的WebSocket消息
  onMessage(event: MessageEvent) {
    // console.log('WebSocket message received:', event.data);
    this.emit('message', event.data)
  }
  //错误
  onError(event: Event) {
    console.error('WebSocket error:', event)
    this.emit('error', event)
  }
  //重连逻辑中,在连接失败后自动重新连接
  onClose(event: CloseEvent) {
    console.log('WebSocket closed:', event)
    this.stopHeartbeat()
    this.emit('close', event)
    //重连逻辑中,在连接失败后自动重新连接,但会限制重连的次数和每次重连之间的间隔时间
    if (this.opts.maxReconnectAttempts !== 0 && this.reconnectAttempts < this.opts.maxReconnectAttempts!) {
      setTimeout(() => {
        // console.log("我有错误了1111111111111111111111111111111111111");
        this.reconnectAttempts++
        this.init()
      }, this.opts.reconnectInterval)
    }
  }
  //开始心跳检测
  startHeartbeat() {
    if (!this.opts.heartbeatInterval) return

    this.heartbeatInterval = window.setInterval(() => {
      if (this.ws?.readyState === WebSocket.OPEN) {
        this.ws.send('ping')
      }
    }, this.opts.heartbeatInterval)
  }
  //停止心跳检测
  stopHeartbeat() {
    if (this.heartbeatInterval) {
      clearInterval(this.heartbeatInterval)
      this.heartbeatInterval = null
    }
  }
  //发送消息
  send(data: string) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(data)
    } else {
      console.error('WebSocket is not open. Cannot send:', data)
    }
  }
  //事件监听器注册功能的实现
  on(event: string, callback: Function) {
    if (!this.listeners[event]) {
      this.listeners[event] = []
    }
    this.listeners[event].push(callback)
  }
  //从事件监听器中移除
  off(event: string) {
    if (this.listeners[event]) {
      delete this.listeners[event]
    }
  }
  //在事件监听器中触发一个指定的事件
  emit(event: string, data: any) {
    this.listeners[event]?.forEach(callback => callback(data))
  }
}

export function useSocket(url: string, opts?: SocketOptions) {
  const socket = new Socket(url, opts)

  onUnmounted(() => {
    socket.off('open')
    socket.off('message')
    socket.off('error')
    socket.off('close')
    socket.ws?.close() // 关闭WebSocket连接
  })

  return {
    socket,
    send: socket.send.bind(socket),
    on: socket.on.bind(socket),
    off: socket.off.bind(socket)
  }
}

三、请求地址配置

3.1 将接口地址放到 public

在这里插入图片描述

3.2 引入 ipconfig.js 文件

在这里插入图片描述

3.3 全局类型声明
declare global {
  /**
   * Window 的类型提示
   */
  interface Window {
    __APP_INFO__: __APP_INFO__
    global_config: { wsURL: string }
  }
}

在这里插入图片描述


四、页面使用

4.1 引用
import { useSocket } from '@/utils/websocket'
4.2 注册
// 注意:此处 useSocket() 中用的就是我们配置的全局地址
// 开发结束,打包给后端,后端同时可以自行修改 ipconfig.js 文件中 websokect 地址,这样部署上线之后 websokect 也能正常运行
const { socket, on } = useSocket((window as any).global_config.wsURL)

on('close', () => console.log('Socket closed!'))
//webSocket连接上服务器时
on('open', (event: any) => {
  console.log('webSocket连接上服务器时', event)
})
socket.on('message', (data: any) => {
  if (data) {
   // TODO: 此处拿到后端推送过来的数据,进行你后续的数据渲染逻辑
   console.log(JSON.parse(data))
  }
})

五、说明

在这里插入图片描述

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

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

相关文章

Haskell爬虫:连接管理与HTTP请求性能

爬虫技术作为数据抓取的重要手段&#xff0c;其效率和性能直接影响到数据获取的质量与速度。Haskell&#xff0c;作为一种纯函数式编程语言&#xff0c;以其强大的类型系统和并发处理能力&#xff0c;在构建高效爬虫方面展现出独特的优势。本文将探讨在Haskell中如何通过连接管…

OVMR:华为北大联手,基于多模态融合的SOTA开放词汇识别 | CVPR 2024

即插即用的方法OVMR将新类别的多模态线索嵌入到VLM中&#xff0c;以增强其在开放词汇识别中的能力。它最初利用多模态分类器生成模块将示例图像嵌入到视觉标记中&#xff0c;然后通过推断它们与语言编码器的上下文关系来自适应地融合多模态线索。为了减轻低质量模态的负面影响&…

[DICOM活久见] 序列内部的RescaleIntercept不同导致的问题

本文由Markdown语法编辑器编辑完成. 1. 背景: 本文记录在工作中遇到的一些比较罕见的dicom图像. 这对于在未来工作中, 处理图像时, 需要考虑方案的完整性, 会有很大的帮助. 本文介绍的, 是目前我工作10年来, 头一次见到的一个CT序列, 它的序列内的RescaleIntercept值, 不是完…

Ubuntu解压7z压缩包方法

0 Preface/Foreword 1 解压缩指令 1.1 环境安装和检查 环境&#xff1a;检测ubuntu环境是否装有7z工具&#xff0c;如果没有&#xff0c;需要手动安装&#xff0c;安装方法如下&#xff1a; sudo apt-update sudo apt-get install p7zip-full 检测工具是否安装成功&#xff…

qmt量化交易策略小白学习笔记第56期【qmt编程之期权数据--获取历史期权列表--原生Python】

qmt编程之获取期权数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 获取历史期权列表 函数能帮助用户获取历史期权列表, 包括某日历史在上交所上市的认购合约和认沽合约, 也包括已经退市的…

PTA单词首字母大写

作者 颜晖 单位 浙大城市学院 本题目要求编写程序&#xff0c;输入一行字符&#xff0c;将每个单词的首字母改为大写后输出。所谓“单词”是指连续不含空格的字符串&#xff0c;各单词之间用空格分隔&#xff0c;空格数可以是多个。 输入格式: 输入给出一行字符。 输出格式…

Css:属性选择器、关系选择器及伪元素

css的属性选择器&#xff1a; 注&#xff1a;属性值只能由数字&#xff0c;字母&#xff0c;下划线&#xff0c;中划线组成&#xff0c;并且不能以数字开头。 1、[属性] 选择含有指定属性的元素&#xff0c;用[]中括号表示。 <style> /*注意大小写区分 注意前后顺序 样…

电脑技巧:如何在Win11电脑上调整设置,让屏幕更加护眼?

目录 一、调整屏幕亮度 二、启用夜间模式 三、调整色彩设置 四、使用第三方护眼软件 五、保持良好的用眼习惯 总结 随着长时间使用电脑的人越来越多,护眼问题也变得越来越重要。Win11作为更新的操作系统,提供了更多的设置选项来帮助我们保护眼睛。本文将详细介绍如何在…

针对实验试服务器的使用问题【安装anaconda+Vscode连接+jupyther远程连接】

目录 一、Xshell连接 1-创建连接 2-安装anaconda 3-创建conda环境 4-修改下载镜像源 5-安装torch 二、VScoda连接服务器 1-下载插件Remote-ssh 用于远程连接服务器 2-配置文件 三、jupyther远程连接 四、师兄推荐的入门资料 1-python基础 2-机器学习 五、参考资料…

网络安全:键盘记录器

目录 什么是键盘记录器&#xff1f; 键盘记录器的类型 键盘记录器的工作原理 键盘记录器的有害影响 如何防止键盘记录器攻击&#xff1f; 在网络攻击的世界中&#xff0c;存在着许多形式的威胁&#xff0c;如前所述。 在本章中&#xff0c;我们将讨论网络攻击中的主要恶意…

基于mediamtx+ffmpeg实现视频推流,基于python-deffcode实现视频拉流

软件依赖&#xff1a;mediamtx、ffmpeg python包依赖&#xff1a;deffcode mediamtx下载地址&#xff1a;https://github.com/bluenviron/mediamtx/releases ffmeg下载地址&#xff1a;https://ffmpeg.org/download.html deffcode安装命令&#xff1a;pip install deffcode 1、…

HarmonyOS NEXT仓颉编程语言开发环境搭建(安装DevEco Studio Cangjie Plugin)

仓颉编程语言开发环境搭建主要是两部分&#xff1a; 安装最新版DevEco Studio&#xff1b;在DevEco Studio里面安装仓颉插件&#xff08;DevEco Studio Cangjie Plugin&#xff09;。 本文主要介绍DevEco Studio Cangjie Plugin的使用。 DevEco Studio Cangjie Plugin概述 …

【堆、快速选择排序】探寻TopK问题的解决方案

目录 前言 什么是TopK问题 建堆——优先级队列 快速选择排序QuickSelect 快速选择排序的时间复杂度 前言 TopK问题在面试中常常被问到 —— 比如&#xff0c;在10亿个整数里&#xff0c;找出最大的前100个。在海量数据中查找出重复出现的元素或者去除重复出现的元素也是常…

相亲交友小程序开发功能分析

相亲交友小程序的开发功能分析可以从用户端和管理后台两个主要方面来进行。 用户端功能 注册与登录&#xff1a; 用户可以通过手机号、微信号或其他第三方平台进行注册登录&#xff0c;简化注册流程。 实名认证&#xff1a; 引入实名认证机制&#xff0c;确保用户信息的真实…

统计学习与方法实战——K近邻算法

K近邻算法 K近邻算法备注k近邻模型算法距离度量 k k k值选择分类决策规则构造KDTree k k k近邻查找范围查询 代码结构总结 K近邻算法 备注 kNN是一种基本分类与回归方法. 多数表决规则等价于0-1损失函数下的经验风险最小化&#xff0c;支持多分类&#xff0c; 有别于前面的感…

深度学习——强化学习算法介绍

强化学习算法介绍 强化学习讨论的问题是一个智能体(agent) 怎么在一个复杂不确定的环境(environment)里面去极大化它能获得的奖励。 强化学习和监督学习 强化学习有这个试错探索(trial-and-error exploration)&#xff0c;它需要通过探索环境来获取对环境的理解。强化学习 ag…

嵌入式全栈开发学习笔记---C++(继承和派生)

目录 继承的概念inherit 继承的使用场景 继承的权限 继承对象的模型 继承中的构造和析构 初始化列表的第三个使用场景 场景1&#xff1a;类成员变量被const修饰&#xff1b; 场景2&#xff1a;类对象作为另一个类的成员变量&#xff0c;同时该类没有提供无参构造函数&a…

刷题记录-HOT 100(三)

链表 1、环形链表找环起始结点 使用快慢指针检测环&#xff1a; 初始化两个指针 slow 和 fast&#xff0c;都指向链表的头节点。slow 每次移动一步&#xff0c;fast 每次移动两步。如果 fast 和 slow 相遇&#xff08;即 fast slow&#xff09;&#xff0c;说明链表中存在环。…

探讨马丁格尔策略应用的3问和昂首平台的3答

问&#xff1a;为什么在使用马丁格尔策略时要如此谨慎?毕竟最大的市场波动可能根本不会发生。 答&#xff1a;让我们以一个具体的例子来说明这个问题。假设我们进行交易&#xff0c;计算出一个小于最大预期值的市场动量&#xff0c;比如说这个值为90便士。试想&#xff0c;如…

C#笔记6 网络编程基础,解释端口套接字,代码实例分析DNS,IPAddress等类

一、计算机网络基础 这一点毋庸置疑&#xff0c;想要写一个使用网络接口传输数据的程序&#xff0c;不知道计算机网络的基本知识是很难的。 局域网与广域网 所谓的WAN和LAN其实就是网络的一个范围界定。WAN为广域网&#xff0c;中间会包含更多的互联网设备&#xff0c;由无数…