php使用webSocket实现Echarts长连接自动刷新的解决方案(1)：前端获取后端JSON数据

项目需求

Echarts图表自动获取服务器端推送的数据，实现图表的自动渲染更新；

前端代码 引入JS包

HTML代码

JS代码

webSocket连接函数封装；

//webSocket连接;
    function WebSocketServer() {
        var wsClient = null; //WS客户端对象

        //判断是否支持WebSocket
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }

        if (window.WebSocket) {
            wsClient = new WebSocket('ws://127.0.0.1:9090');
            wsClient.onmessage = function (e) {
                //console.log(e.data);
                //图表渲染数据格式处理;
                var newData = JSON.parse(e.data);
                var dataName = [], dataList = [];
                for (var i = 0; i