temu跨境电商厦门seo俱乐部
传统网络通信单向传输导致消息卡顿、操作延迟。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服务器和客户端功能，这里我们可以终端执行如下命令进行安装：
npm install wsWebSocket需要像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）图表优化：图表初始化和数据更新分离、窗口大小变化监听自动调整图表大小、卸载时清理资源等
当然你可以根据实际需求调整图表配置和数据处理逻辑，以下代码仅作为参考：
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图表内容也能够实时的展示真实数据：
