从实例中学习websocket解决高速数据更新

一.什么是websocket

WebSocket是一种协议，用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接，这使得Web应用程序可以更加实时地传递数据。

二.应用场景分析 

  

假设我们需要实现一个实时更新（更新频率约为0.001s）的折线图，数据来自后端从文件中读取。

正确演示效果如下

 

2.1不使用websocket的实现方法

前端通过轮询来获取数据，即每一次更新图表就像后端发送请求

前端代码如下

     function fetchNewData() {
      fetch('/data')
        .then(response => response.json())
        .then(newData => {
          data.push(newData);
          if (data.length > 1000) {
            data.shift();
          }
          updateChart();
        });
    }



// 设置定时器  每0.2s发送请求
    setInterval(fetchNewData, 200);

轮询频率为0.2s的效果