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; // 订阅 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里

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

kail渗透工具之nmap的使用方法

kail渗透工具之nmap的使用方法

准备工作&#xff1a;开启两台虚拟机和一台Windows主机 kail Linux攻击机&#xff1a;192.168.80.131 red hat靶机&#xff1a;192.168.80.129 Windows主机&#xff1a;192.168.252.42 1、nmap扫描工具的简介 nmap是用来探测计算机网络上的主机和服务的一种安全扫描器。为了绘…
阅读更多...
蓝桥杯嵌入式（G431）备赛笔记——第十一届第二场真题

蓝桥杯嵌入式（G431）备赛笔记——第十一届第二场真题

关键代码&#xff1a;、 user.c: u32 adc_tick 0; // 定义一个无符号32位整型变量 adc_tick&#xff0c;用于记录上次ADC处理的时间戳 u32 r37_value 0; // 定义一个无符号32位整型变量 r37_value&#xff0c;用于存储ADC通道2的采样值 u32 r38_value 0; // 定义一个无符号…
阅读更多...
用Python给PDF文档设置背景色或背景图

用Python给PDF文档设置背景色或背景图

PDF作为一种跨平台、高保真的文件格式被广泛应用&#xff0c;尤其在报告、手册、电子书、合同等场景中&#xff0c;其重要性不言而喻。然而&#xff0c;在满足基本内容展示需求的同时&#xff0c;为了增强视觉效果&#xff0c;提升阅读体验&#xff0c;或者出于品牌标识、企业形…
阅读更多...
IDE Eval Reset —— idea 重置试用期插件安装

IDE Eval Reset —— idea 重置试用期插件安装

idea 重置试用期插件安装 一、在线安装&#xff1a; 1、打开IntelliJ IDEA 2、file—> setting —> plugins 添加三方插件库 点击后&#xff0c;跳出弹框点击号&#xff0c;添加图中的网址 https://plugins.zhile.io3、搜索 IDE Eval Reset &#xff0c;安装插件 4…
阅读更多...
东用科技助力5G+区域教育管理智慧平安校园建设

东用科技助力5G+区域教育管理智慧平安校园建设

一、 方案背景 为深入贯彻党中央、国务院关于加快5G发展、加强教育信息化工作的决策部署&#xff0c;加快推进《5G应用“扬帆”行动计划》实施&#xff0c;促进5G与教育融合创新发展&#xff0c;按照“育人为本、多方协同、问题导向、深度融合”的原则&#xff0c;工业和信息化…
阅读更多...
【算法练习】29：插入排序学习笔记

【算法练习】29：插入排序学习笔记

一、插入排序的算法思想 原理&#xff1a;将一个无序的数据序列逐步转化为有序序列。算法将待排序的数组分为两个部分已排序部分和未排序部分。 时间复杂度&#xff1a;插入排序的时间复杂度在最坏、平均和最好情况下的表现相同&#xff0c;均为 &#xff0c;其中 n 是待排序数…
阅读更多...
PS入门｜如何让模糊的图片变得清晰？

PS入门｜如何让模糊的图片变得清晰？

前言 前段时间的PS入门讲的都是如何抠图、抠图、抠图。小白都快抠出三室一厅了&#xff0c;不知道学习的小伙伴如何了。 如果在学习过程中没有练习的照片&#xff0c;那直接使用每一篇文章的照片即可&#xff0c;学PS最忌讳的就是光看不练&#xff0c;眼睛会了&#xff0c;手…
阅读更多...
基于WEB的水库水情自动测报系统的研究与设计(论文+源码)_kaic

基于WEB的水库水情自动测报系统的研究与设计(论文+源码)_kaic

摘要 水情信息是水利管理最重要的基础信息&#xff0c;是水文预报、水资源管理、防汛抗旱决策的主要依据。水情自动测报系统是一个自动采集、传输、处理水情信息的实时测报系统&#xff0c;可对水库流域内的水情、水文和气象数据&#xff0c;如雨量、流量、水位等&#xff0c;实…
阅读更多...
利用AbortController，取消正在发送的请求

利用AbortController，取消正在发送的请求

参考文章&#xff1a;https://blog.csdn.net/qq_45560350/article/details/130588101 解决问题&#xff1a;再图层中点击仓库的时候&#xff0c;点击后又取消掉&#xff0c;我们希望这个请求可以被取消掉&#xff0c;我们口可以利用AbortController控制器对象 实操&#xff1a…
阅读更多...
linux 以jar包的方式部署后端程序

linux 以jar包的方式部署后端程序

打包&#xff0c;以及linux上的位置 然后执行下面两个命令&#xff0c;一个多服务启动&#xff0c;一个是单服务启动 多服务启动命令 #!/bin/bash# 设置JAR包的目录 JAR_DIR"/bpm/app_jar"# 设置JAR包的名称&#xff0c;用空格分隔 # JAR_NAMES"platform-gate…
阅读更多...
Paper Reading: MixTeacher：半监督目标检测中利用混合尺度教师挖掘有前景的标签

