Vue连接Docker环境下RabbitMQ进行消息读取

viego1999

已于 2022-09-18 20:05:05 修改

阅读量1.5k

点赞数 2

文章标签： rabbitmq vue.js docker

于 2022-08-26 15:56:26 首次发布

本文链接：https://blog.csdn.net/wuxynb/article/details/126544435

版权

首先，docker拉取rabbitmq镜像，这里拉取带有management的镜像，自带管理界面；
```
docker pull rabbitmq:3.6.10-management
```
创建rabbitmq容器，名字叫mq（这里需要注意，因为前端Vue使用Websocket来与建立连接，而Websocket需要使用到端口15674，所以，需要多加一个15674端口的映射）；
```
docker run --name mq -p 15672:15672  -p  5672:5672 -p 15674:15674 -d  \
-e RABBITMQ_DEFAULT_USER=admin \
-e RABBITMQ_DEFAULT_PASS=admin \
rabbitmq:3.6.10-management
```
使用 docker ps 查看运行的容器：
设置容器自启动命令 docker update --restart=always 容器名称，如下图：
使用如下命令进入到mq服务器中（5e6f13f9e8e2：为mq容器id）：
```
docker exec -it 5e6f13f9e8e2 /bin/bash
```

然后执行如下命令安装需要的 stomp 插件:

rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_stomp rabbitmq_web_stomp_examples

执行如下命令查看插件列表，出现下面三个即可
```
 rabbitmq-plugins list
```
然后使用命令查看 5672、15672、15674三个端口是否启动成功：
```
netstat -nlpt
```
之后在浏览器输入 <你的Linux地址>:15672 进入rabbitmq管理界面进行登录，我们在一开始指定的用户是 admin，密码也是admin，输入之后登录进入mq管理界面查看概述：
前端先安装stompjs库
```
npm install stompjs
```

这里补充一下vue中的几种订阅topic的写法（交换机和队列）

 /queue/queuename：使用默认转发器订阅/发布消息，默认由stomp自动创建一个持久化队列 

 /amq/queue/queuename：与/queue/queuename的区别在于队列不由stomp自动进行创建，队列不存在失败 

 /topic/routing_key：通过amq.topic转发器订阅/发布消息，订阅时默认创建一个临时队列，通过routing_key与topic进行绑定 

 /temp-queue/xxx：创建一个临时队列(只能在headers中的属性reply-to中使用)，可用于发送消息后通过临时队列接收回复消息，接收通过client.onreceive 

 /exchange/exchangename/[routing_key]：通过转发器订阅/发布消息，转发器需要手动创建 

 client.subscribe(destination,callback,headers) ：订阅消息 

 client.send(destination,headers,body)：发布消息 

 client.unsubscribe(id)：取消订阅，id为订阅时返回的编号 

 client.onreceive：默认接收回调从临时队列获取消息

编写前端Vue的代码进行连接通信，代码如下：

import Stomp from "stompjs";
// import SockJS from 'sockjs-client'
export const IP = "x.108.x.33" // 自己的mq服务ip
export const PORT = "15674"
export const MQTT_SERVICE = 'ws://' + IP + ':' + PORT + '/ws' // mqtt服务地址
export const MQTT_USERNAME = 'admin' // 连接用户名, todo: read from database
export const MQTT_PASSWORD = 'admin' //  连接密码, todo: read from database
export const VIRTUAL_HOST = '/' //  侦听器端口
export default {
  data() {
    return {
      client: ''
    };
  },
  created() {
    this.connect();
  },
  methods: {
    // 消息队列获取
    connect() {
      // let ws = new SockJS("http://xx.108.xx.33:15674/stomp");
      let ws = new WebSocket(MQTT_SERVICE);
      this.client = Stomp.over(ws);
      //初始化连接
      const headers = {
        login: MQTT_USERNAME,
        passcode: MQTT_PASSWORD
      };
      //进行连接
      this.client.connect(headers.login, headers.passcode, this.onConnected, this.onFailed, VIRTUAL_HOST);
    },
    onConnected: function () {
      //订阅频道
      const topic = '/queue/simple_queue';
      this.client.subscribe(topic, this.responseCallback, this.onFailed);
    },
    onFailed: function (frame) {
      console.log("MQ Failed: " + frame);
      // this.$message.error('连接失败')
    },
    // 回传消息
    responseCallback: function (frame) {
      console.log("MQ msg=>" + frame.body);
      //接收消息处理
    },
    // 断开相应的连接
    close: function () {
      this.client.disconnect(function () {
        console.log("已退出账号");
      })
    }
  }
}