介绍
SSE(Server-Sent Event)是一种服务器向客户端推送事件的协议,使用 SSE 可以实现实时更新网页的功能,而不需要客户端轮询服务器。在前端领域中,SSE 被广泛应用于实时通信、实时更新等场景中。
本文将介绍如何在 Java Web 应用程序中使用 SSE,具体包括如何在服务端实现 SSE,如何在客户端与 SSE 进行通信等方面。
服务端实现 SSE
在 Java Web 应用程序中实现 SSE,首先要设置返回类型为 text/event-stream
,表示这是一个 SSE 响应。然后,服务端需要实现一个 Servlet 或一个 SpringMVC 控制器,用于响应 SSE 请求。
以 SpringMVC 控制器为例,示例如下:
-- -------------------- ---- ------- ----------- ------ ----- ------------- - ------------------- ------ ---------------------------- ----- - ------------ ----------- - ------------------------------------ -------- -- ------- - --- ------ - ------- --------- -- --- ---- ----- ------ ------------------- ------------------------ ----------- ----------------------- ---------------------------------- ------------------- - -
上述代码中,@GetMapping("/sse")
表示映射到 /sse
路径的 GET 请求。Flux.interval(Duration.ofSeconds(1))
表示每间隔 1 秒发送一个事件。map(seq -> "data:" + new Date() + "\n\n")
表示将当前时间作为事件数据,放到 data:
字段中返回。
take(5)
表示只发送 5 条事件。最后通过 ResponseEntity
将 eventStream
作为 SSE 响应返回。
服务器端的 SSE 这里基本完成了,接下来我们看如何在客户端中接收 SSE 事件。
客户端与 SSE 通信
在客户端中,可以通过 JavaScript 中的 EventSource 对象来监听 SSE 事件。创建一个 EventSource 对象只需要指定 SSE 服务端的 URL 即可。当 SSE 服务端发送一个事件时,EventSource 对象将自动收到事件并触发 onmessage
事件,事件的 data
属性则表示事件数据。
示例代码如下:
const source = new EventSource('/sse'); source.onmessage = (event) => { console.log(event) console.log(event.data) // handle event data here };
上述代码中,new EventSource('/sse')
表示创建一个 EventSource 对象,指定 SSE 服务端的 URL 为 /sse
。source.onmessage
表示监听 SSE 事件,并在事件发生时处理事件数据。
总结
本文介绍了如何在 Java Web 应用程序中使用 SSE,包括服务端实现 SSE 和客户端与 SSE 通信两个方面。SSE 虽然在前端领域中应用广泛,但在 Java Web 应用程序中同样有着很大的应用场景。希望本文能帮助读者了解和应用 SSE 技术。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64660419968c7c53b06b0bca