当前位置: 首页 > article >正文

关于 SSE(Server-Sent Events)过程的简要解剖

Js前端:发送普通请求

fetch(...)
.then(()=>{})
.catch(()=>{})

Java后端:接收请求后调用请求处理函数,函数返回一个emiiter对象

public SseEmitter handleRequest(...) {// 创建一个 SseEmitter 对象,用于发送 SSE 事件SseEmitter emitter = new SseEmitter();...return emiiter;  // 将 SseEmitter 对象返回给前端,以便前端可以订阅 SSE 事件 (即:与前端建立 SSE 连接)
}

Js前端:创建一个 EventSource 对象,指定一个 GET 请求的 URL 来接收 SSE 事件

// 构建请求URL
const url = `/api/test`;// 创建一个新的 EventSource 对象,用于接受 SSE 事件
const eventSource = new EventSource(url);

Js前端:通过 EventSource 对象监听 onmessage 事件

// 当接收到新的 SSE 事件时,触发 onmessage 事件处理程序,然后在里面可以解析接收到的 JSON 数据// 监听 SSE 消息eventSource.onmessage = function (event) {try {// 解析 JSON 格式的消息const data = JSON.parse(event.data);// 根据数据处理逻辑...}} catch (e) {console.log(e);}};

Js前端:通过 EventSource 对象监听 onerror 事件

// 当发生错误时(例如网络问题或服务器关闭连接),触发 onerror 事件处理程序// 监听 SSE 错误事件eventSource.onerror = function (error) {console.log(error);eventSource.close(); // 关闭 EventSource 连接};

Java后端:发送SSE事件,将数据推送到前端(可以发送后再发送,发了再发,不用关闭连接)

// 发送 SSE 事件,将获取结果发送给前端
const message = "Hello World"
emitter.send(SseEmitter.event().data(message));

Java后端:如果不需要发送了,就关闭连接

// 调用下面方法,会发送一个特殊的 end-of-stream 字节序列通知客户端连接已关闭
emitter.complete()

Java后端:如果在处理过程中发生异常,后端可以调用 emitter.completeWithError() 方法,这会发送一个错误事件给前端,并关闭连接

emitter.completeWithError(new Exception('出错了'))

Js前端:浏览器在接收到 emitter.complete() 发送的特殊字节序列后,会自动将 EventSourcereadyState 设置为 CLOSED(值为 2),并关闭连接。

Js前端:当 EventSource 对象检测到错误时(例如网络问题、服务器关闭连接等),会触发 onerror 事件,我们可以在里面输入日志并关闭连接。通过这种方式,让前端可以有效地管理和维护 SSE 连接,确保在各种情况下都能正确处理错误并关闭连接。

// 监听 SSE 错误事件eventSource.onerror = function (error) {console.log(error);eventSource.close(); // 关闭 EventSource 连接};
http://www.lryc.cn/news/2386735.html

相关文章:

  • 格恩朗管段超声波流量计:流量测量先锋
  • 重构开发范式!飞算JavaAI革新Spring Cloud分布式系统开发
  • 图论 判断是否有环
  • (请关注)Oracle性能调优、优化总结调优参考直接应用,性能提升实用案例
  • EasyDarwin的配置与使用
  • PostgreSQL日志管理完整方案(AI)
  • 【Android】基于SurfaceControlViewHost实现跨进程渲染
  • vue+ThreeJs 创造自动选择的甜甜圈(圆环)
  • 能说一下JVM的内存区域吗
  • 东方仙盟_灵颜妙手——表单样式——仙盟创梦IDE
  • 输入一串字符,统计其中字母的个数
  • 进程IO之 进程
  • OpenGL Chan视频学习-5 Vertex Attributes and Layouts in OpenGL
  • ESP32学习笔记_Peripherals(3)——ADC
  • QT学习一
  • 黑马点评Reids重点详解(Reids使用重点)
  • 小米2025年校招笔试真题手撕(一)
  • 《软件工程》第 11 章 - 结构化软件开发
  • MongoDB基础知识(浅显)
  • Neo4j(三) - 使用Java操作Neo4j详解
  • MPI实现大数据Ring Broadcast逻辑
  • 蓝桥杯3503 更小的数
  • 高并发下使用防重表做防重案例
  • 算法-全排列
  • 最好用的wordpress外贸主题
  • 2025 河北ICPC( D. 金泰园(二分)-- C.年少的誓约(公式转化))
  • mongodb语法$vlookup性能分析
  • 晶圆隐裂检测提高半导体行业效率
  • 临床试验中的独立数据监查委员会
  • 在 LangChain 中集成 Mem0 记忆系统教程