讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

Seko
Seko

AI短剧一键生成成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

AniShort
AniShort

AI短剧协同制作平台

uni-app怎么解决SSE长连接断开重连

小强同学_6238

小强同学_6238

发布时间:2026-11-10 08:14:39

|

391人浏览过

|

来源于php中文网

原创

uni-app 中 SSE 断连不自动重连,因非 H5 环境缺乏原生 EventSource 支持,需手动封装重连逻辑:小程序用 uni.request 模拟流式请求并心跳检测,App 端需监听前后台状态防冻结,重连策略应分级退避,且必须前后端协同处理 lastEventId 保证消息连续性。

uni-app怎么解决sse长连接断开重连

uni-app 里 SSE 断开后不自动重连,不是你代码写错了,而是原生 EventSource 在多数非 H5 环境根本不存在或行为异常 —— 微信小程序没 EventSource,App 端 WebView 对长连接空闲超时极其敏感,H5 端虽有但不支持自定义请求头(比如 Authorization)。必须手动封装重连逻辑,不能依赖浏览器默认行为。

微信小程序端:用 uni.request 模拟 SSE + 主动心跳检测

小程序环境不支持 EventSource,也不能用 WebSocket 直接替代(协议不兼容),只能靠 uni.request 发起流式 GET 请求,并手动解析 text/event-stream 响应体。关键点在于:连接建立后,不能只等 success 回调,要持续监听响应流、识别 data: 行、处理换行分隔,并在无数据时主动判断超时。

  • 服务端响应头必须包含 Content-Type: text/event-stream 和 Cache-Control: no-cache,否则小程序会缓存或截断响应
  • 使用 uni.request 的 dataType: 'text',配合 responseType: 'text'(HBuilderX 3.9+ 支持),避免二进制乱码
  • 每次收到 chunk 后更新心跳时间戳;若超过 45s 无新数据,视为连接中断,立即 abort() 当前请求并触发重连
  • 重连前检查 uni.getNetworkType,网络为 none 时不重试,防止卡死

App 端(Android/iOS):避免 WebView 冻结导致静默断连

Android WebView 和 iOS WKWebView 在后台/切页时会冻结 JS 定时器,setTimeout 可能延迟数秒甚至失效,导致心跳失效、连接被代理或 CDN 强制关闭。不能只靠服务端心跳保活。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 监听 plus.navigator.getState() 或 uni.onAppShow/uni.onAppHide,App 进入后台时主动 abort() 当前请求,恢复前台时重建连接
  • 禁用 WebView 默认的空闲断连策略:Android 端需在 mainfest.xml 中添加 android:usesCleartextTraffic="true"(如用 HTTP);iOS 端需在 Info.plist 配置 NSAppTransportSecurity 允许明文请求(仅调试用)
  • 不要用 setInterval 做心跳检测 —— 切页再回来可能堆积多个定时器,改用单次 setTimeout + 递归调用,每次重连前先 clearTimeout
  • 服务端返回的每个 event 必须带 id: 字段,客户端记录 lastEventId,重连时通过请求头 Last-Event-ID 携带上一次 ID,避免消息丢失

重连策略必须分级,不能无脑轮询

移动端网络抖动频繁,简单 setTimeout(() => connect(), 1000) 会导致大量无效请求,还可能被平台限流或服务端拒绝。

  • 首次断连:立即重试(delay = 0)
  • 连续失败 ≤3 次:固定间隔重试(如 1s)
  • 失败 ≥4 次:指数退避(1s → 2s → 4s → 8s),最大重试次数建议设为 5
  • 重试期间若网络状态从 none 变为 wifi 或 4g,立刻清空退避计时器,重新从第 1 步开始
  • 每次重连请求 URL 后拼上时间戳参数(如 ?t=1730289360123),绕过某些代理的连接复用缓存

跨平台统一 API 封装时,onerror 和 onclose 不可靠

不同平台对错误事件的触发时机差异极大:H5 端可能触发 onerror,小程序压根不触发,App 端可能延迟数秒才回调。不能把重连逻辑绑死在这两个事件上。

  • 所有平台都应基于「心跳超时」作为主判断依据,onerror/onclose 仅作辅助信号
  • 封装类中维护一个 lastActiveTime 时间戳,每次收到有效 data: 行就更新;另起一个 checkAlive 定时器每 5s 检查一次是否超时(比如 >45s)
  • 服务端推送的 ping: 事件(内容为空或 keepalive)也要计入 lastActiveTime 更新,否则纯业务数据间隔长就会误判断连
  • 调试时在控制台打印 connectionStatus 和 lastActiveTime 差值,比看 onerror 日志更早发现问题

最易被忽略的是 lastEventId 的传递和服务器的幂等处理 —— 客户端重连时带了 ID,服务端却没校验或没从断点续推,结果重复发、漏发、错序。这不在 uni-app 控制范围内,但必须前后端对齐逻辑,否则重连再稳也没用。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2923

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6403

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7290

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

7138

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

1023

2024.05.22

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

20

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

20

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

40

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn