HTML SSE 事件

简介

SSE (Server-Sent Events) 是一种用于创建由服务器到客户端的单向消息传递的技术。它通过 HTTP 协议实现，允许服务器将更新发送给订阅者（浏览器）。这使得 Web 应用程序能够实时地更新内容，而不需要重复请求服务器。

开始之前

基本的 HTML、CSS 和 JavaScript 知识。
一个支持 SSE 的现代浏览器（大多数主流浏览器都支持）。
一个文本编辑器或集成开发环境（IDE）来编写和测试代码。

创建 SSE 服务器

首先，您需要在服务器端设置一个 SSE 端点。这可以通过几种编程语言实现，包括 Python、Node.js 和 PHP。为了简单起见，我们将使用 Node.js 创建一个基本的 Express 服务器：

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

app.get('/events', function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    setInterval(() => {
        res.write(`data: The server time is ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
});

app.listen(3000, function(){
    console.log('Listening on port 3000');
});

这将在 /events 端点上创建一个 SSE 服务器，每秒发送一次当前的服务器时间。

连接到 SSE 服务器

现在，我们需要在客户端连接到这个 SSE 服务器并处理传入的事件：

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        const eventSource = new EventSource('http://localhost:3000/events');

        eventSource.onmessage = function(event) {
            document.getElementById('result').innerHTML += `${event.data}<br>`;
        };
    </script>
</body>
</html>

这将创建一个新的 EventSource 对象，该对象连接到我们之前创建的 SSE 服务器。每当服务器发送一条消息时，onmessage 事件处理程序就会被调用，并将消息数据添加到 HTML 文档中。

结论

这个简单的教程介绍了如何使用 SSE 在服务器和客户端之间实时地发送更新。SSE 是一种强大的技术，可以使 Web 应用程序更加交互性和实时性。