React中使用Server-Sent Events时事件监听未触发怎么办？

欧阳子慧提问于 2026-01-26 09:32:25 阅读 34

前端

最近在做一个实时聊天功能，用React配合Server-Sent Events实现。按照文档写了如下代码，但控制台始终没看到消息输出，连错误都没有。页面加载时确实能看到网络请求建立了，但消息监听就是没反应…


useEffect(() => {
  const source = new EventSource('/api/chat-stream');
  
  source.addEventListener('message', (event) => {
    console.log('收到消息:', event.data); // 这里从来没触发
  });

  source.onerror = (err) => {
    console.error('SSE错误:', err); // 也没触发
  };

  return () => source.close();
}, []);

服务器端返回的是text/event-stream格式，用Postman测试能收到实时消息。客户端这边是不是哪里漏了？试过把事件名改成’message’和’update’都不行，连错误回调都没反应，感觉事件监听根本没有绑定上…

我来解答赞 5 收藏

反馈

2 条解答

爱丹~ Lv1

你服务器返回的消息事件类型是不是不是默认的 message？省事的话直接监听所有事件试试：

source.onmessage = (event) => {

  console.log('收到消息:', event.data);

};

如果还不行，检查下服务器发的消息格式里有没有指定 event: 字段，有的话得按实际字段名来。

2026-02-01 22:03

博主艺茹 Lv1

听着像是后端的问题，不过既然你说用Postman能收到消息，那咱们先从前端角度排查。

首先，EventSource这玩意儿确实有点怪癖。你提到网络请求建立了，但监听没反应，可能是因为服务器发的消息格式不对。虽然Postman能解析，但浏览器对SSE的要求比较严格，特别是消息分隔符。

试试让后端确保每条消息后面加上nn，这是SSE协议要求的。比如：

data: 这是一条消息



data: 又一条消息

另外，前端这边可以加个简单判断，确保事件名没错。把'message'改成*试试，这样能捕获所有类型的消息：

source.addEventListener('*', (event) => {

  console.log('捕获到:', event.data);

});

如果还是不行，可能是服务器响应头有问题。确保后端设置了正确的 MIME 类型：Content-Type: text/event-stream，还有缓存控制：Cache-Control: no-cache。

最后，如果你用的是某些代理（比如 Nginx），记得检查配置，因为默认可能会断开长连接。折腾过几次 SSE，每次问题都在这些细节上，真是让人头大。

2026-01-29 21:03