Node.js 和 Server-sent events

m0_63656276

已于 2023-08-18 14:00:43 修改

阅读量188

点赞数

分类专栏： Node 文章标签： node.js github

于 2023-08-18 13:55:14 首次发布

本文链接：https://blog.csdn.net/m0_63656276/article/details/132360315

版权

Node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了Server-SentEvents(SSE)的工作原理，包括如何在Node.js服务器端使用Express设置事件流，以及在客户端如何通过EventSource接收和处理实时数据。重点在于如何在Web应用中实现数据的无请求推送。

摘要由CSDN通过智能技术生成

SSE（Server-Sent Events）是一种基于HTTP协议的服务器推送技术，它允许服务器向客户端推送数据，而无需客户端发起请求。SSE最初被定义为HTML5规范的一部分，其主要用途是在Web应用程序中实现实时数据更新和事件通知功能。

服务端

var router = express.Router();
router.get('/test/server-sent-events', (req, res) => {

  // 设置Content-Type头为text/event-stream，这是SSE所需的。
  // 设置Cache-Control头为no-cache，这将防止客户端缓存事件流。
  // 使用Connection: keep-alive，这将保持连接打开，直到服务器明确地关闭连接。
  res.writeHead(200, {
    "Content-Type":"text/event-stream", 
    "Cache-Control":"no-cache", 
    "Connection":"keep-alive"
  });
  
  // 设置推送
  setInterval(() => {
    const data = {
      message: `Current time is ${new Date().toLocaleTimeString()}`
    };

    // 使用res.write()方法将新的数据发送到客户端。
    //我们在数据前添加了data:前缀，这是SSE事件流所需的。
    //最后，我们在每个事件之间添加了一个空行\n\n，这是SSE事件流规范要求的，以便客户端可以正确解析事件流
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    
  }, 1000);
})

客户端

// 先判断当前浏览器是否支持EventSource事件
if (typeof(EventSource) !== "undefined") {
  // 用JavaScript创建了一个新的EventSource对象，它将从服务器端的/test/server-sent-events路由接收事件流
  const source = new EventSource('/test/server-sent-events', {
    withCredentials: true
  });
  
  每当服务器发送新的事件时，source.onmessage事件处理程序将运行，我们将事件数据解析为JSON对象
  source.onmessage = (event) => {
     const data = JSON.parse(event.data)
     console.log(data)
  }
  
  // close方法用于关闭 SSE 连接。
  source.close();

} else {
  console.log('不支持 EventSource')
}