使用 Express 由服务器发送事件-技术鸭(jishuya.cn)

服务器发送事件是一种新的 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);
}


        © 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
技术文章

使用 Express 由服务器发送事件

入门

请登录后发表评论