vue使用RabbitMQ

162 阅读2分钟

什么是消息队列

MQ全称为Message Queue 消息队列(MQ)是一种应用程序对应用程序的通信方法。MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中的消息。这样发布者和使用者都不用知道对方的存在。

RabbitMQ 是信息传输的中间者。本质上,从生产者(producers)接收消息,转发这些消息给消费者(consumers)。换句话说,能够根据指定的规则进行消息转发,缓冲,和持久化

消息队列可以简单理解为:把要传输的数据放在队列中。

消息队列的场景和工作流程

场景

有一些业务逻辑是不能立刻完成,会阻塞程序,类似于发送短信、邮件,这些都需要服务器给第三方发起请求,不能立刻得到结果。这就会造成用户操作过程停滞,所以解决办法就是将这些耗时操作,放到队列中去异步执行。

在程序系统中,例如外卖系统,订单系统,库存系统,优先级较高 发红包,发邮件,发短信,app消息推送等任务优先级很低,很适合交给消息队列去处理,以便于程序系统更快的处理其他请求。

工作流程

消息队列一般有三个角色:

队列服务端;

队列生产者;

队列消费者;

消息队列工作流程就如同一个流水线,有产品加工,一个输送带,一个打包产品

输送带就是 不停运转的消息队列服务端;

加工产品的就是 队列生产者;

在传输带结尾打包产品的 就是队列消费者;

一、先安装依赖插件

// 先安装stompjs
 npm install --save stompjs

二、入口index.vue文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import Stomp from "stompjs"
export default {
  name: 'App',
  data() {
    return {
      MQTT_SERVICE: "ws://my_ip:15674/ws", // mqtt服务地址
      MQTT_USERNAME: "myName", // 连接用户名
      MQTT_PASSWORD: "myPassword" //  连接密码
    }
  },
  created() {},
  mounted() {
        this.setRabitMQ()
  },
  methods: {
      // 初始化
      setRabitMQ() {
        this.client = Stomp.client(this.MQTT_SERVICE)
        this.connect()
      },
      onConnected: function (frame) {
        console.log("订阅=============")
        console.log(frame)
          //订阅频道
          this.client.subscribe(
            // 订阅到交换机:
            `/exchange/交换机名字(Exchange:name)/Routing_key`,
            this.responseCallback
            // this.onFailed
          )
      },

      // 失败后的处理
      onFailed: function (frame) {
        console.log("MQ Failed: " + frame)
        // 失败后  等待5秒后重新连接
        setTimeout(() => {
          this.setRabitMQ()
        }, 5000)
      },
      // 回传消息 MQ连接成功后的 数据相应 接收消息处理
      responseCallback: function (frame) {
        // console.log(frame.body);
        console.log("回传消息");
        console.log(frame)
        
        if(frame.body != ''){
          // 获取回传信息
          // 这里可以做代码逻辑处理
        }else{
          
        }
      },

      // 开始连接
      connect: function () {
        const headers = {
          // 账号
          login: this.MQTT_USERNAME,
          // 密码
          passcode: this.MQTT_PASSWORD
        }
        //   登录Rabbit MQ服务
        this.client.connect(headers, this.onConnected, this.onFailed)
      }

  }
}
</script>

注意:比较坑的地方是 this.client.subscribe('/exchange/交换机名字(Exchange:name)/Routing_key',this.responseCallback)

/exchange: 是固定的;

/交换机名字:是指下图:

image.png

/Routing_key:是指下图:

image.png