4

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?

Ron
  • 41
  • 1
  • 1
  • 2
  • How many WebSocket connections are you opening in this page? Browsers have limits on active WS connections, you may be opening too many of them. – Miguel Grinberg Sep 01 '21 at 13:08
  • I have 2 pages opened for connection. It might be socket io is making so many requests at once? – Ron Sep 01 '21 at 16:19
  • I am also facing exact same issue. I am calling websocket from javascript file but getting same error in console. Is any update on this @Ron – Amol Jagdale Jun 14 '23 at 16:00

1 Answers1

11

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>
  )
}
Hultan
  • 1,409
  • 1
  • 15
  • 28
  • 2
    I think useEffect should be passed an empty array of dependencies as last argument, otherwise it will still run on each render. – Jonas Kello Jan 25 '22 at 11:13
  • Thank you, @JonasKello. I missed that little array. The answer has been updated. – Hultan Jan 25 '22 at 11:55
  • if you set this socket constant inside useEffect then it cannot be used outside of useEffect... perhaps we want to send a message or use the socket connection again in another part of this MockSocket component. – urfx Nov 09 '22 at 13:57
  • @urfx Yes. That is true. You'll need some more code to make the socket accessible from outside the function. This answer is mainly to display what causes the "Insufficient resources" error and how to fix it. – Hultan Nov 10 '22 at 13:46