SoFunction
Updated on 2025-04-05

The front-end implements a simple sse encapsulation method (React hook Vue3)

What is SSE?

The so-called SSE (Sever-Sent Event) means that the browser sends an HTTP request to the server, maintaining a long connection, and the server continuously pushes "information" to the browser in one-way. This is done to save network resources, without having to send requests all the time, and establishing a new connection.

  • Advantages: Compared with SSE and WebSocket, the biggest advantage is convenience. The server does not require third-party components, and the development difficulty is low. Compared with SSE and polling, it does not have to process many requests, does not have to establish a new connection every time, and has low latency.
  • Disadvantages: If the client has a lot of long connections, it will take up a lot of memory and connections this time.

Encapsulate a simple SSE, taking React hook as an example

Reference is availableSimple websocket encapsulation

Create a new file

import {useState, useRef, useEffect} from 'react'

const useSSE = (url: string) => {
    const source = useRef<EventSource | null>(null)
    //Received sse data    const [sseData, setSseData] = useState({})

    // sse status    const [sseReadyState, setSseReadyState] = useState({
        key: 0,
        value: 'In-link',
    })

    const creatSource = () => {
        const stateArr = [
            {key: 0, value: 'In-link'},
            {key: 1, value: 'Already linked and can communicate'},
            {key: 2, value: 'The connection is closed or no link is successful'},
        ]

        try {
             = new EventSource(url)
             = (_e) => {
                setSseReadyState(stateArr[?.readyState ?? 0])
            }

             = (e) => {
                setSseReadyState(stateArr[?.readyState ?? 0])
            }
             = (e) => {
                setSseData({...()})
            }
        } catch (error) {
            (error)
        }
    }

    const sourceInit = () => {
        if (! ||  === 2) {
            creatSource()
        }
    }

    // Close WebSocket    const closeSource = () => {
        ?.close()
    }

    //Reconnect    const reconnectSSE = () => {
        try {
            closeSource()
             = null
            creatSource()
        } catch (e) {
            (e)
        }
    }

    useEffect(() => {
        sourceInit()
    },[])

    return {
        sseData,
        sseReadyState,
        closeSource,
        reconnectSSE,
    }
}
export default useSSE

A total of four parameters are exposed here.

These are sseData (received sse data), sseReadyState (current sse status), closeSource (closed sse), and reconnectSSE (reconnect).

These simple parameters can cover the needs of general scenarios.

The following code is the usage method

import React, { useState, useEffect } from 'react'
import useWebsocket from '../../tools/webSocket'
export default function () {
	const {sseData,sseReadyState, closeSource,reconnectSSE} = useSSE(url)

	useEffect(() => {
        ( 'Current status'，sseReadyState)
    },[sseReadyState])

	useEffect(() => {
        ( 'Received Data'，sseData)
    }, [sseData])
}

Implementation using vue3

import { ref } from "vue";

const useSSE = (url: string) => {
  const source = ref<EventSource | null>(null);

  //Received sse data  const sseData = ref({});

  // sse status  const readyState = ref({ key: 0, value: "In Linking" });

  const creatSource = () => {
    const stateArr = [
      { key: 0, value: "In Linking" },
      { key: 1, value: "Already linked and can communicate" },
      { key: 2, value: "Connection closed or no link succeeded" },
    ];

    try {
      = new EventSource(url);
       = (e) => {
         = stateArr[?.readyState ?? 0];
      };

       = (e) => {
         = stateArr[?.readyState ?? 0];
      };
       = (e) => {
         && ( = { ...() });
      };
    } catch (error) {
      (error);
    }
  };

  const sourceInit = () => {
    if (!||  === 2) {
      creatSource();
    }
  };

  // Close WebSocket  const closeSource = () => {
    ?.close();
  };

  //Reconnect  const reconnectSSE = () => {
    try {
      closeSource();
      = null;
      creatSource();
    } catch (e) {
      (e);
    }
  };

  return {
    sseData,
    readyState,
    sourceInit,
    closeSource,
    reconnectSSE,
  };
};
export default useSSE;

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.