HTML5 SSE|程序员教程

HTML5 SSE

创建服务端事件源

首先，我们需要创建一个服务端事件源。在本示例中，我们假设您正在使用 Node.js 和 Express 框架。首先安装 express：

                npm install express

然后，创建一个名为 server.js 的文件，并添加以下内容以设置 SSE 事件源：

                const express = require("express");
                const app = express();

                app.get("/events", (req, res) => {
                res.setHeader("Content-Type", "text/event-stream");
                res.setHeader("Cache-Control", "no-cache");
                res.setHeader("Connection", "keep-alive");

                setInterval(() => {
                    const message = `data: ${new Date().toLocaleTimeString()}\n\n`;
                    res.write(message);
                }, 1000);
                });

                app.listen(3000, () => {
                console.log("Listening on port 3000...");
                });

在这个示例中，我们创建了一个 /events 路径用作 SSE 事件源。我们定义了适当的响应头，并使用 setInterval() 每秒发送当前时间。

创建客户端

接下来，创建一个 HTML 页面并使用 JavaScript 连接到服务端事件源。在这个示例中，我们将创建一个名为 index.html 的文件，并在其中添加以下内容：

                <!DOCTYPE html>
                <html>
                <head>
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                    const eventSource = new EventSource("/events");

                    eventSource.onmessage = function (event) {
                        const timeDisplay = document.getElementById("time");
                        timeDisplay.textContent = event.data;
                    };
                    });
                </script>
                </head>
                <body>
                <h1>Server Time: <span id="time"></span></h1>
                </body>
                </html>

在这个示例中，我们首先创建了一个名为 time 的 HTML 元素，用于显示服务器发送的时间数据。接下来，在 JavaScript 中，我们创建了一个新的 EventSource 对象并连接到 /events 路径。当收到服务器端消息时，我们更新 time 元素的文本内容。

运行示例

现在，我们已经创建了服务端和客户端代码，可以运行这个示例了。首先，在命令行中启动服务器：

                node server.js

您将看到输出 "Listening on port 3000..."，表示服务器已成功启动。

接下来，在浏览器中打开 index.html 文件。您应该会看到一个标题，其中包含从服务器每秒更新的当前时间。

总结

通过本教程，您已经学会了如何使用 HTML5 的 SSE 功能实现服务器端向客户端的单向通信。这种技术相较于 WebSocket 更简单，但同时也具有一定的局限性，例如它们只支持文本数据，不支持二进制数据。此外，SSE只能实现单向通信，如果需要实现双向通信，则需考虑其他技术，如 WebSocket。尽管如此，对于许多场景而言，SSE 仍然是一种非常实用且易于实现的解决方案。