VUE typescript 调用stompjs[Rabbit MQ]

npm拉下来最新的2.3.9版本，发现一些原来Js代码已经不能用了。顺便解读了下最新定义的内容

// <reference types="node" />export const VERSIONS: {V1_0: string;V1_1: string;V1_2: string;supportedVersions: () => string[];
};export class Client {connected: boolean;counter: number;heartbeat: {incoming: number;outgoing: number;};maxWebSocketFrameSize: number;subscriptions: {};ws: WebSocket;debug(...args: string[]): any;connect(headers: { login: string; passcode: string; host?: string | undefined }, // 头部connectCallback: (frame?: Frame) => any, // 返回消息的监听器，从服务器收消息errorCallback?: (error: Frame | string) => any, // 错误信息的监听器): any;connect(headers: {}, connectCallback: (frame?: Frame) => any, errorCallback?: (error: Frame | string) => any): any;connect(login: string,passcode: string,connectCallback: (frame?: Frame) => any,errorCallback?: (error: Frame | string) => any,host?: string,): any;disconnect(disconnectCallback: () => any, headers?: {}): any; // 拆连接send(destination: string, headers?: {}, body?: string): any;subscribe(destination: string, callback?: (message: Message) => any, headers?: {}): Subscription;unsubscribe(id: string): void;begin(transaction: string): any;commit(transaction: string): any;abort(transaction: string): any;ack(messageID: string, subscription: string, headers?: {}): any;nack(messageID: string, subscription: string, headers?: {}): any;
}export interface Subscription {id: string;unsubscribe(): void;
}export interface Message extends Frame {ack(headers?: {}): any;nack(headers?: {}): any;
}export class Frame {command: string;headers: {};body: string;constructor(command: string, headers?: {}, body?: string);toString(): string;static sizeOfUTF8(s: string): number;static unmarshall(datas: any): any;static marshall(command: string, headers?: {}, body?: string): any;
}export function client(url: string, protocols?: string | string[]): Client;
export function over(ws: WebSocket): Client;
export function overTCP(host: string, port: number): Client;
export function overWS(url: string): Client;
export function setInterval(interval: number, f: (...args: any[]) => void): NodeJS.Timer;
export function clearInterval(id: NodeJS.Timer): void;ChatGPT
typescript
Copy code
/// <reference types="node" />// 定义了支持的 STOMP 协议版本
export const VERSIONS: {V1_0: string;V1_1: string;V1_2: string;supportedVersions: () => string[];
};// 定义了 STOMP 客户端类
export class Client {connected: boolean; // 标识客户端是否连接counter: number; // 消息计数器heartbeat: { // 心跳配置incoming: number; // 接收心跳频率outgoing: number; // 发送心跳频率};maxWebSocketFrameSize: number; // WebSocket 最大消息帧大小subscriptions: {}; // 订阅列表ws: WebSocket; // WebSocket 连接// 调试日志函数debug(...args: string[]): any;// 连接到 STOMP 服务器的方法，支持多种重载形式connect(headers: { login: string; passcode: string; host?: string | undefined }, // 连接头信息connectCallback: (frame?: Frame) => any, // 连接成功的回调函数errorCallback?: (error: Frame | string) => any, // 连接错误的回调函数): any;connect(headers: {}, connectCallback: (frame?: Frame) => any, errorCallback?: (error: Frame | string) => any): any;connect(login: string,passcode: string,connectCallback: (frame?: Frame) => any,errorCallback?: (error: Frame | string) => any,host?: string,): any;// 断开与 STOMP 服务器的连接disconnect(disconnectCallback: () => any, headers?: {}): any;// 发送消息到指定目的地send(destination: string, headers?: {}, body?: string): any;// 订阅指定目的地的消息subscribe(destination: string, callback?: (message: Message) => any, headers?: {}): Subscription;// 取消订阅unsubscribe(id: string): void;// 开启事务begin(transaction: string): any;// 提交事务commit(transaction: string): any;// 回滚事务abort(transaction: string): any;// 手动确认消息ack(messageID: string, subscription: string, headers?: {}): any;// 手动否认消息nack(messageID: string, subscription: string, headers?: {}): any;
}// 订阅对象接口
export interface Subscription {id: string; // 订阅 IDunsubscribe(): void; // 取消订阅方法
}// 消息对象接口，扩展自 Frame
export interface Message extends Frame {ack(headers?: {}): any; // 手动确认消息方法nack(headers?: {}): any; // 手动否认消息方法
}// STOMP 帧对象类
export class Frame {command: string; // 帧命令headers: {}; // 帧头部body: string; // 帧主体constructor(command: string, headers?: {}, body?: string); // 构造函数// 将帧对象转换为字符串toString(): string;// 计算 UTF-8 编码字符串的大小static sizeOfUTF8(s: string): number;// 反序列化 STOMP 帧static unmarshall(datas: any): any;// 序列化 STOMP 帧static marshall(command: string, headers?: {}, body?: string): any;
}// 创建 STOMP 客户端的辅助函数
export function client(url: string, protocols?: string | string[]): Client;// 使用现有的 WebSocket 连接创建 STOMP 客户端的辅助函数
export function over(ws: WebSocket): Client;// 使用 TCP 连接创建 STOMP 客户端的辅助函数
export function overTCP(host: string, port: number): Client;// 使用 WebSocket 连接地址创建 STOMP 客户端的辅助函数
export function overWS(url: string): Client;// 发送客户端心跳
export function setInterval(interval: number, f: (...args: any[]) => void): NodeJS.Timer;// 取消发送客户端心跳
export function clearInterval(id: NodeJS.Timer): void;

然后写一段简短的代码：

<script lang="ts" setup>
import { ref, inject, onMounted, onBeforeUnmount, defineProps, watch } from 'vue'
import Stomp from 'stompjs'const MQTT_SERVICE = 'ws://localhost:15674/ws' // mq服务地址const MQTT_USERNAME = 'user' // mq连接用户名const MQTT_PASSWORD = '123456' // mq连接密码function connectMQ() {const socket = new WebSocket(MQTT_SERVICE)const stompClient = Stomp.over(socket)stompClient.heartbeat.outgoing = 0stompClient.heartbeat.incoming = 0const onConnected = () => {console.log('登录成功！')stompClient.subscribe('a11022a6-ad17-459e-8b23-1ca6599af4f9', onMessageReceived) // 订阅需要的队列}const onMessageReceived = (message: { body: any }) => {console.log('返回数据:', message.body)}const onError = (error: any) => {console.error('RabbitMQ连接失败,错误原因:', error)console.error('5秒后重新连接......')window.setTimeout(() => {connectMQ()}, 5000)}stompClient.connect(MQTT_USERNAME, MQTT_PASSWORD, onConnected, onError, '/')
}onMounted(() => {connectMQ()
})
</script>

