从HTTP到WebSocket：打造极速实时通讯体验

传统网络通信单向传输导致消息卡顿、操作延迟。WebSocket 如同双向对讲机，支持服务器主动推送，高效实现实时聊天、在线协作，大幅提升网络交互流畅度。

初识概念

WebSocket概念：一种协议设计用于提供低延迟、全双工和长期运行的连接。全双工：通信的两个参与方可以同时发送和接收数据，不需要等待对方的响应和传输完成，通过建立全双工的持久连接，客户端和服务端之间就能实现高效实时性更强的通信，可以说WebSocket的出现就是为了解决实时通信的问题，通信的分类如下：

传统通信：电子邮件、网页浏览等存在延迟，需要用户主动请求来获取更新数据

实时通信：即时消息传递、音视频通话、在线会议和实时数据传输等，可以实现即时的数据传输和交流，不需要用户主动请求或刷新来获取更新数据

通过简单了解什么是WebSocket之后，我们需要知晓WebSocket具备的优势和限制：

优点：

1）双向实时通信：允许在单个、长时间的连接上进行双向实时通信，在需要快速实时更新的应用程序里比HTTP更加高效

2）降低延迟：链接一旦建立便会保持开放，数据可以在客户端和服务器之间以比HTTP更低的延迟进行传输

3）高效资源利用：可以减少重复请求和响应的开销，因为它的连接只需要建立一次

限制：

1）不提供加密功能：如果有安全上需求，需采用其他方式来确保安全性，如：ssl协议或生长黑白名单等

2）不支持旧版本浏览器：不支持IE10以前的版本，需要使用AJAX或其它方式来进行替代

3）优化特点：保持长连接需要服务器不断地维护和处理连接状态，需要优化性能

可以说WebSocket的出现填补了传统的HTTP协议在实时通信方面的不足，它允许客户端和服务器之间通过单个TCP连接来进行双工通信并且进行实时的数据交换，所以WebSocket协议非常适用于基于Web的游戏、聊天应用以及任何需要低延迟实时连接的应用程序，目前WebSocket已得到主流浏览器的支持并且支持多项编程语言，其都存在相应的库、框架或模块支持WebSocket实现和应用，如下所示：

WebSocket连接：如何建立WebSocket的连接？这里我们需要通过HTTP发送一次常规的Get请求并在请求头中带上Upgrade，告诉服务器我想从HTTP升级成WebSocket，连接建立成功之后客户端和服务器双方便可以随时向彼此发送消息，如下所示客户端发送WebSocket升级请求到服务器，服务器做出响应后从此刻起连接就被升级成为WebSocket连接：

实现方式

在node.js中ws是一个流行的WebSocket库，主要实现WebSocket服务器和客户端功能，这里我们可以终端执行如下命令进行安装：

javascript 复制代码

npm install ws

WebSocket需要像TCP一样先建立连接，需要客户端和服务端进行握手连接，连接成功后才能互相通信，WebSocket对象作为一个构造函数，用于新建WebSocket实例，如下所示：

复制代码

let ws = new WebSocket("ws://1270.0.0.1:8000")

执行上面语句之后，客户端就会与服务器进行连接，webSocket.readyState中readyState属性返回实例对象的当前状态共有四种，如下所示：

1）CONNECTING：值为0，表示正在连接

2）OPEN：值为1，表示连接成功，可以通信了

3）CLOSING：值为2，表示连接正在关闭

4）CLOSED：值为3，表示连接已经关闭，或者打开连接失败

接下来我们借助ws模块创建一个WebSocket服务器，并且监听客户端发送的消息，监听到客户端发送的消息之后，服务器在向客户端发送消息，代码如下所示：

当我们运行html页面之后，就会触发WebSocket的连接，我们可以打开网络的ws模块查看，连接之后我们向服务器发送消息，服务器接收到消息之后就会再向客户端发送消息，其中绿色箭头代表浏览器向服务器发送消息，红色箭头代表服务器向浏览器发送消息，如下所示：

通过上面的效果演示，我们了解WebSocket的通信流程主要就是三个步骤：

心跳机制：为了保持WebSocket稳定的长连接，在连接建立之后服务器和客户端之间通过心跳包来保持连接状态，以防止连接因为长时间没有数据传输而被切断。心跳包是一种特殊的数据包，不包含任何实际数据，仅用来维持连接状态(通常是一个空数据帧，通过定期发送以确保连接仍然有效，避免长时间没有数据传输而被中断)

