SSE初体验

最近看到的，记录一下，SSE长连接

什么是SSE?

SSE(Sever-Sent Event)，就是浏览器向服务器发送了一个HTTP请求，保持长连接，服务器不断单向地向浏览器推送“信息”，这么做是为了节省网络资源，不用一直发请求，建立新连接。
是一种服务端向客户端推送信息的单向通信方法

EventSource

1.SSE具有由 W3C 标准化的网络协议
2.EventSource 是SSE客户端接口
3.EventSource不支持headers参数
4.使用EventSource传输，传输内容一定是text/event-stream的，即后台要设置返回的content-type为text/event-stream

上代码

import React, { useEffect, useRef, useState } from "react";

const readyStateArr = [
    { key: 0, value: "0 连接尚未建立，或已关闭且客户端正在重新连接" },
    { key: 1, value: "户端有一个打开的连接并在接收到事件时处理它们" },
    { key: 2, value: "连接未打开，并且客户端未尝试重新连接，要么出现致命错误，要么调用了 close() 方法" },
];

const useSSE = () => {
    const source = useRef<EventSource | null>(null);
    const [sseData, setSseData] = useState({});
    const [sseReadyState, setSseReadyState] = useState({
        key: 0,
        value: "正在链接中",
    });

    const createSSE = () => {
        try {
            source.current = new EventSource("https://test/sse");
            source.current.onopen = (e) => {
                setSseReadyState(readyStateArr[source.current?.readyState ?? 0]);
            };
            source.current.onerror = (e) => {
                setSseReadyState(readyStateArr[source.current?.readyState ?? 0]);
            };
            source.current.onmessage = (e) => {
                setSseData({ ...JSON.parse(e.data) });
            };
        } catch (error) {
            console.log(error);
        }
    };

    const initSSE = () => {
        if (!source.current || source.current.readyState === 2) {
            createSSE();
        }
    };

    const closeSSE = () => {
        source.current?.close();
    };

    const reconnectSSE = () => {
        try {
            closeSSE();
            source.current = null;
            createSSE();
        } catch (error) {
            console.log(error);
        }
    };

    useEffect(() => {
        initSSE();
    }, []);

    return {
        sseData,
        sseReadyState,
        closeSSE,
        reconnectSSE,
    };
};

export default useSSE;