当前位置: 首页 > 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 连接};

相关文章:

  • DJI上云API官方demo学习
  • Java如何防止工具类被实例化
  • 三大微调技术对比:Prompt/Prefix/P-Tuning
  • 摩尔线程 MUSA 软件开发集成套件
  • 第12次05: 用户中心-用户基本信息
  • C++虚函数和纯虚函数
  • 强化学习(十一)探索与利用
  • FastAPI 中间件
  • 关于模型记忆力的实现方式
  • 令牌桶算法——流量控制和限流
  • 【AI News | 20250526】每日AI进展
  • SpringAI(GA):Tool工具整合—快速上手
  • 如何实现 C/C++ 与 Python 的通信
  • 云化全场景+AI智算双擎驱动,打造高教数智化转型新范式,麒麟信安闪耀第63届高等教育博览会!
  • 25盘古石初赛wp(部分)
  • 回调函数的使用
  • Android磁盘占用优化全解析:从监控到治理的存储效率革命
  • [特殊字符]《Qt实战:基于QCustomPlot的装药燃面动态曲线绘制(附右键菜单/样式美化/完整源码)》
  • 基于GitHub Actions+SSH+PM2的Node.js自动化部署全流程指南
  • 华为云Flexus+DeepSeek征文 | 体验简单高效的模型推理开通之旅
  • 学电子商务后悔死了/快手seo软件下载
  • 真人性做爰 video网站/上海品牌推广公司
  • 变性人做欲网站/站长工具在线查询
  • 微信网站需要备案吗/by网站域名
  • wordpress 文章锚点/手机一键优化
  • 做网站用什么框架好/手游推广去哪里找客源