HTML5 Server-Sent Events (SSE)：单向实时数据推送 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML5 Server-Sent Events (SSE)：给你的网页装上“顺风耳”，听听服务器在“嘀咕”啥

想象一下，你坐在电脑前，打开一个股票交易网站，看着那跳动的数字，心里七上八下。股票价格每秒都在变化，网站必须实时更新，才能让你及时做出判断。如果每次价格变动，你的浏览器都要向服务器发出请求，那服务器肯定会崩溃，你的网速也会慢到让你怀疑人生。

这就是Server-Sent Events (SSE) 闪亮登场的地方。它可以让服务器像个唠叨的老朋友一样，主动向你的浏览器“嘀咕”一些信息，而你的浏览器只需要竖起耳朵，静静地听着就行，不用一遍遍地追问。简单来说， SSE 是一种单向的实时数据推送技术，服务器可以主动向客户端发送数据，而客户端只能被动接收，不能向服务器发送数据。

SSE vs WebSocket：一曲单簧管，一支交响乐

等等，你可能会问，这听起来有点像 WebSocket 啊？没错，它们都是实时通信技术，但它们的应用场景和复杂度却大相径庭。

你可以把 SSE 想象成一支单簧管，简单、专注，只负责把服务器的消息传递给客户端。而 WebSocket 则是一支交响乐，复杂、强大，可以实现双向的实时通信，客户端和服务器可以随时互相交流。

如果你只需要服务器向客户端推送数据，比如股票价格、新闻动态、聊天室消息等等，那么 SSE 就足够了。它实现简单，开销小，就像一个尽职尽责的“顺风耳”，帮你实时监听服务器的动态。

但如果你需要客户端和服务器进行频繁的双向交互，比如在线游戏、视频会议等等，那么 WebSocket 才是更好的选择。它功能强大，可以实现更复杂的实时通信场景，就像一个畅所欲言的“对话筒”，让你可以随时和服务器进行交流。

“顺风耳”的秘密：Event Stream

SSE 的核心在于 Event Stream，它是一种基于 HTTP 的文本协议，服务器通过它可以向客户端推送一系列的事件。每个事件都包含以下几个字段：

event: 事件类型，可以自定义，比如 message、update、error 等等。
data: 事件数据，可以是任何文本格式，比如 JSON、XML、纯文本等等。
id: 事件 ID，用于标识事件的唯一性，可以用于断线重连。
retry: 重连间隔时间，单位是毫秒，用于设置客户端断线后自动重连的时间间隔。

服务器会将这些字段按照一定的格式组织起来，然后通过 HTTP 连接发送给客户端。客户端收到数据后，会解析这些字段，然后根据事件类型和数据进行相应的处理。

想象一下，服务器就像一个邮递员，它会把一个个装有不同信息的信封（事件）送到你的家门口（客户端）。你只需要打开信封，看看里面写了什么，然后根据里面的内容做出相应的反应。

“顺风耳”的搭建：代码示例

好了，理论知识讲了这么多，现在让我们来动手搭建一个简单的 SSE 应用，看看如何让你的网页拥有一个“顺风耳”。

服务器端 (Node.js):

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  let counter = 0;
  setInterval(() => {
    counter++;
    const data = `data: 当前计数器：${counter}nn`;
    res.write(data);
  }, 1000);
}).listen(8080, () => {
  console.log('SSE 服务器正在监听 8080 端口');
});

这段代码创建了一个简单的 HTTP 服务器，它会每隔 1 秒向客户端推送一个包含当前计数器值的事件。注意以下几点：

Content-Type 必须设置为 text/event-stream，这是 SSE 的标准 MIME 类型。
Cache-Control 必须设置为 no-cache，防止浏览器缓存 SSE 连接。
Connection 必须设置为 keep-alive，保持 HTTP 连接的持久性。
每个事件必须以 data: 开头，以 nn 结尾。

客户端 (HTML/JavaScript):

<!DOCTYPE html>
<html>
<head>
  <title>SSE 示例</title>
</head>
<body>
  <h1>SSE 示例</h1>
  <div id="output"></div>

  <script>
    const eventSource = new EventSource('http://localhost:8080');

    eventSource.onmessage = (event) => {
      const output = document.getElementById('output');
      output.innerHTML += `<p>${event.data}</p>`;
    };

    eventSource.onerror = (error) => {
      console.error('SSE 错误:', error);
    };
  </script>
