基于WebSocket的实时动态图表

本文介绍一下基于WebSocket的实时数据双向通讯的小范畴应用,来实现实时动态图表的展示功能。其实实现图表动态更新又岂止是只有这一种方法。用户页面端的js心跳轮询一样可以获取来自后台的最新数据,只是我感觉那是伪实时。

首先介绍一下什么是WebSocket?

WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议。 WebSocket通讯协议定于2011年被IETF定为标准RFC 6455,WebSocketAPI被W3C定为标准。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。 两者之间就直接可以数据互相传送。或者看一下来自国内知乎上的解释:https://www.zhihu.com/question/20215561

项目需求:

其实标题说的很清晰了,就是要实现图标的实时动态更新,当时我的第一感觉就是要采用WebSocket去解决这个问题。而我的数据来源是来自MQ(消息队列),也就是触发数据推送就是在消息消费的地方。

关于STOMP:

这里需要提一下STOMP,这也是我在调研过程中,在Spring中发现的一个新协议。全称:Simple Text-Orientated Messaging Protocol. 协议官网:http://jmesnil.net/stomp-websocket/doc/。个人将它理解成为WebSocket协议的一个封装实现。当然Spring针对STOMP的实现做了很好的封装,官方文档的解释也是很全面的。

系统配置:

全系统采用JavaConfig模式配置。所以给出的配置方式均为class文件,有喜好xml配置方式的,可自行转换。

WebSocket消息发送接口


WebSocket消息发送实现类

消息处理及WebSocket数据推送

到此为止,这都是后台系统的一些相关实现,而对于上面的消息消费这款,不同的消息中间件,实现方式可能会有所不同,但我们此处大体思路无非是,接收消息,将消息Json转对象,然后做相应处理,再把响应数据交由Handler的send方法发送到对应的路由地址。

接下来是前端的一些,连接服务器及监听路由地址的方法实现,我开始已经提到,我用了STOMP去实现了前端的WebSocket管理,所以前段用的的js库有两个:socketjs-1.0.3.js和stomp.js,具体下载地址Google一下就可以拿到了。

首先封装一个WebSocket工具js

以及demo.js是针对页面的业务方法,比如下面是创建echarts的line图,已经接收处理路由数据

而页面所需要做的就是在加载页面元素完毕之后,调用demo.connect(),去创建WebSocket链接,等待数据的推送,然后绘制图表。至此一个简单的实时动态图表的绘制就完成了,如有任何问题欢迎随时留言提问。O(∩_∩)O