0

0

HTML5服务器推送心跳_HTML5SSE定时发送心跳维持长连接方法介绍【介绍】

看不見的法師

看不見的法師

发布时间:2026-02-24 21:37:02

|

770人浏览过

|

来源于php中文网

原创

sse连接需服务端每30秒发送:keepalive注释重置超时,避免浏览器静默关闭;须处理nginx超时、框架缓冲、cors凭证、cookie安全属性及error事件误判等四层问题。

html5服务器推送心跳_html5sse定时发送心跳维持长连接方法介绍【介绍】

HTML5 SSE 连接断开前没发心跳,浏览器自动关闭连接

服务端不主动发送数据,SSE 连接通常在 30–60 秒后被浏览器静默关闭(Chrome/Firefox 表现一致),这不是 bug,是规范行为。SSE 协议要求服务端定期发送注释行或空事件来重置超时计时器。

  • 最简方案:服务端每 30 秒发一条 :keepalive 注释(以 : 开头,浏览器忽略但重置心跳)
  • 别用 data: 发空值——部分浏览器(如 Safari)不认 data:\n\n 为有效事件,仍会断连
  • Node.js Express 示例中,别在 res.write() 后漏掉 \n\n(两个换行符),否则事件不完整,浏览器无法解析
  • Nginx 默认 proxy_read_timeout60 秒,若后端心跳间隔 >60s,Nginx 会先于浏览器断开连接

EventSource 监听 error 事件不等于连接失败

error 事件触发频率高,且可能由网络抖动、短暂服务不可达或单次消息解析失败引发,并非都代表连接永久中断。盲目在 error 回调里立即 new EventSource() 会导致请求风暴。

  • 检查 eventSource.readyState:只有 0closed)才需重建;0 以外的 error 大概率正在自动重连
  • 服务端返回非 200 状态码(如 503)时,EventSource 会触发 error 并停止重试——此时必须手动恢复
  • 重连间隔建议用指数退避:Math.min(1000 * 2 ** attempt, 30000),避免压垮服务端

服务端流式响应被框架缓冲,心跳延迟或丢失

很多 Web 框架(如 Express、Flask、Spring Boot)默认启用响应体缓冲,导致即使你调用了 write(),数据也卡在内存里不下发,心跳失效。

Peppertype.ai
Peppertype.ai

高质量AI内容生成软件,它通过使用机器学习来理解用户的需求。

下载
  • Express 中必须设置 res.flushHeaders() + res.socket.setNoDelay(true),并禁用压缩:res.removeHeader('Content-Encoding')
  • Flask 需用 yield + Response(..., content_type='text/event-stream'),且禁用 Werkzeug 的 Response 自动缓冲(加 direct_passthrough=True
  • Spring Boot 的 SseEmitter 要调用 emitter.send(SseEmitter.event().name("heartbeat").data("")),不能只写原始流

跨域场景下 withCredentials 不生效,心跳携带不了 Cookie

前端用 new EventSource(url, { withCredentials: true }),但服务端没配 Access-Control-Allow-Credentials: trueAccess-Control-Allow-Origin 写死 *,会导致凭证被丢弃,后续心跳请求无登录态。

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

  • Access-Control-Allow-Origin 不能是 *,必须显式写出请求来源域名(如 https://example.com
  • 如果服务端用 Nginx 做 CORS,注意 add_header 默认不继承,需在 location 块内重复声明
  • Cookie 的 SameSite=NoneSecure 属性必须同时设置,否则 Chrome 84+ 拒绝发送

服务端心跳不是“发个空行”就完事,它卡在协议层、框架层、代理层、浏览器层四道关卡上,少一个环节,连接就在你以为稳定的时候悄无声息断掉。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
spring框架介绍
spring框架介绍

本专题整合了spring框架相关内容,想了解更多详细内容,请阅读专题下面的文章。

144

2025.08.06

Java Spring Security 与认证授权
Java Spring Security 与认证授权

本专题系统讲解 Java Spring Security 框架在认证与授权中的应用,涵盖用户身份验证、权限控制、JWT与OAuth2实现、跨站请求伪造(CSRF)防护、会话管理与安全漏洞防范。通过实际项目案例,帮助学习者掌握如何 使用 Spring Security 实现高安全性认证与授权机制,提升 Web 应用的安全性与用户数据保护。

81

2026.01.26

nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

240

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

519

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

567

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

243

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

584

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3606

2024.08.07

Golang 生态工具与框架:扩展开发能力
Golang 生态工具与框架:扩展开发能力

《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路,涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式,帮助开发者构建高效、可维护的 Go 工程体系,并提升团队协作与交付效率。

1

2026.02.24

热门下载

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

精品课程

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

共46课时 | 3.4万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.8万人学习

CSS教程
CSS教程

共754课时 | 35.7万人学习

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

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