实时图表

像我们的大屏开发完成之后，一般很少需要用户手动刷新界面来更新数据，也就是我们常用的http开发模式，为了实现数据的实时同步，这里我们一般也是采用WebSocket的模式去实时更新数据：

这里我们通过react代码实现，可以根据自身情况添加对应的优化机制：

1）重试机制：当连接断开时会在 3 秒后尝试重新连接

2）状态管理：使用react hook管理状态和副作用

3）防止溢出：限制了数据数组长度，只保留最近 100 条数据，防止内存溢出

4）图表优化：图表初始化和数据更新分离、窗口大小变化监听自动调整图表大小、卸载时清理资源等

当然你可以根据实际需求调整图表配置和数据处理逻辑，以下代码仅作为参考：

javascript 复制代码

import { useEffect, useState, useRef, useCallback } from 'react';
import * as echarts from 'echarts';

// 自定义Hook：处理WebSocket连接和数据接收
const useWebSocket = (url) => {
  const [isConnected, setIsConnected] = useState(false);
  const [data, setData] = useState([]);
  const wsRef = useRef(null);
  const reconnectTimeoutRef = useRef(null);
  
  // 处理接收到的消息
  const handleMessage = useCallback((msg) => {
    try {
      // 解析数据
      const n = msg.data.split(",");
      if (n.length >= 3) {
        const newItem = [Number(n[1]), Number(n[2])];
        setData(prev => [...prev, newItem].slice(-100)); // 只保留最近100条数据，防止内存溢出
      }
    } catch (error) {
      console.error('数据解析错误:', error);
    }
  }, []);
  
  // 建立连接
  const connect = useCallback(() => {
    // 关闭现有连接
    if (wsRef.current) {
      wsRef.current.close();
    }
    
    wsRef.current = new WebSocket(url);
    
    wsRef.current.onopen = () => {
      console.log('WebSocket已连接');
      setIsConnected(true);
      // 清除重连计时器
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current);
      }
    };
    
    wsRef.current.onmessage = handleMessage;
    
    wsRef.current.onclose = (event) => {
      console.log(`WebSocket连接关闭，代码: ${event.code}`);
      setIsConnected(false);
      
      // 自动重连机制
      reconnectTimeoutRef.current = setTimeout(() => {
        console.log('尝试重新连接...');
        connect();
      }, 3000); // 3秒后重连
    };
    
    wsRef.current.onerror = (event) => {
      console.error('WebSocket错误:', event);
      setIsConnected(false);
    };
  }, [url, handleMessage]);
  
  // 组件挂载时连接，卸载时关闭
  useEffect(() => {
    connect();
    
    return () => {
      if (wsRef.current) {
        wsRef.current.close(1000, '组件卸载'); // 正常关闭
      }
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current);
      }
    };
  }, [connect]);
  
  return { isConnected, data, reconnect: connect };
};

// ECharts图表组件
const EChartsRealtime = () => {
  const chartRef = useRef(null);
  const chartInstanceRef = useRef(null);
  const { isConnected, data } = useWebSocket("ws://192.168.31.171:8090/api/echarts/ws");
  
  // 初始化图表
  useEffect(() => {
    if (chartRef.current && !chartInstanceRef.current) {
      chartInstanceRef.current = echarts.init(chartRef.current);
      
      // 设置初始配置
      chartInstanceRef.current.setOption({
        // 你的图表配置
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data,
          type: 'line',
          smooth: true
        }]
      });
      
      // 处理窗口大小变化
      const handleResize = () => {
        chartInstanceRef.current?.resize();
      };
      
      window.addEventListener('resize', handleResize);
      
      return () => {
        window.removeEventListener('resize', handleResize);
        chartInstanceRef.current?.dispose();
        chartInstanceRef.current = null;
      };
    }
  }, []);
  
  // 数据更新时刷新图表
  useEffect(() => {
    if (chartInstanceRef.current && data.length > 0) {
      chartInstanceRef.current.setOption({
        series: [{
          data: data
        }]
      });
    }
  }, [data]);
  
  return (
    <div className="echarts-container">
      <div className="connection-status">
        连接状态: {isConnected ? '已连接' : '连接中...'}
      </div>
      <div ref={chartRef} style={{ width: '100%', height: '500px' }} />
    </div>
  );
};

export default EChartsRealtime;

通过websocket接口数据的不断变化，我们的echarts图表内容也能够实时的展示真实数据：