前端简单 SSE 封装的实现方法（React Hook 与 Vue3）

在前端开发中，服务端发送事件（Server-Sent Events，简称 SSE）是一种实现实时数据推送的有效方式。本文将探讨如何在 React Hook 和 Vue3 中进行简单的 SSE 封装，以提升开发效率和代码的可维护性。

在 React Hook 中，我们可以创建一个自定义的 Hook 来处理 SSE 连接。引入必要的依赖，如 eventsource 库。然后，定义 useSSE Hook，在其中创建 EventSource 对象，并处理各种事件，如 open、message 和 error。通过返回相关的数据和状态，组件可以方便地使用这些信息进行渲染和交互。

import EventSource from 'eventsource';

function useSSE(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = new EventSource(url);

    source.onopen = () => {
      setLoading(false);
    };

    source.onmessage = (event) => {
      setData(event.data);
    };

    source.onerror = (err) => {
      setError(err);
      setLoading(false);
    };

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

  return { data, loading, error };
}

在 Vue3 中，我们可以利用组合式 API 来实现 SSE 的封装。创建一个 useSSE 函数，同样处理连接的创建、事件监听和状态管理。

import { ref, onMounted, onUnmounted } from 'vue';

function useSSE(url) {
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);

  const source = new EventSource(url);

  source.onopen = () => {
    loading.value = false;
  };

  source.onmessage = (event) => {
    data.value = event.data;
  };

  source.onerror = (err) => {
    error.value = err;
    loading.value = false;
  };

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

  return { data, loading, error };
}

通过这样的封装，在实际的组件中使用 SSE 变得更加简洁和直观。无论是在 React Hook 还是 Vue3 中，我们都能够轻松地实现实时数据的获取和更新，为用户提供更加动态和实时的体验。

掌握前端简单 SSE 封装的实现方法，能够在构建实时应用时更加得心应手，为用户带来更好的交互效果和使用体验。