当前位置： 首页 > news >正文

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

news 2025/8/5 9:09:20

传统网络通信单向传输导致消息卡顿、操作延迟。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 (<div className="echarts-container"><div className="connection-status">连接状态: {isConnected ? '已连接' : '连接中...'}</div><div ref={chartRef} style={{ width: '100%', height: '500px' }} /></div>);
};export default EChartsRealtime;

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

http://www.lryc.cn/news/609878.html

相关文章：

  • 安全扫描：目标主机支持RSA密钥交换问题
  • 国产化低代码平台如何筑牢企业数字化安全底座
  • 消防器材检测数据集介绍-9,600 张图片 智慧安防系统 建筑施工安全监管 AI 消防巡检机器人 自动审核系统 公共场所安全监测
  • Solidity全局变量与安全实践指南
  • [论文阅读] 人工智能 + 教学 | 从代码到职业：用机器学习预测竞赛程序员的就业潜力
  • 安全扫描：目标使用过期的TLS1.0 版协议问题
  • 【乐企板式文件】不动产销售类发票已支持
  • MySQL三大日志详解（binlog、undo log、redo log）
  • 赋能未来：数字孪生驱动能源系统智能化升级
  • 【项目实践】在系统接入天气api，根据当前天气提醒，做好plan
  • Linux(centos)安全狗
  • 【芯片设计专用执行单元：PWM如何重塑能源与智能控制】
  • sqli-labs靶场less29~less35
  • 2025.08.04 移除元素
  • 【测试工程思考】测试自动化基础能力建设
  • 使用mybatis生成器生成实体类mapper和查询参数文件，实现简单增删改查。使用log4j输出日志到控制台。使用配置文件注册Bean，配置视图解析器
  • 每天学一个Linux命令（38）：vi/vim
  • Excel商业智能分析报表 【销售管理分析仪】
  • 免费MCP: JSON 转 Excel MCP
  • Vim 高效使用指南
  • Flutter 事件总线 Event Bus
  • HarmonyOS 多屏适配最佳实践：基于 ArkUI 的响应式 UI 方案
  • 计算机网络：理解路由的下一跳
  • 第四十六章：AI的“瞬时记忆”与“高效聚焦”：llama.cpp的KV Cache与Attention机制
  • C++ 中 initializer_list 类型推导
  • 2.1 vue组件
  • 【AMD】编译llama.cpp实践版
  • 【异常案例分析】使用空指针调用函数（非虚函数）时，没有崩溃在函数调用处，而是崩在被调用函数内部
  • 关于大数据的基础知识（三）——数据安全与合规
  • C++模板知识点3『std::initializer_list初始化时逗号表达式的执行顺序』