当前位置: 首页 > news >正文

websocket+心跳

1.直接上代码

let ws //websocket实例
let lockReconnect = false //避免重复连接
let wsUrl = ''
//初始化websocket
getWebSocketurl()
async function getWebSocketurl() {try {// const data = await getInfo()sid.value = localStorage.getItem('Refresh-Token')wsUrl = `ws://192.168.2.158/webSocket/${sid.value}`createWebSocket(wsUrl)} catch (e) {console.log(e)}
}
//前面都是准备工作
async function createWebSocket(url) {try {ws = new WebSocket(wsUrl) //创建websocket链接initEventHandle() //后续操作} catch (e) {reconnect(url)}
}function initEventHandle() {ws.onclose = function (evnt) {console.log('websocket服务关闭了')reconnect(wsUrl)  }ws.onerror = function (evnt) {console.log('websocket服务出错了')reconnect(wsUrl)}ws.onopen = function (evnt) {console.log('websocket服务开始')sendMsg.value = JSON.stringify(sendMsg.value)ws.send(sendMsg.value)//心跳检测重置heartCheck.reset().start()}ws.onmessage = function (evnt) {//如果获取到消息,心跳检测重置//拿到任何消息都说明当前连接是正常的console.log('websocket服务获得数据了')//接受消息后的UI变化doWithMsg(evnt.data) //收到消息进行页面操作//心跳检测重置heartCheck.reset().start()}//收到消息推送function doWithMsg(msg) {//  收到消息操作页面、、  }function reconnect(url) {if (lockReconnect) returnlockReconnect = true//没连接上会一直重连,设置延迟避免请求过多setTimeout(function () {createWebSocket(url)lockReconnect = false}, 2000)
}//心跳检测
let heartCheck = {timeout: 600000, //60秒timeoutObj: null,serverTimeoutObj: null,reset: function () {clearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)return this},start: function () {let self = thisthis.timeoutObj = setTimeout(function () {//这里发送一个心跳,后端收到后,返回一个心跳消息,//onmessage拿到返回的心跳就说明连接正常// ws.send('HeartBeat')ws.send(sendMsg.value)self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置,说明后端主动断开了ws.close() //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次}, self.timeout)}, this.timeout)},
}

2.另一种

<template></template>
<script>
import store from '@/store'export default {props: {uri: {type: String},},data() {return {webSocket: null, // webSocket实例lockReconnect: false, // 重连锁,避免多次重连maxReconnect: 6,  // 最大重连次数, -1 标识无限重连reconnectTime: 0, // 重连尝试次数heartbeat: {interval: 30 * 1000, // 心跳间隔时间timeout: 10 * 1000, // 响应超时时间pingTimeoutObj: null, // 延时发送心跳的定时器pongTimeoutObj: null, // 接收心跳响应的定时器pingMessage: JSON.stringify({type: 'ping'}) // 心跳请求信息}}},computed: {token() {return store.getters.access_token},tenant() {return store.getters.userInfo.tenantId ? store.getters.userInfo.tenantId : 1;}},created() {this.initWebSocket()},destroyed: function () {this.webSocket.close()this.clearTimeoutObj(this.heartbeat)},methods: {/*** 初始化 weoSocket*/initWebSocket() {// ws地址let host = window.location.host;let wsUri = `ws://${host}${this.uri}?access_token=${this.token}&TENANT-ID=${this.tenant}`// 建立连接this.webSocket = new WebSocket(wsUri)// 连接成功this.webSocket.onopen = this.onOpen// 连接错误this.webSocket.onerror = this.onError// 接收信息this.webSocket.onmessage = this.onMessage// 连接关闭this.webSocket.onclose = this.onClose},/*** 重新连接*/reconnect() {if (!this.token) {return}if (this.lockReconnect || (this.maxReconnect !== -1 && this.reconnectTime > this.maxReconnect)) {return}this.lockReconnect = truesetTimeout(() => {this.reconnectTime++// 建立新连接this.initWebSocket()this.lockReconnect = false}, 5000)},/*** 清空定时器*/clearTimeoutObj: function (heartbeat) {heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj)heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj)},/*** 开启心跳*/startHeartbeat() {const webSocket = this.webSocketconst heartbeat = this.heartbeat// 清空定时器this.clearTimeoutObj(heartbeat)// 延时发送下一次心跳heartbeat.pingTimeoutObj = setTimeout(() => {// 如果连接正常if (webSocket.readyState === 1) {//这里发送一个心跳,后端收到后,返回一个心跳消息,webSocket.send(heartbeat.pingMessage)// 心跳发送后,如果服务器超时未响应则断开,如果响应了会被重置心跳定时器heartbeat.pongTimeoutObj = setTimeout(() => {webSocket.close()}, heartbeat.timeout)} else {// 否则重连this.reconnect()}}, heartbeat.interval)},/*** 连接成功事件*/onOpen() {console.log('WebSocket connection success')//开启心跳this.startHeartbeat()this.reconnectTime = 0},/*** 连接失败事件* @param e*/onError(e) {//错误console.log(`WebSocket connection error:${e.code} ${e.reason} ${e.wasClean}`)//重连this.reconnect()},/*** 连接关闭事件* @param e*/onClose(e) {//关闭console.log(`WebSocket connection closed:${e.code} ${e.reason} ${e.wasClean}`)//重连this.reconnect()},/*** 接收服务器推送的信息* @param msgEvent*/onMessage(msgEvent) {//收到服务器信息,心跳重置并发送this.startHeartbeat()const text = msgEvent.dataif (text.indexOf('pong') > 0) {return}this.$notify.warning({title: '消息提醒',dangerouslyUseHTMLString: true,message: text + '请及时处理',offset: 60})},/*** 数据发送* @param msg*/send(msg) {//数据发送this.webSocket.send(msg)}}
}</script>

相关文章:

websocket+心跳

1.直接上代码 let ws //websocket实例 let lockReconnect false //避免重复连接 let wsUrl //初始化websocket getWebSocketurl() async function getWebSocketurl() {try {// const data await getInfo()sid.value localStorage.getItem(Refresh-Token)wsUrl ws://192.…...

人工智能在信息系统安全中的运用

一、 概述 对于企业和消费者来讲&#xff0c;人工智能是非常有用的工具&#xff0c;那又该如何使用人工智能技术来保护敏感信息?通过快速处理数据并预测分析&#xff0c;AI可以完成从自动化系统到保护信息的所有工作。尽管有些黑客利用技术手段来达到自己的目的&#xff0c;但…...

[python3] 装饰器

装饰器是Python中一种特殊的语法&#xff0c;用于在不修改原函数代码的情况下&#xff0c;为函数添加额外的功能。 装饰器基于函数闭包和函数作为第一类对象的特性实现。 原理&#xff1a; Python中的装饰器本质上是一个函数或类&#xff0c;它接受一个函数作为参数&#xff0…...

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Checkbox)

提供多选框组件&#xff0c;通常用于某选项的打开或关闭。 说明&#xff1a; API version 11开始&#xff0c;Checkbox默认样式由圆角方形变为圆形。 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口…...

【三十】springboot项目上高并发解决示例

互相交流入口地址 整体目录&#xff1a; 【一】springboot整合swagger 【二】springboot整合自定义swagger 【三】springboot整合token 【四】springboot整合mybatis-plus 【五】springboot整合mybatis-plus 【六】springboot整合redis 【七】springboot整合AOP实现日志操作 【…...

原生JavaScript,根据后端返回JSON动态【动态列头、动态数据】生成表格数据

前期准备&#xff1a; JQ下载地址&#xff1a; https://jquery.com/ <!DOCTYPE html> <html><head><meta charset"utf-8"><title>JSON动态生成表格数据,动态列头拼接</title><style>table {width: 800px;text-align: cen…...

OD_2024_C卷_200分_9、园区参观路径【JAVA】【动态规划】

package odjava;import java.util.Scanner;public class 九_园区参观路径 {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt(); // 长 -> 行数int m sc.nextInt(); // 宽 -> 列数int[][] matrix new int[n][m]; // 地图…...

校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序

项目描述&#xff1a; 校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序 功能介绍&#xff1a; 表白墙 卖舍友 步数旅行 步数排行榜 情侣脸 漫画脸 个人主页 私信 站内消息 今日话题 评论点赞收藏 服务器环境要求&#xff1a;PHP7.0 MySQL5.7 效果…...

数据结构小记【Python/C++版】——散列表篇

一&#xff0c;基础概念 散列表&#xff0c;英文名是hash table&#xff0c;又叫哈希表。 散列表通常使用顺序表来存储集合元素&#xff0c;集合元素以一种很分散的分布方式存储在顺序表中。 散列表是一个键值对(key-item)的组合&#xff0c;由键(key)和元素值(item)组成。键…...

前端框架的发展史可以追溯到早期的静态网页时代

前端框架的发展史可以追溯到早期的静态网页时代。以下是前端框架的主要发展阶段&#xff1a; 静态网页时代&#xff1a;在互联网的初期&#xff0c;网页主要由HTML、CSS和JavaScript构成。这些网页是静态的&#xff0c;没有复杂的交互和动态内容。 原生JavaScript时代&#xf…...

迷宫可行路径数

题目描述 现有一个n∗m大小的迷宫&#xff0c;其中1表示不可通过的墙壁&#xff0c;0表示平地。每次移动只能向上下左右移动一格&#xff08;不允许移动到曾经经过的位置&#xff09;&#xff0c;且只能移动到平地上。求从迷宫左上角到右下角的所有可行路径的条数。 输入描述…...

消息队列学习

消息队列是什么 消息队列&#xff1a;Kafka、RocketMQ、RabbitMQ等 腾讯云CMQ消息队列介绍是这么说的&#xff1a; 腾讯云消息队列&#xff08;Cloud Message Queue&#xff0c;以下简称 CMQ&#xff09;是分布式的消息队列服务&#xff0c;用于存储进程间传输的消息&#xff…...

API接口技术开发店铺详情接口采集店铺ID、卖家ID、掌柜名字、店铺名、店铺类型、店铺主页、店铺等级、店铺评分、联系方式等数据接入演示

API接口技术开发店铺详情接口采集店铺ID、卖家ID、掌柜名字、店铺名、店铺类型、店铺主页、店铺等级、店铺评分、联系方式等数据&#xff0c;可以按照以下步骤进行接入演示&#xff1a; 注册并获取API密钥&#xff1a; 在电商平台的开发者中心注册账号。创建一个应用&#xff0…...

ffmpeg maxrate 导致转码输出的内容包含随机性

https://trac.ffmpeg.org/wiki/Limiting%20the%20output%20bitrate 问题 领导提出了一个问题&#xff0c;为什么转码后的视频大小字节数据都不一样&#xff0c;这问到我了&#xff0c;一时语塞。查一下吧&#xff0c;没有什么资料支撑。主动试一下。 尝试 首先尝试一下直接…...

Graphpad Prism10.2.1(395) 安装教程 (含Win/Mac版)

GraphPad Prism GraphPad Prism是一款非常专业强大的科研医学生物数据处理绘图软件&#xff0c;它可以将科学图形、综合曲线拟合&#xff08;非线性回归&#xff09;、可理解的统计数据、数据组织结合在一起&#xff0c;除了最基本的数据统计分析外&#xff0c;还能自动生成统…...

Cocos Creator 2d光照

godot游戏引擎是有2d光照的&#xff0c;用起来感觉还是很强大的&#xff0c;不知道他是怎么搞的&#xff0c;有时间看看他们怎么实现的。 之前一直以为cocos社区里面没有2d光照的实现&#xff0c;偶然看到2d实现的具体逻辑&#xff0c;现在整理如下&#xff0c; 一&#xff1…...

5款好用的AI办公软件,一键轻松制作PPT、视频,提升工作效率!

众所周知&#xff0c;AI 人工智能技术已渗透到生活的方方面面&#xff0c;无论是很多人早已用上的智能音箱、语音助手&#xff0c;还是新近诞生的各种 AI 软件工具&#xff0c;背后都离不开 AI 人工智能技术的加持。 对于各类新生的 AI 软件工具&#xff0c;人们很容易「选边站…...

【MyBatis面试题】

目录 前言 1.MyBatis执行流程。 2.Mybatis是否支持延迟加载&#xff1f; 3.延迟加载的底层原理知道吗&#xff1f; 4.Mybatis的一级、二级缓存用过吗&#xff1f; 5.Mybatis的二级缓存什么时候会清理缓存中的数据&#xff1f; 总结 前言 本文主要介绍了MyBatis面试题相…...

编程界的圣经:从Scheme到JavaScript构建你的计算思维

文章目录 适读人群目 录 《计算机程序的构造和解释》&#xff08;Structure and Interpretation of Computer Programs&#xff0c;简记为SICP&#xff09;是MIT的基础课教材&#xff0c;出版后引起计算机教育界的广泛关注&#xff0c;对推动全世界大学计算机科学技术教育的发…...

智慧城市与智慧乡村:共创城乡一体化新局面

一、引言 随着科技的不断进步和城乡发展的日益融合&#xff0c;智慧城市与智慧乡村的建设已成为推动城乡一体化发展的新引擎。智慧城市利用物联网、大数据、云计算等先进技术&#xff0c;实现城市治理、公共服务、产业发展等领域的智能化&#xff1b;而智慧乡村则借助现代科技…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...