对ActiveMQ自带的网页监控一向不是很满意，借着学习VueJS的机会考虑重构一下。不过首先要解决的是vueJS如何获取数据的问题。
ActiveMQ为外部提供了很多种broker状态获取方式，我已知的就有4种：
- 直接访问页面，http扒到以后解析
- ActiveMQ web-console右侧有提供xml，可以访问http://localhost:8161/admin/xml/queues.jsp来获取队列消息，还能修改jsp页面来让一个页面包含更多的信息，获取到解析就好
- AMQ的JMX接口，使用java编程访问JMX接口获取就行
- 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上踩了比较多的坑，下周按照这个思路设计出页面吧。
网友评论