理解 SSE：使用 HTML5 方式推送实时数据-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，实时更新是越来越重要的需求。Server-Sent Events (SSE) 是一种支持服务器在客户端浏览器请求之后主动推送数据的技术。相对于 Websocket，SSE 更加轻量级，且更加容易集成到现有的 Web 应用中。

什么是 SSE

SSE 是一种为 Web 应用实现 Server Push 技术的标准，在 HTML5 标准中定义。SSE 可以让服务器主动推送数据到客户端浏览器，而不是在客户端浏览器执行轮询请求。

SSE 与 Websocket 不同，SSE 是 HTTP 协议的扩展，使用 HTTP 的长连接机制实现消息推送，而 Websocket 是一种新的协议，可以实现全双工的双向通讯。相对于 Websocket，SSE 更加轻量级，且更加容易集成到现有的 Web 应用中。

SSE 的优点

使用 SSE 有如下优点：

与 Websocket 相比，SSE 更加轻量级和容易实现。
SSE 不需要像 Websocket 那样维护多个连接，对服务器的压力更小。
SSE 支持自定义消息，可以实现更加灵活的消息传递方式。
SSE 支持跨域通讯，可以实现页面与不同来源的服务器的通讯。

实现 SSE

在客户端，我们可以使用 JavaScript EventSource 对象与服务器进行通讯：

const eventSource = new EventSource('/streaming');

eventSource.onmessage = function(event) {
  console.log(event.data);
};

在服务器端，则需要发送 text/event-stream 类型的数据，数据格式如下：

event: message
data: hello, world!

event: custom-event
data: {"foo": "bar"}

data: this is a message without an event field

其中，每个消息以空行分割，每个消息可以有如下字段：

event: 可选，消息类型
data: 必选，消息内容
id: 可选，消息 ID
retry: 可选，指定客户端重新连接的时间间隔

当服务器端发送消息时，客户端会触发 EventSource 对象的 onmessage 方法。客户端可以通过 event.type 获取消息类型，通过 event.data 获取消息内容。

示例代码

客户端：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SSE Example</title>
  </head>
  <body>
    <ul id="messages"></ul>
    
    <script>
      const eventSource = new EventSource('/sse');
      
      eventSource.onmessage = function(event) {
        const messages = document.getElementById('messages');
        const li = document.createElement('li');
        li.textContent = event.data;
        messages.appendChild(li);
      };
    </script>
  </body>
</html>

服务器端（使用 Node.js 和 Express）：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/sse', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  
  setInterval(function() {
    const data = new Date().toTimeString();
    res.write(`data: ${data}\n\n`);
  }, 1000);
});

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

在这个示例中，客户端会连接到 /sse 路径，服务器端每秒钟会向客户端推送一个包含当前时间的消息。运行这个示例后，我们可以在浏览器的控制台中看到服务器端推送的消息。

总结

SSE 是一种实现 Server Push 技术的方式，可以让服务器端主动推送数据到客户端。相对于 Websocket，SSE 更加轻量级和容易实现，适用于现有的 Web 应用中。通过上述的示例代码，我们可以更好地理解 SSE 的工作原理，并在项目中使用 SSE 实现实时数据更新的需求。

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