对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的数据：
{{ this.info }}
可以看到这个组件的主要作用就是接收上层传来的broker参数，而后用broker参数获取全量的amq数据。
而后整理一下我们的需求，对AMQ的监控来说，我们希望输入一个IP就可以获得整个集群的信息，因此我们需要从单个broker信息中先提取出集群内所有的broker地址。麻烦的是json数据中并不想queue和topic数据那样直观给出所有的network连接。但是我们可以注意到由于集群默认的demandForwardBridge的特性，可以从对AcitveMQ.Advisory.Consumer.>这个topic的订阅者上获取到与当前这个IP连接的都有谁，也就是集群内所有正常的连接啦。
获取集群所有IP的主要部分可以这样写，考虑放到一个新的组件里去。
-
{{ getNetwork(n.objectName) }}
写到这里我梳理了一下这个网站的架构，应该是这样的：
1、 主页面输入一个IP地址，点击按钮后获取这个IP的broker信息，读取出所有与其连接的MQ
2、点击队列、主题、集群、连接等页面，可以看到当前这个IP的具体信息
3、点击汇总页面，可以看到这个集群的所有信息的汇总
这周在折腾环境学习vue和reqwest上踩了比较多的坑，下周按照这个思路设计出页面吧。