JavaScript 中 SSE 怎么在组件销毁时正确关闭连接-js教程-PHP中文网

组件销毁时必须手动调用eventsource.close()，否则连接持续存活；react在useeffect清理函数、vue2在beforedestroy、vue3在onbeforeunmount中显式关闭并置空实例。

javascript 中 sse 怎么在组件销毁时正确关闭连接

组件销毁时必须手动调用 EventSource.close()，否则连接会持续存活、占用带宽和内存——浏览器不会自动清理未关闭的 SSE 实例。

React 中：在 useEffect 清理函数里关闭

React 组件卸载时，EventSource 实例不会自动销毁。需在副作用清理阶段显式关闭：

在 useEffect 中创建 EventSource 实例
返回的清理函数中调用 eventSource?.close()
建议加可选链判断，避免调用已销毁实例的方法

示例：

useEffect(() => {
  const eventSource = new EventSource('/api/notifications');
  eventSource.onmessage = (e) => {/* 处理消息 */};
  return () => {
    eventSource?.close();
  };
}, []);

Vue2 中：用 beforeDestroy 钩子

Vue2 的生命周期钩子明确支持资源清理：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

在 created 或 mounted 中初始化 SSE 连接
在 beforeDestroy 中调用关闭方法
确保 eventSource 是组件实例属性（如 this.eventSource）

示例：

export default {
  data() { return { eventSource: null }; },
  created() { this.setupSSE(); },
  beforeDestroy() { this.closeSSE(); },
  methods: {
    setupSSE() { this.eventSource = new EventSource('/api/stream'); },
    closeSSE() { this.eventSource?.close(); }
  }
};

Vue3 / Composition API：配合 onBeforeUnmount

组合式 API 提供了与 Vue2 beforeDestroy 对应的钩子：

使用 onBeforeUnmount 注册清理逻辑
保持 eventSource 在闭包或 ref 中可访问
关闭前检查 readyState 是否为 0（CLOSED）或 2（OPEN），避免重复 close

示例：

import { onBeforeUnmount, ref } from 'vue';
const eventSource = ref(null);
onBeforeUnmount(() => {
  if (eventSource.value && eventSource.value.readyState !== 0) {
    eventSource.value.close();
    eventSource.value = null;
  }
});