在前端 Vue-ts 中使用 RabbitMQ

如何在 vue 前端项目中使用 rabbitmq

rabbitmq 服务器配置支持 stomp 协议

进入 rabbitmq 容器，执行以下命令：
rabbitmq-plugins enable rabbitmq_web_stomp

当 Listening ports 的 protocol 列中显示了 stomp 和 http/web-stomp 项的时候，说明 stomp 协议开启成功。

在 vuets 项目中使用 stomp 订阅 rabbitmq 消息

使用 npm 安装 @stomp/stompjs 这个包。

• 连接到 rabbitmq 服务器

import { Client } from '@stomp/stompjs'

const client = new Client({
  brokerURL: 'ws://172.18.64.150:65535/stomp/ws/', // 设置 websocket 地址
  connectHeaders: {
    login: 'admin', // 设置登录用户名
    passcode: 'admin', // 设置登录密码
    host: 'FlyingEye' // 设置需要访问的虚拟主机
  },
  onConnect: () => {
    console.log('is connected...')

    client.subscribe(
      '/queue/test', // 订阅 test 这个队列的消息
      (message) => {
        console.log(`Received: ${message.body}`)
      },
      {
        'x-exchange': 'flyingeye.mixing.process', // 指定连接到交换机
        'x-message-ttl': '3000', // 消息自动过期为3s
        'x-max-length': '10', // 队列最大缓存10条消息
        'x-single-active-consumer':'true', // 仅当前客户端可以进行消费
        'x-expires':'3000', // 3 秒内没有任何消费端，则队列自动删除
        'x-overflow':'drop-head' // 消息满了移除旧的消息
      }
    )
  }
})

stomp 协议

STOMP（Simple Text Oriented Messaging Protocol）协议在消息传递过程中主要使用两种协议级别的目的地（destination）：队列（queue）和主题（topic）

队列（Queue）模式：

队列模式使用/queue/作为前缀来表示目的地。
队列模式中的消费者（consumer）一般使用点对点的方式接收消息。
当一个消息发送到队列中时，它将被传递给一个消费者进行处理。
每个消息只能由一个消费者进行处理，确保消息的顺序性和唯一性。
例如：/queue/my-queue

import { Client } from '@stomp/stompjs'

const client = new Client({
  brokerURL: 'ws://172.18.64.150:65535/stomp/ws/', // 设置 websocket 地址
  connectHeaders: {
    login: 'admin', // 设置登录用户名
    passcode: 'admin', // 设置登录密码
    host: 'FlyingEye' // 设置需要访问的虚拟主机
  },
  onConnect: () => {
    console.log('is connected...')

    client.subscribe(
      '/queue/test', // 订阅 test 这个队列的消息
      (message) => {
        console.log(`Received: ${message.body}`)
      },
      {
        'x-exchange': 'flyingeye.mixing.process', // 指定连接到交换机
        'x-message-ttl': '3000', // 消息自动过期为3s
        'x-max-length': '10', // 队列最大缓存10条消息
        'x-single-active-consumer':'true', // 仅当前客户端可以进行消费
        'x-expires':'3000', // 3 秒内没有任何消费端，则队列自动删除
        'x-overflow':'drop-head' // 消息满了移除旧的消息
      }
    )
  }
})
client.activate()

主题（Topic）模式：

主题模式使用/topic/作为前缀来表示目的地。
主题模式中的消费者（consumer）一般使用发布-订阅的方式接收消息。
当一个消息发送到主题中时，它将被广播给所有订阅该主题的消费者。
每个订阅主题的消费者都可以独立接收到消息，没有先后顺序限制。
例如：/topic/my-topic
通过选择 /queue/ 或 /topic/ 作为目的地前缀，你可以将消息发送到相应的队列或主题，并设置消费者订阅这些目的地以接收消息。

import { Client } from '@stomp/stompjs'

const client = new Client({
  brokerURL: 'ws://172.18.64.150:65535/stomp/ws/',
  connectHeaders: {
    login: 'admin',
    passcode: 'admin',
    host: 'flyingeye.mixing.process'
  },
  onConnect: () => {
    console.log('is connected...')

    client.subscribe(
      '/topic/webclient',
      (message) => {
        console.log(`Received: ${message.body}`)
      },
      {
        'x-exchange': 'flyingeye.mixing.process', // 该设置在 /topic/ 模式下无效
        'x-message-ttl': '3000', // 消息自动过期为3s
        'x-max-length': '10', // 队列最大缓存10条消息
        'x-single-active-consumer':'true', // 仅当前客户端可以进行消费
        'x-expires':'3000', // 3 秒内没有任何消费端，则队列自动删除
        'x-overflow':'drop-head' // 消息满了移除旧的消息
      }
    )
  }
})

client.activate()

这些目的地只是 STOMP 协议中的一种标识方式，实际的消息代理（如 RabbitMQ）会根据这些目的地来决定消息的路由和分发。