對ActiveMQ自帶的網(wǎng)頁監(jiān)控一向不是很滿意，借著學(xué)習(xí)VueJS的機會考慮重構(gòu)一下。不過首先要解決的是vueJS如何獲取數(shù)據(jù)的問題。

ActiveMQ為外部提供了很多種broker狀態(tài)獲取方式，我已知的就有4種：

1. 直接訪問頁面，http扒到以后解析
2. ActiveMQ web-console右側(cè)有提供xml，可以訪問http://localhost:8161/admin/xml/queues.jsp來獲取隊列消息，還能修改jsp頁面來讓一個頁面包含更多的信息，獲取到解析就好
3. AMQ的JMX接口，使用java編程訪問JMX接口獲取就行
4. AMQ自帶了jolokia，雖然本質(zhì)上也是jmx，但是提供了http方式的數(shù)據(jù)獲取

既然有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格式的數(shù)據(jù)。前兩天看到了reqwest可以用來獲取http返回，所以我們新建一個broker.vue組件來獲取broker的數(shù)據(jù)：

<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相關(guān)的
            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參數(shù)，而后用broker參數(shù)獲取全量的amq數(shù)據(jù)。
而后整理一下我們的需求，對AMQ的監(jiān)控來說，我們希望輸入一個IP就可以獲得整個集群的信息，因此我們需要從單個broker信息中先提取出集群內(nèi)所有的broker地址。麻煩的是json數(shù)據(jù)中并不想queue和topic數(shù)據(jù)那樣直觀給出所有的network連接。但是我們可以注意到由于集群默認的demandForwardBridge的特性，可以從對AcitveMQ.Advisory.Consumer.>這個topic的訂閱者上獲取到與當前這個IP連接的都有誰，也就是集群內(nèi)所有正常的連接啦。
獲取集群所有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>

寫到這里我梳理了一下這個網(wǎng)站的架構(gòu)，應(yīng)該是這樣的：
1、 主頁面輸入一個IP地址，點擊按鈕后獲取這個IP的broker信息，讀取出所有與其連接的MQ
2、點擊隊列、主題、集群、連接等頁面，可以看到當前這個IP的具體信息
3、點擊匯總頁面，可以看到這個集群的所有信息的匯總

這周在折騰環(huán)境學(xué)習(xí)vue和reqwest上踩了比較多的坑，下周按照這個思路設(shè)計出頁面吧。