3. ActiveMQ监控数据获取 | 网站搭建学习笔记

对ActiveMQ自带的网页监控一向不是很满意，借着学习VueJS的机会考虑重构一下。不过首先要解决的是vueJS如何获取数据的问题。

ActiveMQ为外部提供了很多种broker状态获取方式，我已知的就有4种：

1. 直接访问页面，http扒到以后解析
2. ActiveMQ web-console右侧有提供xml，可以访问http://localhost:8161/admin/xml/queues.jsp来获取队列消息，还能修改jsp页面来让一个页面包含更多的信息，获取到解析就好
3. AMQ的JMX接口，使用java编程访问JMX接口获取就行
4. AMQ自带了jolokia，虽然本质上也是jmx，但是提供了http方式的数据获取

既然有http的方式，那用nodejs+vue的模式当然是直接用第4种方法啦。先看看这个接口返回的是什么，我在本地搭了个AMQ，访问http://localhost:8161/api/jolokia/read/org.apache.activemq:brokerName=localhost,type=Broker可以获取到

{"timestamp":1515227214,"status":200,
"request":{"mbean":"org.apache.activemq:brokerName=localhost,type=Broker","type":"read"},
"value":{"BrokerId":"ID:HuangZhengdeMacBook-Air.local-58307-1515208245575-0:1",
"TemporaryQueueSubscribers":[],
"DynamicDestinationProducers":[],
"TemporaryQueues":[],
"MemoryPercentUsage":0,
"TemporaryTopicProducers":[],
"MemoryLimit":668309914,
"TotalConnectionsCount":0,
"Queues":[{"objectName":"org.apache.activemq:brokerName=localhost,destinationName=test.,destinationType=Queue,type=Broker"},
{"objectName":"org.apache.activemq:brokerName=localhost,destinationName=test,destinationType=Queue,type=Broker"}],
"StoreLimit":16963110607,
……（篇幅有限就不全打印了，弄换行很累）

可以看到返回的是一个json格式的数据。前两天看到了reqwest可以用来获取http返回，所以我们新建一个broker.vue组件来获取broker的数据：

<template>
  <p>{{ this.info }}</p>
</template>

<script>
    import reqwest from 'reqwest'
    export default {
      name: 'brokers',
      props: {
        broker: {
          default: 'localhost'
        }
      },
      data: function () {
         return {
            info: []
         }
      }
      mounted: function () {
        this.getData()
      },
      methods: {
        var self = this
        getData: function () {
          reqwest({
           // 这里有个坑，MQ搭建的时候BrokerName要指定成与IP相关的
            url: 'http://' + this.broker + ':8161/api/jolokia/read/org.apache.activemq:type=Broker,brokerName=MQ_' + this.broker,
            type: 'json',
            method: 'get',
            success: function (resp) {
              self.info = resp
              console.log(self.info)
            }
          })
        }
      }
    }
</script>

可以看到这个组件的主要作用就是接收上层传来的broker参数，而后用broker参数获取全量的amq数据。
而后整理一下我们的需求，对AMQ的监控来说，我们希望输入一个IP就可以获得整个集群的信息，因此我们需要从单个broker信息中先提取出集群内所有的broker地址。麻烦的是json数据中并不想queue和topic数据那样直观给出所有的network连接。但是我们可以注意到由于集群默认的demandForwardBridge的特性，可以从对AcitveMQ.Advisory.Consumer.>这个topic的订阅者上获取到与当前这个IP连接的都有谁，也就是集群内所有正常的连接啦。
获取集群所有IP的主要部分可以这样写，考虑放到一个新的组件里去。

<ol>
  <li v-for="n in info.value.TopicSubscribers">
    <span>{{ getNetwork(n.objectName) }}</span>
  </li>
</ol>
<script>
export default {
  methods: {
    getNetwork: function (str) {
      return str.split(',')[1].spilt('=')[1].split('_')[2]
    }
  }
}
</script>

写到这里我梳理了一下这个网站的架构，应该是这样的：
1、 主页面输入一个IP地址，点击按钮后获取这个IP的broker信息，读取出所有与其连接的MQ
2、点击队列、主题、集群、连接等页面，可以看到当前这个IP的具体信息
3、点击汇总页面，可以看到这个集群的所有信息的汇总

这周在折腾环境学习vue和reqwest上踩了比较多的坑，下周按照这个思路设计出页面吧。