React连接SSE API重复接收消息问题求助

你的问题核心是多个EventSource连接同时监听消息，导致同一条事件被多次消费，主要原因有两个：

1. 组件卸载或重新渲染时，旧的EventSource连接未关闭，新连接又被创建，多个连接同时接收服务器推送的事件。
2. React 18开发环境下的StrictMode会触发useEffect执行两次，若未处理连接清理，会直接生成两个监听连接。

修复方案 #

在useEffect中添加清理函数，确保组件卸载或重新渲染时关闭旧连接、移除事件监听器，同时优化事件处理逻辑：

export default function News() {
  const [newsList, setNews] = useState([]);

  useEffect(() => {
    // 创建SSE连接
    const source = new EventSource("http://localhost:8080/api/v1/news");

    // 定义事件处理函数
    const handleOpen = () => console.log('SSE opened!');
    
    const handleMessage = (event) => {
      const message = JSON.parse(event.data);
      console.log(message);
      // 函数式更新state，避免闭包问题
      setNews(prevList => [...prevList, message]);
    };

    const handleError = (e) => {
      console.error('SSE Error: ', e);
      // 连接出错时主动关闭，避免无效连接
      source.close();
    };

    // 绑定事件监听
    source.addEventListener('open', handleOpen);
    source.addEventListener('message', handleMessage);
    source.addEventListener('error', handleError);

    // 组件卸载/useEffect重新执行时清理资源
    return () => {
      source.removeEventListener('open', handleOpen);
      source.removeEventListener('message', handleMessage);
      source.removeEventListener('error', handleError);
      source.close();
    };
  }, []); // 空依赖确保只执行一次

  return (
    <Table striped bordered hover variant="dark" size="sm">
      <thead>
        <tr>
          <th>Published at</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        {newsList.map(({ id, title, published_utc }) => (
          <tr key={id}>
            <td>{published_utc}</td>
            <td>{title}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

关键修复点说明 #

• 清理函数：通过return返回的函数，React会在组件卸载或useEffect依赖变化时执行，确保旧连接被关闭，不会残留多个监听实例。
• 提取事件处理函数：方便在清理时精准移除监听器，避免内存泄漏。
• 错误时关闭连接：当SSE连接出现异常（如服务器断开），主动关闭连接，防止无效连接持续占用资源。
• 开发环境StrictMode：修复后即使开发环境下useEffect执行两次，第一次创建的连接会被清理函数关闭，最终只会保留一个有效连接，不会重复消费消息。

内容的提问来源于stack exchange，提问作者Vasif