位置: IT常识 - 正文

一个简单的websocket hook(一个简单的web项目名称)

编辑:rootadmin
一个简单的 vue3 的 websocket hook. 有以下基础功能: 创建链接 失败重连 发送心跳包 import { ref } from "vue"; export interface WS_CONFIG { url: string; // ws链接地址 sendData?: Record ...

推荐整理分享一个简单的websocket hook(一个简单的web项目名称),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:一个简单的web的页面,一个简单的web代码,一个简单的web app要包含的内容清单,一个简单的web项目名称,一个简单的web项目例子,一个简单的web项目例子,一个简单的web作业,一个简单的web项目例子,内容如对您有帮助,希望把文章链接给更多的朋友!

一个简单的 vue3 的 websocket hook. 有以下基础功能:

创建链接失败重连发送心跳包import { ref } from "vue";export interface WS_CONFIG { url: string; // ws链接地址 sendData?: Record<string, any>; // 请求数据 reconnectSec?: number; // 请求异常重连间隔 needHeart?: boolean; // 是否需要心跳 heartSec?: number; // 心跳间隔 heartData?: unknown; // 心跳时发送的数据}export default function <T>({ url, sendData = {}, heartSec = 1000 * 30, needHeart = false, reconnectSec = 1000 * 30, heartData = "ping",}: WS_CONFIG) { // 响应数据 const wsData = ref<T | undefined>(); // 重试次数 const retryNumber = ref<number>(0); let socket: WebSocket | null = null; let heart_Interval: number | null = null; let lockConnect = false; let number = 0; // 创建链接 function connect() { // 重连之前,关闭上次的连接 if (socket) { socket.close(); } socket = new WebSocket(url); retryNumber.value = number++; // 连接成功回调 socket.onopen = () => { console.log(`${url} open event - ${new Date()}`); // 维持心跳 needHeart && heart(); // 清空重试次数 number = 0; retryNumber.value = 0; // 发送数据 socket?.send(JSON.stringify(sendData)); }; // 连接断开回调 socket.onclose = (e) => { console.log(`${new Date()}${url} close eventcode: ${e.code};reason: ${e.reason};isTrusted: ${e.isTrusted}; `); console.log(`reconnect - ${new Date()}`); // 进行重连 reconnect(); }; // 连接失败回调 socket.onerror = (e) => { console.log(`${url} error event`, e); // 进行重连 reconnect(); }; // 接收到数据 socket.onmessage = (e: MessageEvent<string>) => { const { data } = e; const _data = (typeof data === "string" ? JSON.parse(data) : data) as T; wsData.value = _data; }; } // 心跳函数,维持链接不断开 function heart() { clearHeart(); heart_Interval = setInterval(() => { socket?.send( typeof heartData === "string" ? heartData : JSON.stringify(heartData) ); }, heartSec); } // 断开心跳 function clearHeart() { heart_Interval && clearInterval(heart_Interval); } // 重连 function reconnect() { // 控制重连频率 if (lockConnect) { return; } lockConnect = true; // 清除心跳 clearHeart(); setTimeout(() => { lockConnect = false; connect(); }, reconnectSec); } connect(); // 关闭链接 function clearWS() { socket?.close(); clearHeart(); } return { wsData, retryNumber, clearWS, };}
本文链接地址:https://www.jiuchutong.com/zhishi/309246.html 转载请保留说明!

上一篇:电脑学习网解决方案:危险数据盘为windwos分区,为了你的数据安全,请手动挂载,本脚本不执行任何操作(网上学电脑哪个软件好)

下一篇:帝国cms导航怎么加nofollow(帝国cms导航站模板)

  • 摄像头能识别戴口罩人脸吗(摄像头能识别戴头盔人脸吗)

    摄像头能识别戴口罩人脸吗(摄像头能识别戴头盔人脸吗)

  • 为什么苹果ID用不了(为什么苹果ID用QQ邮箱还是和手机号是一个)

    为什么苹果ID用不了(为什么苹果ID用QQ邮箱还是和手机号是一个)

  • 苹果6怎么恢复旧系统(苹果6怎么恢复出厂设置在哪里)

    苹果6怎么恢复旧系统(苹果6怎么恢复出厂设置在哪里)

  • 小米手表同步失败

    小米手表同步失败

  • 苹果手机怎么变成黑白的了(苹果手机怎么变手写键盘)

    苹果手机怎么变成黑白的了(苹果手机怎么变手写键盘)

  • 微信号借给别人安全吗(微信号借给别人之后登录不了)

    微信号借给别人安全吗(微信号借给别人之后登录不了)

  • 锐龙5 3600相当于i几(锐龙53600相当于)

    锐龙5 3600相当于i几(锐龙53600相当于)

  • 两部手机微信能同步吗(一部手机怎么登两个微信)

    两部手机微信能同步吗(一部手机怎么登两个微信)

  • 计算机字长是多少(计算机的字长一般是几的倍数)

    计算机字长是多少(计算机的字长一般是几的倍数)

  • 4k和蓝光哪个清晰度高(4k 和蓝光)

    4k和蓝光哪个清晰度高(4k 和蓝光)

  • 华为nova5pro网速慢是怎么回事(华为nova5pro网速跟时间怎么换位置)

    华为nova5pro网速慢是怎么回事(华为nova5pro网速跟时间怎么换位置)

  • opporeno2z怎么截屏(opporeno2截屏)

    opporeno2z怎么截屏(opporeno2截屏)

  • 腾讯视频vip怎么用电话号登录(腾讯视频vip怎么关闭自动续费)

    腾讯视频vip怎么用电话号登录(腾讯视频vip怎么关闭自动续费)

  • 苹果11充满电要多久(苹果11充满电要多少毫安)

    苹果11充满电要多久(苹果11充满电要多少毫安)

  • 鲲鹏920芯片是什么芯片(鲲鹏920处理器 谁家代工的)

    鲲鹏920芯片是什么芯片(鲲鹏920处理器 谁家代工的)

  • 苹果xs多重(苹果xs多重多少g)

    苹果xs多重(苹果xs多重多少g)

  • soul怎么添加通讯录好友(soul怎么加联系人)

    soul怎么添加通讯录好友(soul怎么加联系人)

  • oppo手机还原出厂设置(oppo手机还原出厂设置后啥都没有了咋办)

    oppo手机还原出厂设置(oppo手机还原出厂设置后啥都没有了咋办)

  • 视频渲染啥意思(视频渲染什么意思)

    视频渲染啥意思(视频渲染什么意思)

  • e3 1220 v2用什么主板(e3 1220 v2用什么系统)

    e3 1220 v2用什么主板(e3 1220 v2用什么系统)

  • 什么是idac(什么是ID?)

    什么是idac(什么是ID?)

  • 滴滴成交率哪里看(滴滴成交率多久更新)

    滴滴成交率哪里看(滴滴成交率多久更新)

  • qq手动什么意思(qq的手势)

    qq手动什么意思(qq的手势)

  • arunit可以卸载吗(arunit下载)

    arunit可以卸载吗(arunit下载)

  • 电视芒果tv怎么退出登录

    电视芒果tv怎么退出登录

  • 微信上零钱通是什么意思(微信零钱通属于什么)

    微信上零钱通是什么意思(微信零钱通属于什么)

  • 华为nova5什么屏幕(华为nova5屏幕材质好不好)

    华为nova5什么屏幕(华为nova5屏幕材质好不好)

  • CLIP模型(CLIP模型原理)

    CLIP模型(CLIP模型原理)

  • 一般纳税人开普票税率是3%还是13%
  • 销售货物的运费计入成本吗
  • 用友项目核算科目的项目不能为空
  • 营改增后纳税人可以使用的发票种类有
  • 个人专项扣除需要扣税吗
  • 收购公司财务如何管理
  • 支付的保证金
  • 供用电合同主要有
  • 公司发工资如何操作
  • 企业所得税的征税对象包括
  • 股权转让是把公司卖了吗
  • 股息红利个人所得税扣税失败
  • 国家要收回房屋土地怎么补偿
  • 产品售后维修费分录
  • 2019年收入不足6万如何退税
  • 期间损益结转怎么结转
  • 租车费增值税专用发票
  • 未竣工验收已交付使用的工程还需安全监管吗
  • 1697510768
  • 佣金可以开票吗
  • 用户登录系统后首先进入什么
  • 电脑开机需要按ctrl+alt+del怎么取消
  • windows7给c盘扩容
  • 老板的工资属于
  • win11安装不显示wifi
  • explorer.exe进程文件
  • thinkphp i方法
  • 辞退员工补偿标准是n+1还是2n
  • 事件监听处理的实现原理
  • 外籍人员工资薪金扣除
  • jquery版本
  • 泛微oa二次开发难吗
  • php字符串包含某个字符串
  • gps定位器怎么开启
  • 收到国税退回的发票
  • 企业进行清算
  • 公司租房电费怎么算
  • mongodb主备配置
  • 股权处置时点
  • 经营活动现金净流量为正说明什么
  • 发票有别的字迹有影响吗
  • 资源税类的税种是
  • 出口合同的流程
  • sql server查询
  • 小规模纳税人地方教育费附加税率
  • 筹建期间业务招待费的财税处理规定
  • 政府预算会计的会计科目
  • 利润分配贷方余额怎么处理
  • 专用设备技术维护费
  • 预提费用多提了怎么办
  • 小规模纳税人销售自己使用过固定资产
  • 资产负债表中没有其他应收款
  • 企业专家咨询费标准
  • 自行研发的无形资产入账价值
  • 企业债与公司债的还款有区别
  • 施工企业周转材料会计科目的设置
  • sql语句错误提示
  • fedora内核版本
  • linux tr命令详解
  • win10设置设备
  • ubuntu20.04教程
  • 如何解决笔记本电脑温度过高 蓝屏
  • linux getuid
  • win10手写输入法怎么设置
  • bootstrap下拉框设置默认值
  • jquery移除
  • jquery实现简洁文件上传表单样式
  • jquery链式操作原理
  • android内存dump
  • cocos2dx 3.0 quick lua schedler
  • [置顶]bilinovel
  • appendChild() 或 insertBefore()使用与区别介绍
  • node.js快速入门
  • android设置无标题
  • jquery audio
  • 如何将位置信息生成二维码
  • 国家税务总局开票系统怎么开票
  • 集资房税收问题
  • 微信收款商业版和个人经营收款码区别
  • 山西房产税征收标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设