本文介绍一下基于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配置方式的，可自行转换。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); //接受请求前缀 registry.enableSimpleBroker("/topic"); //返回请求前缀 } public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/getLoanPoints").withSockJS(); } } |
WebSocket消息发送接口
|
1 2 3 4 5 6 7 8 9 |
public interface WebSocketCommonHandler<T> { /** * WebSocket发送消息方法 * * @param t */ void send(T t); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public abstract class AbstractWebSocketCommonHandler<T> implements WebSocketCommonHandler<T> { @Autowired private SimpMessagingTemplate template; /** * 设置消息返回路由 * * @return */ public abstract String setTopic(); /** * WebSocket发送消息方法 * * @param o */ public void send(T o) { String topic = setTopic(); if (StringUtils.isEmpty(topic) || o == null) { throw new RuntimeException("Topic is Empty or Object is null!"); } this.template.convertAndSend(topic, o); } } |
WebSocket消息发送实现类
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Component public class DemoWebSocketHandler extends AbstractWebSocketCommonHandler<DataVo> { /** * 设置消息返回路由 * * @return */ @Override public String setTopic() { return "/topic/addLoanPoint"; } } |
消息处理及WebSocket数据推送
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
public class DemoMessageListener implements MessageListener { private static final Logger LOGGER = LoggerFactory.getLogger(RepayMessageListener.class); @Autowired private DemoWebSocketHandler demoWebSocketHandler; public void onMessage(List<Message> list) throws Exception { for (Message message : list) { LOGGER.info("还款消息体是:" + message.getText()); Gson gson = new Gson(); Demo demo = gson.fromJson(message.getText(), Demo.class); DataVo dataVo = new DataVo(); dataVo.setType(2); dataVo.setDate(demo.getTime()); dataVo.setValue(demo.getValue()); dataVo.setName(demo.getName()); demoWebSocketHandler.send(dataVo); } } } |
到此为止，这都是后台系统的一些相关实现，而对于上面的消息消费这款，不同的消息中间件，实现方式可能会有所不同，但我们此处大体思路无非是，接收消息，将消息Json转对象，然后做相应处理，再把响应数据交由Handler的send方法发送到对应的路由地址。
接下来是前端的一些，连接服务器及监听路由地址的方法实现，我开始已经提到，我用了STOMP去实现了前端的WebSocket管理，所以前段用的的js库有两个：socketjs-1.0.3.js和stomp.js，具体下载地址Google一下就可以拿到了。
首先封装一个WebSocket工具js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
var websocket = (function () { var stompClient = null; /** * 创建WebSocket链接 * * @param url * @param databackurl * @param callback */ var createConnectFunc = function connect(url, databackurl, callback) { var socket = new SockJS(url); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { console.log('Connected: ' + frame); stompClient.subscribe(databackurl, function (response) { if (typeof callback === "function") { callback(response); } else { console.log("Not Function!"); } }); }); }; /** * 断开WebSocket链接 */ var disconnectFunc = function disconnect() { if (stompClient != null) { stompClient.disconnect(); } console.log("WebSocket has Disconnected!"); }; /** * 发送数据到服务端 * * @param url * @param data */ var sendDataFunc = function sendDate(url, data) { stompClient.send("/app" + url, {}, JSON.stringify(data)); }; /** * 判断是否已经链接 * * @returns {boolean} */ var hasConnectedFunc = function hasConnected(){ if (stompClient != null) { return true; } return false; }; return { createConnect: createConnectFunc, sendData: sendDataFunc, disconnect: disconnectFunc, hasConnected: hasConnectedFunc } })(); |
以及demo.js是针对页面的业务方法，比如下面是创建echarts的line图，已经接收处理路由数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
var demo = (function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var loanDataValues = []; var repayDataValues = []; // 使用刚指定的配置项和数据显示图表。 var showChartFunc = function () { myChart.setOption({ title: { show: false, text: '图表详情' }, tooltip: { trigger: 'item', formatter: function (params) { var date = new Date(params.value[0]); data = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); return data + '<br/>' + '金额:' + params.value[1] + '<br/>' + '公司:' + params.value[2]; } }, legend: { data: ['Demo1金额', 'Demo2金额'] }, toolbox: { show: true, feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, xAxis: [ { type: 'time', splitNumber:10, boundaryGap: ['20%', '20%'], min: 'dataMin', max: 'dataMax' } ], yAxis: [ { type: 'value', scale: true, name: '金额(元)', min: 0, boundaryGap: ['20%', '20%'] } ], dataZoom: { type: 'inside', start: 0, end: 100 }, series: [ { name: 'Demo1金额', type: 'line', smooth: true, symbol: 'circle', data: loanDataValues }, { name: 'Demo2金额', type: 'line', smooth: true, symbol: 'rect', data: repayDataValues } ] }); }; /** * 实时接受消息并绘制图标 * * @param message */ var addPointFunc = function addPoint(message) { var dataVo = JSON.parse(message.body); addData(dataVo); showChartFunc(); }; function addData(dataVo) { if (dataVo.type == 1) { loanDataValues.push([dataVo.date, dataVo.value, dataVo.name]); } else if (dataVo.type == 2) { repayDataValues.push([dataVo.date, dataVo.value, dataVo.name]); } } /** * WebSocket连接 */ var connectFunc = function connect() { websocket.createConnect("/getLoanPoints", "/topic/addLoanPoint", addPointFunc); }; /** * 发送数据到服务器(暂时不用) */ var sendValueFunc = function sendValue() { var value = document.getElementById('name').value; websocket.sendData("/getLoanPoints", value); }; /** * 获取当日借贷信息 */ var getLoanFunc = function () { $.getJSON('getLoanInfo').done(function (data) { if (data.success) { loanDataValues = data.loanInfos.datas; repayDataValues = data.repayInfos.datas; showChartFunc(); } else { alert(data.message); } }); }; return { getLoan: getLoanFunc, connect: connectFunc } })(); |
而页面所需要做的就是在加载页面元素完毕之后，调用demo.connect()，去创建WebSocket链接，等待数据的推送，然后绘制图表。至此一个简单的实时动态图表的绘制就完成了，如有任何问题欢迎随时留言提问。O(∩_∩)O