介绍
Server-Sent Events (SSE) 是一种基于 HTTP 的轻量级协议，用于向客户端推送实时数据。它通过建立长连接，使服务器能够实时向客户端发送消息，而不需要客户端不断地向服务器发送请求。SSE 协议通常用于实时通知、实时聊天、实时数据更新等场景。
本文将介绍如何使用 SSE 建立 servlet 和客户端 Web 应用程序，包括如何实现 SSE 服务器端和客户端，以及如何在客户端接收服务器端推送的实时数据。
实现 SSE 服务器端
在服务器端，我们需要实现一个 servlet，用于建立 SSE 连接，并向客户端推送实时数据。以下是一个简单的 SSE servlet 实现例子：
-- -------------------- ---- -------
-------------------
------ ----- ---------- ------- ----------- -
------- ------ ----- ---- ---------------- - ---
---------
--------- ---- ------------------------ -------- ------------------- --------- ------ ----------------- ----------- -
---------------------------------------------
---------------------------------------
----------- --- - ---------------------
-- ----------
---------------- ------- -----------
------------
-- --------
--- ---- - - -- - - --- ---- -
--- -
-------------------
- ----- --------------------- -- -
--------------------
-
---------------- - - - - --------
------------
-
-
-在上面的例子中，我们首先设置响应的 Content-Type 为 text/event-stream，这是 SSE 协议的标准 MIME 类型。然后我们通过 PrintWriter 向客户端发送实时数据，每条数据都以 "data: " 开头，以 "\n\n" 结尾。
这里我们模拟了实时数据更新的过程，每隔一秒钟向客户端发送一个数据。当客户端连接断开时，servlet 会自动关闭连接。
实现 SSE 客户端
在客户端，我们需要实现 JavaScript 代码，用于建立 SSE 连接，并接收服务器端推送的实时数据。以下是一个简单的 SSE 客户端实现例子：
-- -------------------- ---- -------
--- ------ - --- --------------------
------------- - --------------- -
---------------- ---------- ----------
--
---------------- - --------------- -
--------------------- --- ------ - - ------------
--
-------------- - --------------- -
------------------ ----- ------------
--在上面的例子中，我们首先创建了一个 EventSource 对象，指定 SSE 服务器端的 URL。然后我们监听 onopen、onmessage 和 onerror 事件。
当 SSE 连接成功建立时，onopen 事件会被触发。当服务器端向客户端发送实时数据时，onmessage 事件会被触发，我们可以在事件处理函数中处理接收到的数据。当 SSE 连接出现错误时，onerror 事件会被触发。
总结
本文介绍了如何使用 SSE 建立 servlet 和客户端 Web 应用程序，包括如何实现 SSE 服务器端和客户端，以及如何在客户端接收服务器端推送的实时数据。使用 SSE 可以轻松地实现实时通知、实时聊天、实时数据更新等功能，为 Web 应用程序提供更好的用户体验。
完整示例代码：https://github.com/assistant-ai/sse-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c38c3aadd4f0e0ffde87d7