【node-express-sse】Server Sent Event 单向推送消息,实现站内信功能

sse

  • 实现效果
  • 代码
    • 前端
    • 后端

实现效果

服务端返回的 Content-Type 是 text/event-stream,这是一个流,可以多次返回内容。
Sever Sent Event 就是通过这种消息来随时推送数据。
AIGC,如 ChatGPT 打字机消息回复实现原理 等也是使用sse实现。
还有站内信,或者一些日志推送,相较于繁重的 WebSockets,SSE 无疑是 H5 简单即时数据更新的轻量级代替方案。

源码:https://github.com/thinkasany/nestjs-course-code/tree/master/sse

【node-express-sse】Server Sent Event 单向推送消息,实现站内信功能_第1张图片

代码

前端




  
  
  React App


  

后端

const { exec } = require("child_process");
const { Observable } = require("rxjs");

const getLogChange = async (req, res) => {
  const childProcess = exec("tail -f ./log");

  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  const observer = msg => {
    res.write(`data: ${JSON.stringify({ msg: msg.toString() })}\n\n`);
  };

  const observable = new Observable(obs => {
    childProcess.stdout.on("data", msg => {
      obs.next(msg);
    });
  });

  const subscription = observable.subscribe(observer);

  // 当连接断开时,停止子进程和 Observable
  req.on("close", () => {
    childProcess.kill();
    subscription.unsubscribe();
  });
};

module.exports = {
  getLogChange
};

你可能感兴趣的:(express,sse)