Vue 3 中工程化 SSE：流式 SIMD 扩展

SSE 在 Web 开发中有两个常见含义，一是指服务端向客户端单向推送事件的 Server-Sent Events，另一个则是 CPU 指令集中的流式 SIMD 扩展。在 Vue 3 工程化实践中，前者是更常用的技术方案，尤其适合大模型流式输出、实时日志和行情推送等场景。直接用原生 EventSource 能跑通示例，但缺少可靠的重连、取消、实例管理和多标签页共享连接等能力。本文围绕 Vue 3 组合式 API，构建一个可复用的 useSSE 模块，并讨论连接治理与选型边界，帮助开发者把流式数据管道做得更稳健。

一、SSE 与 EventSource 的底层运行机制

SSE 基于 HTTP 长连接，服务端通过 Content-Type: text/event-stream 持续向客户端写入文本帧。浏览器端 EventSource API 隐藏了连接管理和重连细节，与轮询相比延迟更低，与 WebSocket 相比更简单、更易穿透代理。每个事件块由空行分隔，可包含 data、event、id、retry 等字段，其中 id 与 Last-Event-ID 机制让断线续传成为可能。在实际项目中，理解这些字段的作用是做好工程化封装的前提。

下面是一段最基础的原生 EventSource 用法，它演示了如何监听消息和错误事件。虽然代码很短，但已经暴露出两个问题：连接在组件卸载后不会被自动关闭，以及 onerror 触发时无法区分是暂时断线还是服务端彻底不可用。

const source = new EventSource('/api/stream');
source.onmessage = (event) => {
  console.log('收到消息:', event.data);
};
source.onerror = () => {
  console.log('连接异常，等待重连');
};

浏览器会对断开的 EventSource 自动发起重连，但重连间隔由服务端返回的 retry 字段决定，客户端无法直接干预。当服务端长时间不可用时，浏览器会无限重试，这可能造成请求堆积和资源浪费。因此，工程化封装必须接管重连策略，设置最大重试次数和退避算法，同时把连接状态暴露给 Vue 的响应式系统。

二、在 Vue 3 组合式 API 中封装 useSSE

直接在组件中 new EventSource 会带来两个问题：组件卸载后连接未关闭导致内存泄漏；多个组件重复创建连接造成服务端压力。将连接生命周期与组件生命周期绑定，是 Vue 3 组合式 API 的天然优势。通过 onUnmounted 清理资源，可以避免大部分泄漏问题。此外，还需要把 data、status、error 等状态转换成 ref，以便在模板中直接使用。

以下是一个实用的 useSSE 组合式函数实现，它支持自动重连、JSON 解析容错、自定义事件监听，并且可以手动关闭或重连。重连部分采用了指数退避策略，最大重试次数可通过 options 配置。

import { ref, onUnmounted } from 'vue';

export function useSSE(url, options = {}) {
  const data = ref(null);
  const status = ref('idle');
  const error = ref(null);
  let source = null;
  let retryCount = 0;
  const maxRetries = options.maxRetries ?? 5;

  function connect() {
    if (source) source.close();
    status.value = 'connecting';
    source = new EventSource(url, options.withCredentials ? { withCredentials: true } : undefined);

    source.onopen = () => {
      status.value = 'open';
      retryCount = 0;
    };

    source.onmessage = (event) => {
      try {
        data.value = JSON.parse(event.data);
      } catch {
        data.value = event.data;
      }
    };

    if (options.onEvent) {
      source.addEventListener(options.eventName || 'message', options.onEvent);
    }

    source.onerror = () => {
      status.value = 'error';
      error.value = new Error('SSE 连接异常');
      if (retryCount < maxRetries) {
        retryCount += 1;
        setTimeout(connect, 1000 * retryCount);
      } else {
        source.close();
      }
    };
  }

  function close() {
    if (source) source.close();
    status.value = 'closed';
  }

  function reconnect() {
    close();
    connect();
  }

  connect();

  onUnmounted(() => {
    close();
  });

  return { data, status, error, close, reconnect };
}

