基于WebSocket的实时动态图表_html/css_WEB-ITnose

本文介绍一下基于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配置方式的，可自行转换。

Java

@Configuration@EnableWebSocketMessageBrokerpublic 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();    }}

@Configuration@EnableWebSocketMessageBrokerpublic class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {     @Override    public void configureMessageBroker(MessageBrokerRegistryregistry) {        registry.setApplicationDestinationPrefixes("/app"); //接受请求前缀        registry.enableSimpleBroker("/topic");  //返回请求前缀    }     public void registerStompEndpoints(StompEndpointRegistryregistry) {        registry.addEndpoint("/getLoanPoints").withSockJS();    } }

WebSocket消息发送接口

WebSocket消息处理接口

Java

public interface WebSocketCommonHandler<T> {    /**     * WebSocket发送消息方法     *     * @param t     */    void send(T t);}

public interface WebSocketCommonHandler<T> {     /**     * WebSocket发送消息方法     *     * @param t     */    void send(T t);}

WebSocket消息处理接口抽象类

Java

public abstract class AbstractWebSocketCommonHandlerimplements WebSocketCommonHandler {

@Autowiredprivate 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);}

}

public abstract class AbstractWebSocketCommonHandler<T> implements WebSocketCommonHandler<T> {     @Autowired    private SimpMessagingTemplatetemplate;     /**     * 设置消息返回路由     *     * @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消息发送实现类

WebSocket消息处理实现类

Java

@Componentpublic class DemoWebSocketHandler extends AbstractWebSocketCommonHandler<DataVo> {    /**     * 设置消息返回路由     *     * @return     */    @Override    public String setTopic() {        return "/topic/addLoanPoint";    }}

@Componentpublic class DemoWebSocketHandler extends AbstractWebSocketCommonHandler<DataVo> {     /**     * 设置消息返回路由     *     * @return     */    @Override    public String setTopic() {        return "/topic/addLoanPoint";    }}

消息处理及WebSocket数据推送

消息消费监听器及WebSocket数据推送

Java

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);        }    }}

public class DemoMessageListener implements MessageListener {     private static final LoggerLOGGER = LoggerFactory.getLogger(RepayMessageListener.class);     @Autowired    private DemoWebSocketHandlerdemoWebSocketHandler;     public void onMessage(List<Message> list) throws Exception {         for (Messagemessage : list) {            LOGGER.info("还款消息体是:" + message.getText());            Gsongson = new Gson();            Demodemo = gson.fromJson(message.getText(), Demo.class);            DataVodataVo = 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

WebSocket工具js

JavaScript

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}

})();

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图，已经接收处理路由数据

JavaScript

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}

})();

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