在 Vanke 近一年的工作,我们重写了原本的 2.0 系统。现在也基本进入稳定状态。 接下来的工作,更多地是用运营数据说话,尽可能通过技术手段影响我们所在的行业。
R2D2 就是这么一个背景下诞生出来的项目。本质就是一个数据可视化的项目。
我们对外产品主要是 “住这儿” 和 “助这儿”,用户分别是业主和员工。关于产品的设计不是这篇 Blog 要讨论的,所以不评论功能是否合理等等。
“住这儿” 面向业主。提供了缴物业费、查询邮包、提交报事、反馈、物业评分等物业支撑功能,同时也提供了一些社区活动、帖子,以及我们发送通知的渠道。
可以收集的数据有:
“助这儿” 面向员工。提供员工工作所需的功能,签到、抢单、查询业主信息等。
R2D2 将从两个 App 收集到的数据汇总,并且以各种图表展示出来。
就当前而言,R2D2 需要显示的数据有:
以上的数据大概分为三类:
上面的数据中,第 1 类和第 2 类数据,后端都可以通过普通 API 提供给前端给予展示,而第 3 种则需要做到实时提供。
实时的请求,以前有 文章 讨论过,大致分为:
三种方式,我比较希望使用第一种轮询,因为实现最简单,只需要 Ajax 定时循环请求就可以,当然对服务器压力会大。(但毕竟这个是给内部人看的,轮询也够了)
长轮询需要 Tornado
的异步请求支持,个人不太想用 Tornado,也放弃了这个方式。
但在 R2D2 中有这样的一个需求,当员工签到,需要在一个地图上显示员工签到的动画。
如果用轮询,n 秒请求 1 次,如果 n 太大,那么 n 秒内登录 k 个员工,这 k 个员工的动画就会在一瞬间同时播放,效果会变得很奇怪。
但如果 n 太小,又会对服务器造成很大的压力,所以对这部分数据,选择用 WebSocket 来推送给前端。
所以整个 R2D2 大致的架构如下图:
R2D2 前端采用 Vue 做基本框架,D3 来协助绘图。
上一次认真写前端是一年前还在一熊的时候。过去一年,前端新出了几个框架。 对比 Angular、Vue 和 React 最后决定用 Vue。 相比之下 Vue 和 Angular 比较相似,而且比 Angular 要轻量级,上手快。
Vue 相关的介绍,在 另一篇文章 里有讨论。 D3 相关讨论在 这里。
R2D2 后端氛围两部分,普通的 API 以及 WebSocket。
例如日活等数据,是非实时性的,这部分数据通过 SQL 就可以计算得到,因为一段时间内数据是不会变动的,可以存放在 Redis 中,减少对 RDS 的压力。
除了日活以为,例如当前在岗员工情况也是通过这种方式提供数据给前端,前端通过轮询取数据。
目前 R2D2 对 WebSocket 的应用还比较轻,主要是用来分析日志并且将用户请求信息发送给前端进行渲染。大致的流程是这样:
多个服务节点将日志实时汇总到日志服务器上,日志分析程序分析汇总到的日志,解析出当前用户的行为,再转换成对应的数据协议传送给前端,前端接受数据,在地图上标记位置并渲染对应的动画。
目前 R2D2 的大致效果如下:
R2D2 目前还存在不少问题: