网站导航
> 技术文档 > 从HTTP到WebSocket：打造极速实时通讯体验

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

网友: 技术文档 2025-08-08 12:58:23

传统网络通信单向传输导致消息卡顿、操作延迟。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 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）图表优化：图表初始化和数据更新分离、窗口大小变化监听自动调整图表大小、卸载时清理资源等

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

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 ( 
 
 连接状态: {isConnected ? \'已连接\' : \'连接中...\'} 
 <div ref={chartRef} style={{ width: \'100%\', height: \'500px\' }} /> 
 );};export default EChartsRealtime;

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

网络标签：

相关问题