Paper Reading: MixTeacher：半监督目标检测中利用混合尺度教师挖掘有前景的标签

目录 简介目标/动机工作重点方法训练 实验总结 简介 题目&#xff1a;《MixTeacher: Mining Promising Labels with Mixed Scale Teacher for Semi-Supervised Object Detection》&#xff0c; CVPR 2023 日期&#xff1a;2023.3.16 单位&#xff1a;腾讯&#xff0c;上海交…
阅读更多...
Ceph学习 -4.Ceph组件介绍

Ceph学习 -4.Ceph组件介绍

文章目录 1.Ceph组件介绍1.1 组件介绍1.2 流程解读1.2.1 综合效果图1.2.2 数据存储逻辑 1.3 小结 1.Ceph组件介绍 学习目标&#xff1a;这一节&#xff0c;我们从组件介绍、流程解读、小结三个方面来学习。 1.1 组件介绍 无论是想向云平台提供 Ceph 对象存储和 Ceph 块设备服务…
阅读更多...
Go语言mac环境搭建详解

Go语言mac环境搭建详解

Go语言mac环境搭建详解见视频&#xff0c;视频下方也有讲解具体的操作步骤。 Golang Mac电脑环境搭建、开发工具Vscode配置 Go语言mac环境搭建步骤如下&#xff1a; 1、下载安装Golang Go官网下载地址&#xff1a;https://golang.org/dl/ Go官方镜像站&#xff08;推荐&…
阅读更多...
大数据架构的演变与多种大数据架构类型说明——解读大数据架构（一）

大数据架构的演变与多种大数据架构类型说明——解读大数据架构（一）

文章目录 前言数据架构的演变关系型数仓数据湖现代数仓数据网络数据湖仓数据网格 前言 在搭建和使用大数据组件前&#xff0c;预先投入时间设计和构建正确的数据架构绝对至关重要。如果在前期没有设计正确的数据架构就开始实施方案&#xff0c;在后期想更改架构设计是十分困难…
阅读更多...
uniapp-IOS自定义启动页面模版的修改

uniapp-IOS自定义启动页面模版的修改

启动界面设置 在打包IOS包时&#xff0c;需要我们选择app的启动页面配置 在HBuilderX内&#xff0c;有三个样式的选择 第一个&#xff0c;是通用界面&#xff0c;就是一个启动页是一个圆形的应用图标加上应用名称 第二个&#xff0c;自定义的启动图&#xff0c;目前无法通过App…
阅读更多...
企业级网络安全：入侵防御实时阻止，守护您的业务安全

企业级网络安全：入侵防御实时阻止，守护您的业务安全

随着互联网技术的快速发展&#xff0c;企业级网络安全问题日益凸显。在这个数字化时代&#xff0c;企业的业务安全不仅关系到企业的形象和声誉&#xff0c;还直接影响到企业的生存和发展。因此&#xff0c;加强企业级网络安全&#xff0c;预防和抵御各种网络攻击已成为企业的重…
阅读更多...
lua学习笔记17（面相对象之继承）

lua学习笔记17（面相对象之继承）

print("*****************************面相对象继承*******************************") object{} object.id1 function object:new()local obj{}self.__indexself setmetatable(obj,self)return obj end function object:text()--面相对象的类其实就是基于table来实现…
阅读更多...
备考ICA----Istio实验20---跨网络Primary-Remote主从架构部署

备考ICA----Istio实验20---跨网络Primary-Remote主从架构部署

备考ICA----Istio实验20—跨网络Primary-Remote主从架构部署 按照本实验在 cluster1&#xff08;主集群&#xff09;上安装 Istio 控制平面&#xff0c;并将 cluster2&#xff08;远程集群&#xff09;配置为使用 cluster1 中的控制平面。群集 cluster1 在 network1 网络上&am…
阅读更多...
基于Springboot的笔记记录分享网站（有报告）。Javaee项目，springboot项目。

基于Springboot的笔记记录分享网站（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的笔记记录分享网站&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…
阅读更多...
提升法律文书起草效率：AlphaGPT 助力律师快速生成诉讼和仲裁文件

提升法律文书起草效率：AlphaGPT 助力律师快速生成诉讼和仲裁文件

法律文书起草对于法律专业人士而言是一项基础而关键的任务。无论是民事、刑事还是行政诉讼&#xff0c;以及仲裁案件&#xff0c;精确的法律文书撰写对于案件的成功至关重要。然而&#xff0c;这一过程往往既耗时又复杂&#xff0c;尤其是在处理复杂的案情和面对当事人难以理解…
阅读更多...
最新文章

Copyright @ 2022~2023