Maintaining Socket Connection in Mobile Sleep Mode - MERN Stack

Question

Question:

I'm working on a MERN stack application where I'm utilizing Socket.IO for real-time communication. Everything works well, but I'm facing an issue when the mobile device goes into sleep mode. The socket connection seems to be getting disrupted during this state.

Context:

I have a backend setup using Node.js and Socket.IO, and on the frontend side, I'm using React with the useEffect hook to establish a socket connection when the component mounts. Here's a simplified version of my code:

Backend (socket.js):

// ... (previous code)
io.on("connect", (socket) => {
  socket.on("join", async () => {
    // some code...
  } catch (error) {
    // handle error...
  }
});

Frontend (product.js):

// ... (previous code)
useEffect(() => {
  socket = io();
  if (/* some condition */) {
    socket.emit("join", {
      // some code...
    });
    // socket open on user join
    return () => {
      socket.disconnect();
    };
  }
}, []);

Issue:

The socket connection works as expected, but when the mobile device goes to sleep mode, the connection seems to be lost. I've tried implementing a solution, but I'm unsure about the best approach to keep the socket connection active during sleep mode.

Request for Help:

1. What are the recommended strategies or best practices to maintain a socket connection when a mobile device goes into sleep mode?
2. Are there specific configurations or events I should be aware of in Socket.IO to handle such scenarios?
3. Any insights or code examples related to handling socket connections on mobile devices, especially in the context of mobile web applications?

Any assistance or guidance would be greatly appreciated. Thanks in advance!

Answer 1

What you describe is expected behaviour. The socket connection can not be kept alive during device sleep, at least not in a web application. In native applications, there are certain entitlements that allow TCP connections (and by extension, web sockets) to survive device sleep. For iOS, look up how to do background fetch, for example.

Now, assuming the app is a web application and not native, you simply cannot expect the TCP connection to stay alive. This is forced by the OS to conserve battery. Instead, you have to create a resilient reconnect logic. The best way to deal with reconnects depend on the type of data you send over the web socket, but here are a few general suggestions:

For data push (stock prices, etc), a reconnect is simple, as the latest state will be pushed back directly. You might need to implement replay on the backend to not miss out on updates that happened when the device was asleep.

For collaboration/synchronization, things get more complex. You will have to write logic to reconcile the state with the state of the backend. This is entirely dependent on your data model but not totally unlike source control.

For streaming of audio/video, you typically implement some kind of buffering. One standard way of dealing with this is to use a ring buffer with a read and write cursor.