在组件中使用这个组合式函数非常简单，只需要传入服务端地址，然后从返回值中解构出响应式状态。当组件卸载时，onUnmounted 会自动关闭 EventSource，避免后台连接继续存在。如果服务端返回的是 JSON 字符串，useSSE 会自动解析成对象；如果解析失败，则保留原始字符串，这样既能处理结构化数据，也能兼容纯文本流。

import { useSSE } from './composables/useSSE';

export default {
  setup() {
    const { data, status, error } = useSSE('/api/chat-stream', { maxRetries: 3 });
    return { data, status, error };
  }
};

三、自动重连、取消与多标签页共享连接的工程化实践

原生 EventSource 的自动重连能力掩盖了一个事实：它无法限制重连次数，也无法在特定条件下停止重连。当后端服务进入长期维护或客户端网络切换时，持续的无效重连会让浏览器一直占用连接资源。工程化方案需要自己实现退避逻辑，例如第一次失败后等待 1 秒，第二次等待 2 秒，直到达到最大次数后关闭连接并给出明确错误状态。这种控制让上层 UI 有机会展示重试按钮，而不是陷入静默的循环。

多标签页场景下的连接管理同样值得关注。同一个用户可能会打开多个标签页，如果每个标签页都独立创建 EventSource，服务端连接数会成倍增长。一种轻量级的优化方式是使用 BroadcastChannel 共享一个连接：由一个主标签页持有 EventSource，其他标签页通过 BroadcastChannel 订阅数据。当订阅数归零时，主标签页关闭连接。这样既能保证数据实时性，又能显著降低服务端压力。

// 共享连接管理模块
const channel = new BroadcastChannel('sse-shared');
let sharedSource = null;
let subscribers = 0;

channel.onmessage = (event) => {
  if (event.data.type === 'subscribe') {
    subscribers += 1;
    if (!sharedSource) {
      sharedSource = new EventSource('/api/shared-stream');
      sharedSource.onmessage = (msg) => {
        channel.postMessage({ type: 'data', payload: msg.data });
      };
    }
  }
  if (event.data.type === 'unsubscribe') {
    subscribers = Math.max(0, subscribers - 1);
    if (subscribers === 0 && sharedSource) {
      sharedSource.close();
      sharedSource = null;
    }
  }
};

除了 BroadcastChannel，也可以使用 SharedWorker 实现真正的跨标签页共享连接，但 SharedWorker 的调试和兼容性成本相对较高。对于大多数 Vue 3 项目，BroadcastChannel 已经能满足需求。需要注意的是，这种共享连接方案要求所有相关标签页都运行在同一个浏览器的同一会话环境中，并且要在页面卸载时发送 unsubscribe 消息，否则订阅计数可能不准确。

四、SSE 与 WebSocket 的选型边界及 SIMD 概念澄清

SSE 和 WebSocket 并不是互相替代的关系，它们的适用场景有明显差异。SSE 是单向通道，客户端只能接收服务端推送的数据，但它的协议更简单，基于 HTTP 无需额外握手升级，天然支持代理、防火墙和负载均衡。WebSocket 提供全双工通信，适合需要频繁双向交互的场景，但实现和运维成本更高。下面表格总结了它们的主要区别。

最后需要厘清一个概念：SSE 在处理器指令集领域是 Streaming SIMD Extensions 的缩写，是一种面向多媒体和科学计算的单指令多数据扩展。在 Vue 3 工程化讨论中，SSE 通常指 Server-Sent Events，两者只是缩写相同，技术内容完全不同。如果流式传输的数据本身包含大量数值计算，例如浏览器端实时渲染科学计算结果，可以考虑在 WebAssembly 中启用 SIMD 扩展来加速处理，但这是数据处理层面的优化，和传输层的 SSE 并不冲突。

总体来说，Vue 3 中工程化 SSE 的核心在于连接治理、生命周期管理和跨标签页协同。组合式 API 的封装能力让这些逻辑可以被轻松复用，避免在每个组件中重复编写 EventSource 样板代码。只要控制好重连策略和资源释放，SSE 就能在流式输出场景中保持稳定高效，成为大模型应用和实时数据看板的可靠传输底座。

Vue 3Server-Sent Events流式传输修改时间：2026-09-19 05:32:28