然后去rabbitmq管理器给队列发个点对点消息：


试了下，能收到消息


但是出现一个问题，连接质量似乎不怎么好啊，老是掉线：

dashboard.vue:33 RabbitMQ连接失败,错误原因: Whoops! Lost connection to ws://localhost:15674/ws

看来连接质量不怎么好啊，加上个心跳，每15s跳一次：
前面代码关闭了下推，我们加上个上报看看，默认是10s一次，前面都设置为0了：
By default, stomp.js defines a heartbeat of 10000,10000 (to send and receive heartbeats every 10 seconds).

<script lang="ts" setup>
import { ref, inject, onMounted, onUnmounted, defineProps, watch } from 'vue'
import Stomp from 'stompjs'const MQTT_SERVICE = 'ws://localhost:15674/ws' // mq服务地址const MQTT_USERNAME = 'user' // mq连接用户名const MQTT_PASSWORD = '123456' // mq连接密码let heartbeat: NodeJS.Timer | undefined = undefinedfunction connectMQ() {const socket = new WebSocket(MQTT_SERVICE)const stompClient = Stomp.over(socket)stompClient.heartbeat.outgoing = 15000stompClient.heartbeat.incoming = 0const onConnected = () => {console.log('登录成功！')stompClient.subscribe('a11022a6-ad17-459e-8b23-1ca6599af4f9', onMessageReceived)}const onMessageReceived = (message: { body: any }) => {console.log('返回数据:', message.body)}const onError = (error: any) => {console.error('RabbitMQ连接失败,错误原因:', error)console.error('5秒后重新连接......')window.setTimeout(() => {connectMQ()}, 5000)}stompClient.connect(MQTT_USERNAME, MQTT_PASSWORD, onConnected, onError, '/')heartbeat = Stomp.setInterval(15000, () => {console.log('心跳呀')})
}onMounted(() => {connectMQ()
})onUnmounted(() => {if (heartbeat) {Stomp.clearInterval(heartbeat)}
})
</script>

这下稳定多了：

正式代码可以考虑把接收的消息数据和方法都放到vuex的store里

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

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

相关文章

airtest-ios真机搭建实践

airtest-ios真机搭建实践

首先阅读4 ios connection - Airtest Project Docs 在Windows环境下搭建Airtest对iOS真机进行自动化测试的过程相对复杂&#xff0c;因为iOS的自动化测试通常需要依赖Mac OS系统&#xff0c;但理论上借助一些工具和服务&#xff0c;Windows用户也可以间接完成部分工作。下面是…
阅读更多...
前端对接fastGPT流式数据+打字机效果

