Server-Sent Events 实现服务器端消费已经发送过来的事件-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-Sent Events？

Server-Sent Events（SSE）是一种通过 HTTP 协议实现服务器端向客户端推送事件的技术。它允许服务器端向客户端发送一系列的消息，而客户端可以通过监听这些消息来获取实时的数据更新。

SSE 是一种基于 HTTP 的协议，因此它可以使用普通的 HTTP 服务器来实现。与 WebSocket 不同，SSE 不需要建立持久的连接，而是使用单向的连接，这使得 SSE 更容易实现和部署。

SSE 的优点

SSE 具有以下优点：

SSE 不需要建立持久连接，因此可以使用普通的 HTTP 服务器来实现，不需要额外的服务器端支持。
SSE 使用简单的文本协议，易于理解和实现。
SSE 允许服务器端向客户端推送实时的数据更新，使得客户端能够更快地响应数据变化。

SSE 的工作原理

SSE 的工作原理如下：

客户端向服务器端发送一个 HTTP 请求，请求中包含一个特殊的头部 Accept: text/event-stream，以告诉服务器端这个请求是用来接收 SSE 的。
服务器端返回一个 HTTP 响应，响应中包含一个特殊的头部 Content-Type: text/event-stream，以告诉客户端这个响应是 SSE 的。
服务器端向客户端推送一系列的事件，每个事件都是一个文本消息，格式如下：

event: <event-name>
data: <event-data>

其中，event-name 表示事件的名称，event-data 表示事件的数据。每个事件之间用一个空行隔开。

客户端通过监听服务器端发送过来的事件，来获取实时的数据更新。

SSE 的示例代码

下面是一个使用 SSE 的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SSE Demo</title>
</head>
<body>
    <h1>SSE Demo</h1>
    <div id="message"></div>
    <script>
        // 创建一个 EventSource 对象，指定 SSE 的 URL
        var source = new EventSource('/sse');

        // 监听 message 事件
        source.addEventListener('message', function(event) {
            // 将事件的数据显示在页面上
            document.getElementById('message').innerHTML += event.data + '<br>';
        });
    </script>
</body>
</html>

下面是一个使用 Node.js 实现 SSE 的服务器端代码：

var http = require('http');

// 创建一个 HTTP 服务器
var server = http.createServer(function(req, res) {
    // 如果请求的 URL 是 /sse，就返回 SSE 数据
    if (req.url === '/sse') {
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive'
        });

        // 每隔一秒钟向客户端推送一个事件
        setInterval(function() {
            var data = new Date().toLocaleTimeString();
            res.write('event: message\n');
            res.write('data: ' + data + '\n\n');
        }, 1000);
    } else {
        // 否则返回普通的 HTML 页面
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end('<html><head><title>SSE Demo</title></head><body><h1>SSE Demo</h1><script src="/sse.js"></script></body></html>');
    }
});

// 启动服务器，监听在 8080 端口
server.listen(8080, function() {
    console.log('Server is running at http://localhost:8080/');
});

总结

Server-Sent Events 是一种通过 HTTP 协议实现服务器端向客户端推送事件的技术。它使用简单的文本协议，易于理解和实现，同时也具有快速响应数据更新的优点。在实际开发中，SSE 可以用于实现实时的数据推送、聊天室、在线游戏等应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ce39eeb4cecbf2d2bacaf