Websocket Connection Error Insufficient Resources - google-chrome

Question

I'm developing a chat app where two users can talk to one another and I'm doing this with flask-socketio and React.
I've been struggling with trying to figure out this issue I'm getting with socket.io. Here's the error connection I keep getting once in a while on the browser console:
WebSocket connection to 'ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket&sid=s8DKBembmWoxgGAsAAqX' failed: Insufficient resources
I'm having a difficult time trying to figure out what's causing this error. The way I solved this was to refresh the page and the connection is then re-established. I want to find a solution to this where I don't keep being disconnected from the socket and getting the same error message. Any idea on how to do this?

Answer 1

One common issue with sockets and react is how often you instantiate a WebSocket.
Incorrect usage of sockets in react
Here's an example of how it shouldn't be set up in a react component. Every time the component rerenders, a new socket will be set up, which will cause an Insufficient resources error.
import React, {useState} from 'react'
import { io } from "socket.io-client";
export default function MockSocket() {
const [message, setMessage] = useState("");
const socket = io();
socket.connect();
socket.on("recieve_message", setMessage);
return (
<div>
{message}
</div>
)
}
Correct usage of sockets in react
Instead, wrap the instantiation of WebSockets with a useEffect (such that it only triggers once, and is disconnected when the component is unmounted).
import React, {useEffect, useState} from 'react'
import { io } from "socket.io-client";
export default function MockSocket() {
const [message, setMessage] = useState("");
useEffect(
() => {
const socket = io();
socket.connect();
socket.on("recieve_message", setMessage);
return () => {
socket.disconnect();
}
},
[]
)
return (
<div>
{message}
</div>
)
}