websocket+Echarts实时图表数据展示

WebSocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

为什么需要WebSocket ?

初次接触 WebSocket的人，都会问同样的问题: 我们已经有了HTTP协议，为什么还需要另-一个协议?它能带来什么好处?
答案很简单，因为HTTP协议有一个缺陷:通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主I动向客户端推送信息。

效果图

image.png

实时数据有两种方式:

1.定时器:由前端做，发送请求次数多，耗性能
echart_demo.html 代码如下(head标签引入的 echarts.min.js 需从echart官网（https://echarts.apache.org/zh/builder.html）下载到与echart_demo.html 同级目录)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>websocket+Echarts实时图表数据展示</title>
   <script src="echarts.min.js"></script>
   <script src="./echart_js.js"></script>
</head>

<body>
   <div id="main" style="width: 100%;height:400px;"></div>
</body>

</html>

echart_demo.js 代码如下

window.onload = function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [54, 120, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    // 定时器
    function getChart() {
        var request = new XMLHttpRequest()
        request.open('get', 'http://localhost:8081/get_echart')
        request.send()
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
                // 把字符串对象转换成对象再赋值给option的数据
                var data = JSON.parse(request.responseText)
                option.series[0].data = data.result
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            } else {
                console.log('error');
            }
        }
    }
    setInterval(getChart, 2000)
    getChart()
}

2.WebSocket:需要后端配合，只需要发送一次请求，节约性能
实现方式.
连接成功建立的回调方法
ws.onopen = function () {alert("WebSocket连接成功")}连接发生错误的回调方法
ws.onerror = function () {alert("WebSocket连接发生错误")};接收到消息的回调方法
ws.onmessage = function (event) {alert(event.data)}连接关闭的回调方法
ws.onclose = function () {alert("WebSocket连接关闭")}

echart_demo.html 代码如下(head标签引入的 echarts.min.js 需从echart官网（https://echarts.apache.org/zh/builder.html）下载到与echart_demo.html 同级目录)

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>websocket+Echarts实时图表数据展示</title>
   <script src="echarts.min.js"></script>
   <script src="./echart_js.js"></script>
</head>

<body>
   <div id="main" style="width: 100%;height:400px;"></div>
</body>

</html>

echart_demo.js 代码如下

window.onload = function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例',
            padding: [
                10,  // 上
                10, // 右
                5,  // 下
                10, // 左
            ],
            left: 'center'
        },
        tooltip: {},
        legend: {
            data: ['销量'],
            right: '20'
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [54, 120, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    // 连接服务器
    var ws = new WebSocket("ws://127.0.0.1:8090")
    // 连接成功
    ws.onopen = function () {
        alert('连接成功')
    }
    ws.onerror = function () { alert("WebSocket连接发生错误") };

    // 接收到消息的回调方法
    ws.onmessage = function (msg) {
        console.log(
            msg.data
        );
        var data = JSON.parse(msg.data)
        option.series[0].data = data.message  //赋值
        myChart.setOption(option);  //设置
    }
    // 自适应
    window.onresize = function () {
        myChart.resize()
    }
}