VUE typescript 调用stompjs[Rabbit MQ]

news2024/11/27 22:32:29

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; // 订阅 ID
    unsubscribe(): 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 = 0

  stompClient.heartbeat.incoming = 0

  const 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 = undefined

function connectMQ() {
  const socket = new WebSocket(MQTT_SERVICE)

  const stompClient = Stomp.over(socket)

  stompClient.heartbeat.outgoing = 15000

  stompClient.heartbeat.incoming = 0

  const 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.coloradmin.cn/o/1587206.html

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

相关文章

风储微网虚拟惯性控制系统simulink建模与仿真

风储微网虚拟惯性控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 风储微网虚拟惯性控制系统simulink建模与仿真。风储微网虚拟惯性控制系统是一种模仿传统同步发电机惯性特性的控制策略&#xff0c;它通过集成风力发电系统、储能系统和其他分…
阅读更多...
微信小程序自定义关闭按钮在弹窗下面的效果

微信小程序自定义关闭按钮在弹窗下面的效果

效果图: 我之前用vant 的popup的弹窗写&#xff0c;会出现close图标移动到弹窗内容外部不可见。 自定义代码&#xff1a; popup.JS/*** 生命周期函数--监听页面初次渲染完成*/onReady() {//自定义弹窗 动态获取屏幕高度var that this;wx.getSystemInfo({success: (result) &…
阅读更多...
嵌入式操作教程_数字信号处理_音频编解码：3-6 AAC音频解码实验

嵌入式操作教程_数字信号处理_音频编解码：3-6 AAC音频解码实验

一、实验目的 了解AAC音频格式&#xff0c;掌握AAC音频解码的原理&#xff0c;并实现将AAC格式的音频解码为PCM 二、实验原理 音频编解码的主要对象是音乐和语音&#xff0c;音频的编解码格式可分为无压缩的格式、无损压缩格式、有损音乐压缩格式、有损语音压缩格式和合成算…
阅读更多...
NotePad++ 快速生成SQL IN （‘’，‘’）

NotePad++ 快速生成SQL IN （‘’，‘’）

sql In(‘’&#xff0c;‘’)这种形式 第一步&#xff1a;AltC 鼠标放在第一行最左边 第二步 CtrlH $代表行末 第三步 去掉每行换行符 换行可能是"\n" 或者"\r"或者"\r\n" 结果&#xff1a;
阅读更多...
TG-12F使用SDK对接阿里生活物联网平台

TG-12F使用SDK对接阿里生活物联网平台

文章目录 前言一、注意二、准备1. 安装Ubuntu&#xff08;版本20.04 X64&#xff09;程序运行时库。按顺序逐条执行命令&#xff1a;2. 安装Ubuntu&#xff08;版本20.04 X64&#xff09;依赖软件包。按照顺序逐条执行命令&#xff1a;3. 安装Python依赖包。按照顺序逐条执行命…
阅读更多...
电子元器件商城开发用什么技术框架？

电子元器件商城开发用什么技术框架？

随着信息技术的飞速发展&#xff0c;电子元器件商城已成为电子工程师和采购人员获取元器件的重要渠道。电子元器件商城的开发涉及众多技术和开发语言的选择&#xff0c;本文将详细分析电子元器件商城开发中常用的技术和开发语言&#xff0c;以及它们各自的优势。 一、电子元器…
阅读更多...
数据结构--双向链表

数据结构--双向链表

1.双向链表的结构设计 typedef struct DNode { int data; struct DNode* next;//后继指针 struct DNode* prio;//前驱指针 }DNode ,*DList; 2.双向链表的结构示意图: 3.双向链表的实现 //初始化p->prio->next p->next;if (p->next ! NULL)//判断很重要{p->n…
阅读更多...
银行渠道整合平台应用架构

银行渠道整合平台应用架构

渠道整合平台将 功能微服务化&#xff0c;将服务流程标准化。微服务 化的功能能够进行各种组合使用。而标准化的流程可同时作用于所有渠道&#xff0c;保证体验一致。未来在进行流程变更的时候可有效避免各渠道的重复开发。 • 渠道整合平台避免了各个渠道对于同一个业务的差异…
阅读更多...
【论文速读】| CHEMFUZZ: 大语言模型辅助模糊测试用于量子化学软件缺陷检测

【论文速读】| CHEMFUZZ: 大语言模型辅助模糊测试用于量子化学软件缺陷检测

本次分享论文为&#xff1a;CHEMFUZZ: Large Language Models-assisted Fuzzing for Quantum Chemistry Software Bug Detection 基本信息 原文作者&#xff1a;Feng Qiu, Pu Ji, Baojian Hua, Yang Wang 作者单位&#xff1a;中国科学技术大学软件工程学院&#xff0c;美国约…
阅读更多...
软考数据库---1.事务管理

软考数据库---1.事务管理

目录 1.1 事物的基本概念1.2 数据库的并发控制1.2.1 事务调度概念1.2.2 并发操作带来的问题1.2.3 并发控制技术1.2.4 隔离级别&#xff1a; 1.3 数据库的备份和恢复1.3.1 故障种类1.3.2 备份方法1.3.3 日志文件1.3.4 恢复 1.1 事物的基本概念 ●概念&#xff1a;一个操作序列&…
阅读更多...
自然语言处理、大语言模型相关名词整理

自然语言处理、大语言模型相关名词整理

自然语言处理相关名词整理 零样本学习&#xff08;zero-shot learning&#xff09;词嵌入&#xff08;Embedding&#xff09;为什么 Embedding 搜索比基于词频搜索效果好&#xff1f; Word2VecTransformer检索增强生成&#xff08;RAG&#xff09;幻觉采样温度Top-kTop-p奖励模…
阅读更多...
云计算：Linux 部署 OVS 集群（服务端）实现VXLAN

云计算：Linux 部署 OVS 集群（服务端）实现VXLAN

目录 一、实验 1.环境 2.Linux 部署 OVS 集群&#xff08;服务端&#xff09; 3.Linux 部署VXLAN 一、实验 1.环境 (1) 主机 表1 宿主机 主机架构软件IP备注ovs_controller控制端192.168.204.63 1个NAT网卡 &#xff08;204网段&#xff09; ovs_server01服务端 Openv…
阅读更多...
睿尔曼超轻量仿人机械臂之双臂复合机器人手眼标定软件在Arm架构系统上的使用实操

睿尔曼超轻量仿人机械臂之双臂复合机器人手眼标定软件在Arm架构系统上的使用实操

双臂复合升降机器人的手眼标定是属于眼在手外的标定模式&#xff0c;相机在机器人的头部&#xff0c;标定前应固定相机的位置&#xff0c;再打开我们的标定软件程序如下&#xff0c;给足文件权限后&#xff0c;打开主程序&#xff0c;运行后会出现如下界面。 首次连接&#xff…
阅读更多...
深入浅出 -- 系统架构之日均亿级吞吐量的网关架构(DNS轮询解析)

深入浅出 -- 系统架构之日均亿级吞吐量的网关架构(DNS轮询解析)

在前篇关于《Nginx》的文章中曾经提到&#xff1a;单节点的Nginx在经过调优后&#xff0c;可承载5W左右的并发量&#xff0c;同时为确保Nginx的高可用&#xff0c;在文中也结合了Keepalived对其实现了程序宕机重启、主机下线从机顶替等功能。 但就算实现了高可用的Nginx依旧存在…
阅读更多...
解决宝塔的FTP无法使用被动模式

解决宝塔的FTP无法使用被动模式

问题&#xff1a;宝塔安装完ftp管理软件之后&#xff0c;无法使用被动模式连接 解决&#xff1a; 提示&#xff1a; 如果还是不行&#xff0c;那么要看看防火墙和安全组有没有放行被动模式的端口&#xff0c;宝塔安装的pure-ftpd软件的被动模式端口默认是39000至400…
阅读更多...
MySQL-----索引

MySQL-----索引

一 概述 索引(index)是帮助MysQL高效获取数据的数据结构(有序)。在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c; 这些数据结构以某种方式引用&#xff08;指向&#xff09;数据&#xff0c;这样就可以在这些数据结构上实现高级查找算法&…
阅读更多...
Sketch3D：用于草图到3D生成的样式一致性指南

Sketch3D：用于草图到3D生成的样式一致性指南

Sketch3D: Style-Consistent Guidance for Sketch-to-3D Generation Sketch3D&#xff1a;用于草图到3D生成的样式一致性指南 Wangguandong Zheng 重试 错误原因 Southeast UniversityChina 重试 错误原因 wgdzhengseu.edu.cnHaifeng Xia 重试 错误原因 Southeast Universit…
阅读更多...
千视电子携NDI 6前沿技术，亮相北京CCBN展呈现轻量化媒体解决方案

千视电子携NDI 6前沿技术，亮相北京CCBN展呈现轻量化媒体解决方案

千视携NDI 6技术闪耀2024 CCBN展会&#xff0c;呈现轻量化媒体解决方案 2024年4月24日至26日&#xff0c;北京首钢会展中心将举办第三十届中国国际广播电视网络技术展览会&#xff08;CCBN2024&#xff09;。这是中国广播电视行业的一项重要盛会&#xff0c;将有国内外超600家…
阅读更多...
Apache——DBUtils

Apache——DBUtils

韩顺平 零基础30天学会Java 一、基本介绍 1、commons-dbutils是 Apache 组织提供的一个开源JDBC工具类库&#xff0c;它是对JDBC的封装&#xff0c;使用dbutils能极大简化jdbc编码的工作量 二、DbUtils类 1、QueryRunner类&#xff1a;该类封装了SQL的执行&#xff0c;是线程…
阅读更多...
Python处理PDF：在PDF文档中插入页眉和页脚

Python处理PDF：在PDF文档中插入页眉和页脚

在处理篇幅较长、结构复杂的PDF文档时&#xff0c;页眉和页脚的设计与插入就显得尤为重要。它们不仅扮演着美化文档、提升专业度的角色&#xff0c;更承担了导航指引、信息标注的重要功能。 页眉通常用于展示文档的标题或章节名称&#xff0c;有助于读者在翻阅过程中迅速定位所…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023