My question is more about an alternative to store a ws connection. Initially I thought about storing in the session or localStorage, but ws objects are not supported, only primitive data types.

I am wondering what would be the alternatives?

What I am trying to achieve is once I reload the page, I don’t lose the ws connection because I have a event sending ws.send(), and after reloading the page it becomes undefined.

Code:

const startConn = () => {
        const ws = new WebSocket('wss://4z2ysa3nod.execute-api.ap-southeast-2.amazonaws.com/Test/'); // TODO: use ENV variable
        setSocket(ws);

        ws.onopen = () => {
            console.log('[onopen] WebSocket connected');
            setStreaming(true);
            console.log("ws", ws);
            ws.send(JSON.stringify({
                action: 'start-streaming-data',
                data: configuration
            }));
        };

        ws.onmessage = (event) => {
            // i am storing data here, removed because not relevant
        })

            setPlotData(prevData => {
                const dataArray = Array.isArray(prevData) ? prevData : [];
                const newData = [
                    ...dataArray,
                    { time: new Date().toLocaleTimeString(), data: data.graph }
                ];
                // Limit the number of data points to preserve interval
                if (newData.length > 10) {
                    newData.shift();
                }
            
                sessionStorage.setItem('plotData', JSON.stringify(newData));
                return newData; // return new array to trigger re-render
            });
        };

        ws.onclose = () => {
            setStreaming(false);
            // clearInterval(intervalId);
            console.log('[onclose] WebSocket disconnected:');
        };

        return () => {
            ws.close();
        };
    }

    useEffect(() => {
        // TODO: simulating receiving data from sensor
        let intervalId;

        if (streaming) {
            intervalId = setInterval(() => {
                if (socket !== null) {
                    socket.send(JSON.stringify({
                        action: 'start-streaming-data',
                        data: configuration
                    }));
                } else {
                    console.log("[wsSend] socket is null");
                }
            }, 1000);
        } else {
            clearInterval(intervalId);
        }

        return () => clearInterval(intervalId);
    }, [streaming, configuration]);