0

0

HTML5WebSocket消息丢包_HTML5重发机制与ack确认实现教程【指南】

絕刀狂花

絕刀狂花

发布时间:2026-02-27 19:09:14

|

940人浏览过

|

来源于php中文网

原创

html5websocket消息丢包_html5重发机制与ack确认实现教程【指南】

WebSocket消息丢了,光靠重连没用

重连只能解决连接断开,但断开前发出去的那几条消息,服务器可能根本没收到——前端以为发成功了,后端压根没处理。这时候必须靠应用层确认机制,不是靠网络层或 WebSocket 自带的 ping/pong。

  • onclose 触发时,socket.bufferedAmount 还大于 0,说明有消息卡在浏览器发送队列里,还没真正发出去
  • 服务端主动断连(比如重启)时,不会等客户端消息发完,直接关连接,消息静默丢失
  • 弱网下 send() 调用返回 true,不代表对方收到了,只代表塞进了浏览器的输出缓冲区

必须自己实现 ACK + 消息 ID

WebSocket 协议本身不提供应用级送达保证,你得自己加一层“已读回执”。核心就三样:唯一 ID、ACK 帧、超时重发。

  • 每条业务消息带上客户端生成的 messageId(推荐 crypto.randomUUID(),别用时间戳+随机数拼接,有碰撞风险)
  • 发送后启动定时器,比如 setTimeout(() => resend(msg), 5000),同时把 msg 存进一个待确认 Map:pendingMap.set(msgId, { msg, timer })
  • 收到服务端返回的 { type: 'ACK', messageId: 'xxx' } 后,clearTimeout(pendingMap.get(msgId).timer) 并删掉记录
  • 重发时要检查是否已送达(比如用户已刷新页面),避免重复提交;服务端也要按 messageId 去重,不能只靠序列号

心跳和 ACK 别混成一件事

心跳(ping/pong)保的是 TCP 连接活着,ACK 保的是某条业务消息被处理了——两者目的不同,不能互相替代,也不能共用同一套超时逻辑。

行者AI
行者AI

行者AI绘图创作,唤醒新的灵感,创造更多可能

下载
  • 心跳间隔建议设为 25s,服务端 ping,客户端必须响应 pong;超过 45s 没响应就断连重试
  • ACK 超时建议独立设置,比如 5s,比心跳短,否则你会误以为“连接还活着,消息肯定到了”
  • 别让 ACK 包走心跳通道:心跳帧是控制帧,不能携带业务字段;ACK 必须是普通文本消息,格式统一,例如 {"type":"ack","mid":"abc123"}
  • 服务端收到业务消息后,必须立刻发 ACK,不能等 DB 写完再发——否则 ACK 延迟导致前端反复重发

离线消息兜底不能只靠重发

用户切后台、关页面、杀进程,重发机制完全失效。ACK 只能解决“在线时的瞬时丢包”,离线状态得靠服务端缓存 + 状态同步。

立即学习前端免费学习笔记(深入)”;

  • 服务端收到消息但目标用户不在线,不能丢弃,要写入 redis 或数据库,key 用 userId:messageId,带过期时间(比如 7 天)
  • 用户重连成功后,客户端要主动发一个 { type: 'fetch_offline', lastSeq: 12345 },服务端返回未读消息列表
  • 注意:离线消息也要走 ACK 流程,否则“拉取成功”不等于“用户看到”,下次拉又会重复推
  • 如果消息量大,别一次性全推,按分页或时间窗口(如最近 1 小时)控制,避免首屏卡顿

最容易被忽略的是:ACK 不是发出去就完了,它本身也是一条网络消息,也可能丢。所以服务端发 ACK 之前,得先落库标记“已触发 ACK”,失败则重试;客户端收 ACK 后,也要发个“ACK-RECEIVED”给服务端——这层嵌套确认,才是生产环境扛住弱网的关键。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

38

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

常用的数据库软件
常用的数据库软件

常用的数据库软件有MySQL、Oracle、SQL Server、PostgreSQL、MongoDB、Redis、Cassandra、Hadoop、Spark和Amazon DynamoDB。更多关于数据库软件的内容详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1000

2023.11.02

内存数据库有哪些
内存数据库有哪些

内存数据库有Redis、Memcached、Apache Ignite、VoltDB、TimesTen、H2 Database、Aerospike、Oracle TimesTen In-Memory Database、SAP HANA和ache Cassandra。更多关于内存数据库相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

664

2023.11.14

mongodb和redis哪个读取速度快
mongodb和redis哪个读取速度快

redis 的读取速度比 mongodb 更快。原因包括:1. redis 使用简单的键值存储,而 mongodb 存储 json 格式的数据,需要解析和反序列化。2. redis 使用哈希表快速查找数据,而 mongodb 使用 b-tree 索引。因此,redis 在需要高性能读取操作的应用程序中是一个更好的选择。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

499

2024.04.02

redis怎么做缓存服务器
redis怎么做缓存服务器

redis 作为缓存服务器的答案:redis 是一款开源、高性能、分布式的键值存储,可作为缓存服务器使用。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

410

2024.04.07

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

2

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.9万人学习

CSS教程
CSS教程

共754课时 | 37.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号