對ActiveMQ自帶的網(wǎng)頁監(jiān)控一向不是很滿意，借著學(xué)習(xí)VueJS的機會考慮重構(gòu)一下窄刘。不過首先要解決的是vueJS如何獲取數(shù)據(jù)的問題窥妇。
ActiveMQ為外部提供了很多種broker狀態(tài)獲取方式，我已知的就有4種：
- 直接訪問頁面娩践，http扒到以后解析
- ActiveMQ web-console右側(cè)有提供xml活翩，可以訪問http://localhost:8161/admin/xml/queues.jsp來獲取隊列消息烹骨，還能修改jsp頁面來讓一個頁面包含更多的信息，獲取到解析就好
- AMQ的JMX接口材泄，使用java編程訪問JMX接口獲取就行
- AMQ自帶了jolokia沮焕，雖然本質(zhì)上也是jmx，但是提供了http方式的數(shù)據(jù)獲取
既然有http的方式拉宗，那用nodejs+vue的模式當(dāng)然是直接用第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連接。但是我們可以注意到由于集群默認(rèn)的demandForwardBridge的特性换怖，可以從對AcitveMQ.Advisory.Consumer.>這個topic的訂閱者上獲取到與當(dāng)前這個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彻坛、點擊隊列顷啼、主題、集群昌屉、連接等頁面钙蒙，可以看到當(dāng)前這個IP的具體信息
3、點擊匯總頁面间驮，可以看到這個集群的所有信息的匯總
這周在折騰環(huán)境學(xué)習(xí)vue和reqwest上踩了比較多的坑躬厌，下周按照這個思路設(shè)計出頁面吧。