</body>
</html>

这段代码创建了一个简单的 HTML 页面，它会连接到服务器的 SSE 端点，并实时显示服务器推送的计数器值。注意以下几点：

使用 EventSource 对象创建一个 SSE 连接。
onmessage 事件处理函数用于处理服务器推送的事件。
onerror 事件处理函数用于处理 SSE 连接错误。

打开你的浏览器，访问这个 HTML 页面，你就可以看到计数器值在实时更新了。恭喜你，你已经成功搭建了一个简单的 SSE 应用！

“顺风耳”的进阶：更多用法

除了推送简单的计数器值之外，SSE 还可以用于推送更复杂的数据，比如 JSON 数据、自定义事件等等。

推送 JSON 数据:

服务器端 (Node.js):

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const data = {
      temperature: Math.random() * 30,
      humidity: Math.random() * 100
    };
    const jsonData = `data: ${JSON.stringify(data)}nn`;
    res.write(jsonData);
  }, 1000);
}).listen(8080, () => {
  console.log('SSE 服务器正在监听 8080 端口');
});

客户端 (HTML/JavaScript):

<!DOCTYPE html>
<html>
<head>
  <title>SSE 示例</title>
</head>
<body>
  <h1>SSE 示例</h1>
  <div id="output"></div>

  <script>
    const eventSource = new EventSource('http://localhost:8080');

    eventSource.onmessage = (event) => {
      const output = document.getElementById('output');
      const data = JSON.parse(event.data);
      output.innerHTML = `<p>温度：${data.temperature.toFixed(2)}°C，湿度：${data.humidity.toFixed(2)}%</p>`;
    };

    eventSource.onerror = (error) => {
      console.error('SSE 错误:', error);
    };
  </script>
</body>
</html>

自定义事件:

服务器端 (Node.js):

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const eventType = Math.random() > 0.5 ? 'message' : 'update';
    const data = `data: 事件类型：${eventType}nn`;
    const event = `event: ${eventType}n`;
    res.write(event);
    res.write(data);
  }, 1000);
}).listen(8080, () => {
  console.log('SSE 服务器正在监听 8080 端口');
});

客户端 (HTML/JavaScript):

<!DOCTYPE html>
<html>
<head>
  <title>SSE 示例</title>
</head>
<body>
  <h1>SSE 示例</h1>
  <div id="output"></div>

  <script>
    const eventSource = new EventSource('http://localhost:8080');

    eventSource.addEventListener('message', (event) => {
      const output = document.getElementById('output');
      output.innerHTML += `<p>收到 message 事件：${event.data}</p>`;
    });

    eventSource.addEventListener('update', (event) => {
      const output = document.getElementById('output');
      output.innerHTML += `<p>收到 update 事件：${event.data}</p>`;
    });

    eventSource.onerror = (error) => {
      console.error('SSE 错误:', error);
    };
  </script>
</body>
</html>

“顺风耳”的局限性：单向通信的无奈

虽然 SSE 功能强大，但它也有一些局限性。最主要的局限性就是它是单向通信的，客户端只能被动接收服务器推送的数据，不能向服务器发送数据。

这在某些场景下可能会成为一个问题，比如聊天室应用，客户端需要向服务器发送消息。在这种情况下，WebSocket 才是更好的选择。

“顺风耳”的未来：拥抱更美好的实时世界

总的来说，HTML5 Server-Sent Events (SSE) 是一种简单、高效的单向实时数据推送技术。它可以让你的网页拥有一个“顺风耳”，实时监听服务器的动态，为用户提供更流畅、更实时的体验。

虽然它有一些局限性，但它在很多场景下仍然是一个非常有用的工具。随着 Web 技术的不断发展，相信 SSE 会在未来的实时应用中发挥更大的作用。

希望这篇文章能让你对 SSE 有更深入的了解，并能在你的项目中灵活运用它。记住，给你的网页装上一个“顺风耳”，让它听听服务器在“嘀咕”啥，你的用户一定会感谢你的！

HTML5 Server-Sent Events (SSE)：给你的网页装上“顺风耳”，听听服务器在“嘀咕”啥

发表回复 取消回复

发表回复取消回复