@microsoft/fetch-event-source EventSource 使用说明

参数说明

参数名	类型	描述
url	string	要连接的SSE服务的URL。
headers	Record<string, string>	一个包含自定义请求头的对象。用于向服务器发送额外的信息，如认证令牌。
method	string（默认为'GET'）	HTTP请求方法。虽然SSE通常只支持GET请求，但此参数可能允许模拟其他行为。
body	Blob、BufferSource、FormData、URLSearchParams、string	如果库支持，可以发送的请求体数据。但SSE通常不涉及请求体。
signal	AbortSignal	一个AbortSignal对象，可用于中止请求。通过AbortController创建。
onopen	(response: Response) => void	当连接成功打开时触发的回调函数。
onmessage	(event: MessageEvent) => void	当从服务器接收到新的事件时触发的回调函数。event.data包含事件数据。
onerror	(error: any) => void	当连接发生错误时触发的回调函数。
onclose	() => void	当连接关闭时触发的回调函数。
openWhenHidden	boolean	指示当页面退至后台时是否保持连接。默认为false。
withCredentials	boolean	指示跨站请求时是否携带认证信息（如cookies）。默认为false。
mode	'cors', 'no-cors', 'same-origin'	请求的模式。对于跨域请求，通常设置为'cors'。SSE通常不涉及此参数，但可能用于底层Fetch API。

服务器代码示例

const http = require('http');

const server = http.createServer((req, res) => {

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

  if (req.method === 'OPTIONS') {
    res.setHeader('Allow', 'GET, POST, PUT, DELETE, OPTIONS');
    res && res.sendStatus && res.sendStatus(200);
  }
  
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    let count = 0;

    let timer = setInterval(() => {
      count++;
      res.write(`data: ${Date.now()}\n\n`);

      if (count >= 5) {
        clearInterval(timer);
        res.end();
      }
    }, 1000); 
  } else {
    res.writeHead(404);
    res.end();
  }
});

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

前端代码示例

import { fetchEventSource } from '@microsoft/fetch-event-source'; // 注意：这行代码可能需要根据实际包名进行调整  
  
const ctrl = new AbortController(); // 用于中断请求  
  
fetchEventSource('http://example.com/sse', {  
    headers: {  
        'Content-Type': 'application/json', // 注意：SSE通常不需要请求体，这里仅作为示例  
    },  
    method: 'GET', // SSE通常只支持GET，这里显式指定  
    signal: ctrl.signal,  
    openWhenHidden: true, // 页面退至后台时保持连接  
    onopen: (response) => {  
        console.log('连接已打开', response);  
    },  
    onmessage: (event) => {  
        console.log('收到消息:', event.data);  
    },  
    onerror: (error) => {  
        console.error('连接发生错误:', error);  
        ctrl.abort(); // 中断请求  
    },  
    onclose: () => {  
        console.log('连接已关闭');  
    },  
});