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()
发送的特殊字节序列后,会自动将 EventSource
的 readyState
设置为 CLOSED
(值为 2),并关闭连接。
Js前端:当 EventSource
对象检测到错误时(例如网络问题、服务器关闭连接等),会触发 onerror
事件,我们可以在里面输入日志并关闭连接。通过这种方式,让前端可以有效地管理和维护 SSE 连接,确保在各种情况下都能正确处理错误并关闭连接。
// 监听 SSE 错误事件eventSource.onerror = function (error) {console.log(error);eventSource.close(); // 关闭 EventSource 连接};