服务器发送事件 是一种新的 HTTP API,用于将事件从服务器推送到客户端。 与 websockets ,服务器发送的事件(简称 SSE)建立在 HTTP 协议之上,因此不需要 ws:// URL 或其他 npm 模块。服务器端事件也会 自动处理重新连接 ,因此如果连接丢失,您不必编写代码来重新连接。

入门

在客户端,您使用 EventSource连接到服务器端事件源,客户端很简单:只需指向 EventSource 类到 Express 路由 配置为处理 SSE 并 添加事件侦听

<html>
  <body>
    <div></div>

    <script type=text/javascript>
      const source = new EventSource(/events);

      source.addEventListener(message, message => {
        console.log(Got, message);

        // Display the event data in the `content` div
        document.querySelector(#content).innerHTML = event.data;
      });
    </script>
  </body>
</html>

Express 方面是棘手的部分。要支持 SSE,您需要设置 3 个标头,然后 使用 flushHeaders()

  • Cache-Control: no-cache
  • Content-Type: text/event-stream:所以客户端知道这个响应是一个 HTTP 流
  • Connection: keep-alive:所以 Node.js 知道保持 HTTP 套接字打开

一旦你调用 flushHeaders(),然后您可以 使用 res.write() 功能 res.write() 函数写入 HTTP 连接而不显式结束 HTTP 响应。 确保你 使用 res.send() 或者 res.end(),因为那些明确结束响应。

下面是一个独立的 Express 服务器的示例,它使用 /events 端点:

use strict;

const express = require(express);
const fs = require(fs);

run().catch(err => console.log(err));

async function run() {
  const app = express();

  app.get(/events, async function(req, res) {
    console.log(Got /events);
    res.set({
      Cache-Control: no-cache,
      Content-Type: text/event-stream,
      Connection: keep-alive
    });
    res.flushHeaders();

    // Tell the client to retry every 10 seconds if connectivity is lost
    res.write(retry: 10000\\n\\n);
    let count = 0;

    while (true) {
      await new Promise(resolve => setTimeout(resolve, 1000));

      console.log(Emit, ++count);
      // Emit an SSE that contains the current count as a string
      res.write(`data: ${count}\\n\\n`);
    }
  });

  const index = fs.readFileSync(./index.html, utf8);
  app.get(/, (req, res) => res.send(index));

  await app.listen(3000);
  console.log(Listening on port 3000);
}
© 版权声明
评论 抢沙发

请登录后发表评论