How to cleanup this fetchEvent function used in a useEffect hook?

user_11527780 0
Viewed 124
 useEffect(() => {
    const fetchData = async () => {
      await fetchEventSource(`/weborders/${agentId}/web_stream`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          //  keepAlive: true,
        },
        onopen(res) {
          if (res.ok && res.status === 200) {
            console.log("Connection Established", res);
          } else if (
            res.status >= 400 &&
            res.status < 500 &&
            res.status !== 429
          ) {
            console.log("Client Side Failure", res);
          }
        },
        onopen(res) {
          console.log("Connection Established", res);
        },
        onmessage(event) {
          // console.log(event.data);
          const parsedData = JSON.parse(event.data);
          //  setSseData((data) => [...data, parsedData]);
          setSseData([parsedData]);
        },
        onclose() {
          console.log("Connection Closed by the Server");
        },
        onerror(err) {
          console.log("There was an error from the Server!", err);
        },
      });
    };
    fetchData();
  }, []);

Also, server-sent events are stopped properly when the browser window is minimized and automatically resumed once it comes back to the viewport but doesn't send them(sse) when viewpoint is active even when there are new events to log. Am importing fetchEventSource imported from import { fetchEventSource } from "@microsoft/fetch-event-source";

server-sent-events react-hooks reactjs
1 Answers

Aborting the controller like this seems to work.

useEffect(() => {
    const controller = new AbortController();
    const fetchData = async () => {
      await fetchEventSource(
        `http://localhost:8000/weborders/${agentId}/web_stream`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            //  keepAlive: true,
          },
          signal: controller.signal,
          onopen(res) {
            if (res.ok && res.status === 200) {
              console.log("Connection Established", res);
            } else if (
              res.status >= 400 &&
              res.status < 500 &&
              res.status !== 429
            ) {
              console.log("Client Side Failure", res);
            }
          },
          onopen(res) {
            console.log("Connection Established", res);
          },
          onmessage(event) {
            // console.log(event.data);
            const parsedData = JSON.parse(event.data);
            //  setSseData((data) => [...data, parsedData]);
            setSseData([parsedData]);
          },
          onclose() {
            console.log("Connection Closed by the Server");
          },
          onerror(err) {
            console.log("There was an error from the Server!", err);
          },
        }
      );
    };
    fetchData();
    return () => controller.abort();
  }, []);
user_115277800
Related