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

关于 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.xdnf.cn/news/653923.html

相关文章:

  • 07-后端Web实战(部门管理)
  • Prometheus、Exporter 和 Grafana:性能分析铁三角
  • 卷积神经网络(CNN)模型
  • 在 Spring Boot 项目中如何合理使用懒加载?
  • Anaconda 安装 PyTorch 的详细步骤(2025年最新版)
  • uniapp开发 H5端使用百度地图
  • Python 里没有接口,如何写设计模式
  • C语言| 拷贝传递(指针控制内存单元)
  • Hadoop常用端口号和配置文件
  • [yolov11改进系列]基于yolov11引入特征增强注意力机制ADNet的python源码+训练源码
  • ServletConfig 接口:Java Web ——补充
  • 使用 Kotlin 实现 Android 自定义 Lint 检查规则的步骤指南
  • Kotlin学习34-data数据类1
  • 【Java学习笔记】final关键字
  • 「Python教案」判断语句的使用
  • 《软件工程》第 13 章 - 软件维护
  • 密度矩阵重整化群——DMRG
  • 【GESP真题解析】第 9 集 GESP 二级 2023 年 9 月编程题 2:数字黑洞
  • 如何优化 Python 爬虫的速度
  • Python开发Excel批量写入工具:多文件独立配置与Tkinter界面设计
  • IP 网段
  • DeepSeek-V3-0526乍现
  • Vue2实现Office文档(docx、xlsx、pdf)在线预览
  • PDF电子发票数据提取至Excel
  • 【计算机网络】IP 协议深度解析:从基础到实战
  • LeetCode#第58题:最后一个单词的长度
  • Python网络编程深度解析
  • 游戏引擎学习第312天:跨实体手动排序
  • YOLOv1 详解:单阶段目标检测算法的里程碑
  • SAP ABAP VK11/VK12 创建销售物料价格(附源码)