前端对接fastGPT流式数据+打字机效果

首先在对接api时 参数要设置stream: true, const data {chatId: abc,stream: true,//这里true返回流式数据detail: false,variables: {uid: sfdsdf,name: zhaoyunyao,},messages: [{ content: text, role: user }]}; 不要用axios发请求 不然处理不了流式数据 我这里使用fetch …
阅读更多...
PairAug:增强图像-文本对对放射学有什么用?

PairAug:增强图像-文本对对放射学有什么用?

论文链接 代码链接GitHub - YtongXie/PairAug: [CVPR2024] PairAug: What Can Augmented Image-Text Pairs Do for Radiology? 发表于CVPR2024 机构 1) 澳大利亚机器学习研究所(AIML)&#xff0c;澳大利亚阿德莱德大学 2) 西北工业大学计算机科学与工程学院 3) 西北工业…
阅读更多...
【简明图文教程】Node.js的下载、安装、环境配置及测试

【简明图文教程】Node.js的下载、安装、环境配置及测试

文章目录 前言下载Node.js安装Node.js配置Node.js配置环境变量测试后言 前言 本教程适用于小白第一次从零开始进行Node.js的下载、安装、环境配置及测试。 如果你之前已经安装过了Node.js或删除掉了Node.js想重新安装&#xff0c;需要先参考以下博客进行处理后&#xff0c;再根…
阅读更多...
渗透测试实战——第一站

渗透测试实战——第一站

仅供交流学习使用&#xff0c;请勿用于非法用途 前言&#xff1a;刚学了sql注入&#xff0c;只听理论总感觉没啥用&#xff0c;今天花了一半个多小时&#xff0c;去尝试寻找有漏洞的网站&#xff0c;最终找到了一个&#xff1b;实践是检验真理的唯一标准。 我是通过黑客常用语法…
阅读更多...
牛客 NC36 在两个长度相等的排序数组中找到上中位数【中等 模拟 Java,Go,PHP】

牛客 NC36 在两个长度相等的排序数组中找到上中位数【中等 模拟 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/6fbe70f3a51d44fa9395cfc49694404f 思路 直接模拟2个数组有顺序放到一个数组中&#xff0c;然后返回中间的数参考答案java import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 pu…
阅读更多...
深入剖析UDP反射放大攻击原理及其有效防护策略

深入剖析UDP反射放大攻击原理及其有效防护策略

引言 随着互联网的飞速发展和业务复杂性的提升&#xff0c;网络安全问题日益凸显&#xff0c;其中分布式拒绝服务&#xff08;DDoS&#xff09;攻击成为危害最为严重的一类网络威胁之一。UDP反射放大攻击作为一种高效的DDoS手段&#xff0c;因其攻击成本低廉、威力巨大&#x…
阅读更多...
IDEA中无法保存设置 Cannot Save Settings

IDEA中无法保存设置 Cannot Save Settings

确定原因: 在IDEA中父工程不应该存在有子工程的相关东西 首先,这是我的DCYJ项目(观察右侧的Content Root) 其次,这是我的EAPOFode项目(观察右侧的Content Root爆红处) 最后我将DCYJ项目右侧的Content Root全部删掉
阅读更多...
关于部署ELK和EFLKD的相关知识

关于部署ELK和EFLKD的相关知识

文章目录 一、ELK日志分析系统1、ELK简介1.2 ElasticSearch1.3 Logstash1.4 Kibana&#xff08;展示数据可视化界面&#xff09;1.5 Filebeat 2、使用ELK的原因3、完整日志系统的基本特征4、ELK的工作原理 二、部署ELK日志分析系统1、服务器配置2、关闭防火墙3、ELK ElasticSea…
阅读更多...
ASUS华硕ROG幻16Air笔记本电脑GU605M原装出厂Win11系统工厂包下载，带有ASUSRecovery一键重置还原

ASUS华硕ROG幻16Air笔记本电脑GU605M原装出厂Win11系统工厂包下载，带有ASUSRecovery一键重置还原

适用型号&#xff1a;GU605MI、GU605MY、GU605MZ、GU605MV、GU605MU 链接&#xff1a;https://pan.baidu.com/s/1YBmZZbTKpIu883jYCS9KfA?pwd9jd4 提取码&#xff1a;9jd4 华硕原厂Windows11系统带有ASUS RECOVERY恢复功能、自带所有驱动、出厂主题壁纸、系统属性联机支持…
阅读更多...
Java后端搭建流程

Java后端搭建流程

