spring cloud图形化dashboard是如何实现指标的收集展示的

1、dashboard图形化界面入口

http://localhost:10000/hystrix.stream

说明：端口是由配置文件server.port=10000来指定的，可以修改。

打开后可以看到如下的界面

输入需要监控的集群，然后点击Monitor Stream按钮，进行集群监控

这边假设输入

http://localhost:10000/turbine.stream?cluster=default

可以看到下面的界面

注：如果看到的是空白页面，需要访问一下开启了@HystrixCommand注解的rest方法，本文中有两个方法，hello、hellosleep方法。

    @GetMapping("/hello")

    @HystrixCommand(fallbackMethod = "helloFallback")

    public String hello() {

        return "provide hello world";

    }

---

    @GetMapping("/hellosleep")

    @HystrixCommand(fallbackMethod = "helloexFallback")

    public String hellosleep() throws InterruptedException {

        int i = 2000;

        TimeUnit.MILLISECONDS.sleep(i);

        return "provide hellosleep world!";

    }

2、dashboard是如何实现监控数据的获取的。

我们通过浏览器工具打开网络监控，或者使用F12快捷键查看监控的url。

如下：

url:

http://localhost:10000/proxy.stream?origin=http%3A%2F%2Flocalhost%3A10000%2Fturbine.stream%3Fcluster%3Ddefault

我们看到，它是通过proxy.stream来获取数据，有一个origin参数，就是前面我们输入的想要监控的那个url地址，即【http://localhost:10000/turbine.stream?cluster=default】。proxy.stream其实对应的是一个servlet。

查看源码：

HystrixDashboardConfiguration可以看到它有一个内部类ProxyStreamServlet就是用来处理这个url的。

关键源码如下：

这个servlet其实就是通过origin来获取数据，如果我们直接访问origin所对应的地址，可以看到如下的数据，像流一样源源不断的打印出来。

图形化的界面其实就是从这个servlet获取数据，并展示的

3、servlet怎么把流数据返回

        httpget = new HttpGet(proxyUrl);

        HttpClient client = ProxyConnectionManager.httpClient;

        HttpResponse httpResponse = client.execute(httpget);

        int statusCode = httpResponse.getStatusLine().getStatusCode();

        if (statusCode == HttpStatus.SC_OK) {

            is = httpResponse.getEntity().getContent();

            //省略代码...

            OutputStream os = response.getOutputStream();

            int b = -1;

            while ((b = is.read()) != -1) {

                try {

                    os.write(b);

                    if (b == 10 /** flush buffer on line feed */

                            ) {

                        os.flush();

                    }

                }

                catch (Exception ex) {

                    //省略代码...

                }

            }

        }

servlet其实就是通过url去获取响应结果，然后不断的输出到前台页面。

4、前台界面怎么展示不断响应回来的流数据呢

这边主要用到了HTML5的一个对象EventSource，可以获取到这个数据。

注意： EventSource不支持IE浏览器，这边使用谷歌浏览器

我们还是通过浏览器工具，查看图形化界面的使用到js脚本。

如下：

EventSource对象可以对url进行监听，并注册响应函数。这里不进行展开，有兴趣的同学可以详细的阅读里面的脚本。

5、总结

turbine收集的数据是一种json格式的数据，而且像流一样不断输出。所以我们需要借助图形化工具来展示。而图形化工具的数据订阅我们通过上面的分析已经知道，其实他就是通过servlet来访问turbine的链接来获取数据并展现的。