使用Apache API监控Uber的实时数据，第3篇：使用Vert.x的实时仪表板

这是一个系列文章中的第3篇，该系列由4篇组成。请务必先读第1篇和第2篇！

根据Gartner的统计，到2020年，智能城市将使用约13.9亿辆联网汽车，物联网（IoT）传感器和设备。通过对城市内的位置和行为模式的分析将优化交通、规划更好的决策和推送更智能的广告。目前大数据取得优势的十大领域之一就是改善城市。例如，分析汽车的GPS数据可以使城市根据实时交通信息优化交通流量。电信公司正在使用手机位置数据，识别和预测位置的活动趋势和大型城市人口模式。基于地理定位数据的机器学习应用正被用于电信、旅行、市场营销和制造业，用以识别模式和趋势，例如用于推荐服务，异常检测和欺诈。

这是一系列博客中的第三篇。本系列讨论一个端到端应用程序的架构，该程序将流数据与机器学习（ML）相结合，对优步（Uber）汽车不同时间不同地点的聚集情况进行实时分析和可视化，以预测和可视化优步汽车最受欢迎的位置。

处理大量的实时数据对应用程序体系结构提出了很高的要求。为了增加伸缩性，Uber和其他公司已经从单体应用架构（monolithic）转为事件驱动微服务架构（event-driven microservices architecture）。在本文中，我们将使用Vert.x（一个用于构建反应性事件驱动的微服务的工具包）来实现实时Web应用程序。

本系列的第一篇讨论了如何使用Apache Spark K-means算法创建机器学习模型，该模型按位置对优步数据进行聚类。

聚类算法通过分析输入示例之间的相似性和发现在数据集合中的分类信息将输入样例分成不同类别。聚类算法可用于：

客户细分。
趋势预测和异常检测。
分组搜索结果或查找类似文章。

K均值（K-means）算法将观测点分成K个簇（cluster），其中每个观测点属于观测点距离簇均值中心最近的簇。下面，从优步数据分析（K = 10）返回的模型聚类中心的输出显示在谷歌（Google）地图上：

在第二篇文章中讨论了使用保存的K均值模型与流数据进行优步车辆何时在何地的实时分析。

而本文，即第三篇文章讨论了如何构建一个实时的仪表板，用以在谷歌地图上显示簇数据。下图描述了数据流转过程：

使用Kafka的API将优步行程数据发布到MapR Streams主题（topic）。
订阅了上一步主题的Spark流应用，将簇的位置信息加入收到的事件中，并把结果以JSON格式发布到另一个主题。
订阅第二个主题的Vert.x 网络应用程序在热图中显示优步行程簇。

Vert.x工具包和网络应用程序体系结构

Vert.x工具包是事件驱动的，使用事件总线（event bus）将事件分发到工作处理程序服务（work handler service），工作处理程序服务也称垂直服务（verticle）。Vert.x采用同Node.js类似的基于单线程事件循环的非阻塞式模型处理工作。Vert.x的 SockJS事件总线桥（SockJS event bus bridge）允许网络应用程序使用Websockets与Vert.x事件总线进行双向通信，这使得可以使用服务器推送功能来构建实时Web应用程序。

下面展示优步仪表板应用程序体系结构更多细节：

Vert.x Kafka客户端接收来自MapR Streams主题的消息，并在Vert.x事件总线上发布消息。
JavaScript浏览器客户端使用SockJS订阅Vert.x事件总线，并在谷歌热图上显示优步行程地点。

Vert.x仪表板服务

在下面的Vert.x服务代码片段中，我们：

创建一个 vertx 实例，该实例提供对Vert.x核心API的访问。
创建一个 Router 对象，该对象将HTTP请求URL路由到处理程序。
创建一个 BridgeOptions 对象，并指定具有地址“dashboard”的消息通过事件总线桥。
将匹配 /eventbus/* 的路由路径与事件总线桥SockJSHandler相关联，这将服务器端Vert.x事件总线扩展到客户端的JavaScript。
创建一个 HttpServer 对象，一个HTTP服务器实现。
使服务器侦听传入请求的端口。

在下面的代码片段中，从MapR Streams 优步主题中获得消息，并发布到地址为“dashboard”的Vert.x事件总线。事物总线将消息传递给所有订阅此地址的处理程序。

Vert.x仪表板 HTML5 JavaScript客户端

客户端使用谷歌地图的热图层来直观地描绘曼哈顿上的优步行程中不同簇位置的强度。热图将较高强度的区域显示为红色，较低强度的区域显示为绿色。仪表板应用程序使用谷歌地图标记来标记簇中心。

为了学习下面的例子全部写在一个简单的index.html文件。下面为调用Vert.x，SockJS，jQuery和Google Maps所需的JavaScript代码。需要注意的是，调用谷歌地图的API需要你自己的密钥。

创建地图

为了将地图显示在网页上，首先通过创建一个命名的div元素为它保留一个位置div id="map"。然后，在initMap（页面加载时调用，用于初始化地图）函数中创建一个谷歌地图实例，并通过document.getElementById()方法指定对div元素的引用。接下来，用数组形式创建HeatmapLayer 对象，里面存储一个空的地理数据。后面我们将使用从服务器获得的地理位置更新这些数据。

创建事件总线

下面，我们创建一个vertx.EventBus对象的实例，指定要连接的URI位置。然后，我们添加一个onopen监听器，该监听器为地址“dashboard”注册一个事件总线处理程序。该处理程序将接收所有发布到“dashboard”地址的消息。

从服务器应用程序接收到的消息是JSON格式，每个行程位置包含以下内容：行程的簇中心ID，日期时间，纬度和经度，行程基准以及簇中心的纬度和经度。一个例子如下所示：

“cid”：18“dt”：2014-08-01 08:51:00“lat”：40.6858“lon”：73.9923“base”：“B02682”“clat”：40.67462874550765 ，“clon”： -  73.98667466026531}

在下面的事件总线处理程序代码中，做了以下工作：

解析JSON消息。
将行程的经度和纬度点添加到位置点数组，然后将这些数据设置在谷歌热度图图层对象上。
如果尚未添加标记，则在地图上为该簇中心位置添加一个标记。
增加此簇中心收到的位置点数量。

本博客系列中讨论的端到端应用程序体系结构的所有组件都可以与MapR融合数据平台（MapR Converged Data Platform）在同一个集群上运行。

下载并运行示例

Vert.x不需要应用程序服务器; 它很容易作为一个包含依赖的脂肪JAR文件（fat JAR）以常规Jave应用程序形式运行，命令如下所示：

$ java -jar ./target/mapr-streams-vertx-uberdashboard-1.0-SNAPSHOT-fat.jar web 8080 / apps / iot_stream：uberp

您可以从这里下载完整的代码，数据和说明来运行此示例。
这个例子运行在MapR 5.2 Sandbox上，其中包括MapR Streams和Spark 2.1。