目录 一、后端开发准备工作 1.下载 2.安装jdk &#xff0c;配置JAVA-HOME path 3.启动Tomcat 4.访问ip和端口 二、创建web项目 1.新建一个项目 2.发布web应用到服务器 &#xff08;1&#xff09;对LoginServlet继承HttpServlet &#xff08;2&#xff09;重写父类方法…
阅读更多...
如何让视频流媒体平台免受网络攻击

如何让视频流媒体平台免受网络攻击

在各国&#xff0c;流媒体服务已越来越受到大众的欢迎。有统计表明&#xff0c;目前视频流已占网络整体流量的80%以上。不过如您所见&#xff0c;近年来&#xff0c;数字威胁的不断增加&#xff0c;也让网络攻击逐年递增。单个视频用户受到的危险&#xff0c;往往会危及到整个服…
阅读更多...
Vue 项目build打包发布到giteepages ,首页正常显示，其他路由页面报错404的解决方法

Vue 项目build打包发布到giteepages ,首页正常显示，其他路由页面报错404的解决方法

直接上解决方法&#xff1a; 打包之后dist上传之后&#xff0c;还要新创一个.spa文件&#xff0c;注意&#xff01;是 .spa 有个. 点&#xff0c;如下图 一般这样就可以开始部署了&#xff0c;然后开启giteepages服务。如果出现了首页正常显示&#xff0c;其他页面显示…
阅读更多...
全新华为MateBook X Pro发布，将Ultra9放入980g超轻薄机身

全新华为MateBook X Pro发布，将Ultra9放入980g超轻薄机身

2024年4月11日&#xff0c;在华为鸿蒙生态春季沟通会上全新的华为MateBook X Pro正式发布。该机以美学设计、创新科技以及智慧体验&#xff0c;追求重新定义Pro、重新定义旗舰&#xff0c;将颠覆消费者对传统轻薄本的认知。 华为MateBook X Pro追求极致轻薄与强大性能的完美结合…
阅读更多...
Java安全管理器-SecurityManager

Java安全管理器-SecurityManager

定义&#xff1a; SecurityManager是Java中的一个类&#xff0c;用于实现安全管理功能。它允许应用程序在运行时对安全策略进行动态管理&#xff0c;并控制哪些操作可以执行&#xff0c;哪些应该被拒绝。主要功能包括&#xff1a; 安全策略管理&#xff1a;SecurityManager允许…
阅读更多...
D-LinkNAS 远程命令执行漏洞（CVE-2024-3273）RCE漏

D-LinkNAS 远程命令执行漏洞（CVE-2024-3273）RCE漏

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 D-LinkNAS是由D-Link公司制造的网络附加存储设备。…
阅读更多...
SOLIDOWRKS怎么将中间格式的模具装配体转化为装配体格式

SOLIDOWRKS怎么将中间格式的模具装配体转化为装配体格式

模具是工业生产中用于制作成型物品的工具&#xff0c;它由各种零件构成&#xff0c;可以通过改变所成型材料的物理状态来实现物品外形的加工。如果工程师已经有其他格式的模具装配体&#xff0c;但是又想将其他格式的模具装配体导入solidworks里面&#xff0c;并且将一个个实体…
阅读更多...
数字人项目 ER-NeRF 的使用和部署详细教程

数字人项目 ER-NeRF 的使用和部署详细教程

文章目录 1. ER-NeRF简介2. ER-NeRF部署3. 训练自己的数字人4. 生成数字人视频5. 其他数字人模型比较常见错误 1. ER-NeRF简介 ER-NeRF&#xff08;官方链接&#xff09;是一个Talking Portrait Synthesis&#xff08;对嘴型&#xff09;项目。即&#xff1a;给一段某人说话的…
阅读更多...
Linux网络基础2（下）

Linux网络基础2（下）

传输层 再谈端口号端口号的划分netstatpidof UDP协议 UDP的特点UDP缓冲区UDP使用注意事项UDP报头的理解基于UDP的应用层协议 TCP协议 4位首部长度16位窗口大小确认应答机制32位序号和32位确认序号6个标记位超时重传机制连接管理机制流量控制快重传机制再谈序号延迟应答面相字节…
阅读更多...
知识图谱与人工智能：携手共进

知识图谱与人工智能：携手共进

知识图谱与人工智能&#xff1a;携手共进 一、引言&#xff1a;知识图谱与人工智能的融合 在这个数据驱动的时代&#xff0c;知识图谱与人工智能&#xff08;AI&#xff09;之间的融合不仅是技术发展的必然趋势&#xff0c;也是推动各行各业创新的关键。知识图谱&#xff0c;作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023