使用 SSE 建立 servlet 和客户端 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

介绍

Server-Sent Events (SSE) 是一种基于 HTTP 的轻量级协议，用于向客户端推送实时数据。它通过建立长连接，使服务器能够实时向客户端发送消息，而不需要客户端不断地向服务器发送请求。SSE 协议通常用于实时通知、实时聊天、实时数据更新等场景。

本文将介绍如何使用 SSE 建立 servlet 和客户端 Web 应用程序，包括如何实现 SSE 服务器端和客户端，以及如何在客户端接收服务器端推送的实时数据。

实现 SSE 服务器端

在服务器端，我们需要实现一个 servlet，用于建立 SSE 连接，并向客户端推送实时数据。以下是一个简单的 SSE servlet 实现例子：

@WebServlet("/sse")
public class SseServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();

        // 向客户端发送初始数据
        out.write("data: initial data\n\n");
        out.flush();

        // 模拟实时数据更新
        for (int i = 0; i < 10; i++) {
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            out.write("data: " + i + "\n\n");
            out.flush();
        }
    }
}

在上面的例子中，我们首先设置响应的 Content-Type 为 text/event-stream，这是 SSE 协议的标准 MIME 类型。然后我们通过 PrintWriter 向客户端发送实时数据，每条数据都以 "data: " 开头，以 "\n\n" 结尾。

这里我们模拟了实时数据更新的过程，每隔一秒钟向客户端发送一个数据。当客户端连接断开时，servlet 会自动关闭连接。

实现 SSE 客户端

在客户端，我们需要实现 JavaScript 代码，用于建立 SSE 连接，并接收服务器端推送的实时数据。以下是一个简单的 SSE 客户端实现例子：

var source = new EventSource('/sse');

source.onopen = function(event) {
    console.log('SSE connection opened.');
};

source.onmessage = function(event) {
    console.log('Received SSE event: ' + event.data);
};

source.onerror = function(event) {
    console.error('SSE error occurred.');
};

在上面的例子中，我们首先创建了一个 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