SSE消息无法在CRM应用实时Feed自动渲染问题排查求助

我正在开发一款基于Server-Sent Events（SSE）的CRM聊天UI应用，点击对话列表用户时消息能正常更新，但webhook传入新数据时前端无法自动刷新。后端日志显示已发送SSE数据，网络面板连接状态为200，但Chrome的EventStream面板为空（已知可能是浏览器bug）。

核心问题排查 #

一、SSE连接配置的明显问题 #

你的SSEManager类存在关键功能缺失，这是导致监听失效的主要原因：

1. 核心方法未实现：代码中只定义了connect和handleMessage，但addEventListener、removeEventListener、disconnect、handleError方法完全缺失，useSSE钩子的注册监听逻辑根本无法生效。
2. 未携带认证信息：SSE连接没有传递Token，后端可能因鉴权失败拒绝发送数据。EventSource不支持自定义Authorization请求头，需要将Token放到URL参数中。
3. 错误处理空白：handleError仅声明未实现，无法排查连接断开、重连异常等问题。

二、组件处理逻辑的潜在问题 #

1. 异步回调的依赖冲突：useSSE的回调使用了async，但useEffect的清理函数依赖的callback引用会频繁变化，可能导致重复注册/注销。
2. 状态判断的时效性问题：SSE消息到达时，contact状态可能已更新，导致data.contactId === contact._id判断不成立，无法触发刷新。
3. 缓存与状态同步不足：更新messagesCache后，未确保组件messages状态与缓存完全同步，可能导致UI显示旧数据。

修复方案 #

1. 补全SSEManager的核心方法 #

import { getToken } from './auth';

class SSEManager {
  constructor() {
    this.eventSource = null;
    this.listeners = {};
  }

  connect() {
    if (!this.eventSource) {
      // 将Token放入URL参数，解决EventSource无法自定义Header的问题
      const token = getToken();
      const url = `/api/sms/sse?token=${encodeURIComponent(token)}`;
      this.eventSource = new EventSource(url);
      this.eventSource.onmessage = this.handleMessage.bind(this);
      this.eventSource.onerror = this.handleError.bind(this);
    }
  }

  handleMessage(event) {
    try {
      const data = JSON.parse(event.data);
      // 新增日志，确认是否收到消息
      console.log('Received SSE message:', data);
      if (this.listeners[data.type]) {
        this.listeners[data.type].forEach(callback => callback(data));
      }
    } catch (error) {
      console.error('Error processing SSE message:', error);
    }
  }

  // 补全监听注册方法
  addEventListener(eventType, callback) {
    if (!this.listeners[eventType]) {
      this.listeners[eventType] = [];
    }
    // 避免重复注册同一回调
    if (!this.listeners[eventType].includes(callback)) {
      this.listeners[eventType].push(callback);
    }
  }

  // 补全监听移除方法
  removeEventListener(eventType, callback) {
    if (this.listeners[eventType]) {
      this.listeners[eventType] = this.listeners[eventType].filter(cb => cb !== callback);
      // 清空空监听数组
      if (this.listeners[eventType].length === 0) {
        delete this.listeners[eventType];
      }
    }
  }

  // 补全断开连接方法
  disconnect() {
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
  }

  // 补全错误处理与重连逻辑
  handleError() {
    console.error('SSE connection lost, attempting to reconnect...');
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
      // 延迟5秒重连，避免频繁请求
      setTimeout(() => this.connect(), 5000);
    }
  }
}

const sseManager = new SSEManager();

export const useSSE = (eventType, callback) => {
  useEffect(() => {
    sseManager.connect();
    sseManager.addEventListener(eventType, callback);

    return () => {
      sseManager.removeEventListener(eventType, callback);
      if (Object.keys(sseManager.listeners).length === 0) {
        sseManager.disconnect();
      }
    };
  }, [eventType, callback]);
};

2. 优化组件中的SSE监听逻辑 #

// 用ref保存当前contact的ID，避免状态更新导致判断失效
const currentContactId = useRef(contact?._id);
useEffect(() => {
  currentContactId.current = contact?._id;
}, [contact]);

// 移除async，避免useEffect依赖问题
useSSE('newMessage', (data) => {
  if (currentContactId.current && data.contactId === currentContactId.current) {
    fetchContactMessagesData();
  }
});

额外排查步骤 #

1. 验证后端SSE格式：确保后端发送的每条消息以data: 开头，以\n\n结尾，示例：

   data: {"type":"newMessage","contactId":"123","content":"Hello"}
   
   

2. 测试SSE端点：用curl命令直接测试：

   curl -N http://your-domain/api/sms/sse?token=your-valid-token
   

3. 检查CORS配置：确认后端允许SSE连接的跨域请求，避免浏览器拦截。

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