Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示

Content-Type: text/event-stream,utf-8
Cache-Control: no-cache
Connection: keep-alive

field: value\n
field: value\r\n

data     // 数据内容
event    // 事件
id       // 数据标识符用id字段表示，相当于每一条数据的编号
retry    // 重试,服务器可以用retry字段，指定浏览器重新发起连接的时间间隔
:        //冒号开头是比较特殊的，表示注释

# 一个事件一行
data: message\n\n
data: message2\n\n


# 一个事件多行
data: {\n
data: "name": "zhangsan",\n
data: "age", 25\n
data: }\n\n

# 自定义事件
event: foo\n   // 自定义事件，名称 foo，触发客户端的foo监听事件
data: a foo event\n\n // 内容

data: an unnamed event\n\n // 默认事件，未指定事件名称，触发客户端 onmessage 事件

event: bar\n   // 自定义时间，名称 bar，触发客户端bar监听事件
data: a bar event\n\n // 内容

id: eef0128b-48b9-44f7-bbc6-9cc90d32ac4f\n
data: message\n\n

retry: 10000\n

const http = require('http');

const server = http.createServer((req, res) => {
    // 对于SSE请求，需要设置正确的Content-Type和Cache-Control
    // 设置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',
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': '*'
    });

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

    // 当客户端断开连接时，清理资源
    req.on('close', () => {
        clearInterval(); // 清除定时器
        res.end(); // 结束响应
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

function supportsSSE() {
  return !!window.EventSource;
}

//创建一个EventSource对象，用于从sse.php页面接收事件
const evtSource = new EventSource("http://localhost:3000");

# 方式一:
source.onopen = function(event) {
  // handle open event
};

## 方式二：
source.addEventListener("open", function(event) {
  // handle open event
}, false);

# 方式一:
source.onmessage = function(event) {
  var data = event.data;
  var lastEventId = event.lastEventId;
  // handle message
};

## 方式二：
source.addEventListener("message", function(event) { 
  var data = event.data;
  var lastEventId = event.lastEventId;
  // handle message }, false);

source.addEventListener('foo', function (event) {
  var data = event.data;
  // handle message
}, false);

# 方式一:
source.onerror = function(event) {
  // handle error event
};

## 方式二：
source.addEventListener("error", function(event) {
  // handle error event
}, false);

source.close()

// 先判断当前浏览器是否支持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')
}

proxy_buffering off

x-accel-buffering: no