I'm creating an application using React and socket.io that has multiple real-time features such as:
- notifications
- a waiting room
- group chat rooms
- private chat rooms
Each one of these functionalities lives in separate React components, and I'm wondering what the best way to implement the socket connection(s) would be.
Here are the two methods I currently have in mind:
I establish a single socket connection at the top level of the application as soon as a user logs in and persist this connection for the entire session, and relevant socket event listeners will live in the respective React components (e.g. waiting room related events live in the waiting room parent component, and chat events live in the chat room component, etc.)
I establish a new socket connection each time the user enters a part of the application that has real-time functionality (e.g. a chat room), and remove this connection (via a cleanup function) when the user leaves and those components unmount. In this case, each real-time feature has a different socket connection.
Is either one of these methods more efficient than the other? Are there better ways to do it using some sort of subscription system? How are other large-scale applications with multiple real-time features architected and what technologies are commonly utilized?
I've only created simple chat applications with single rooms using sockets so I apologize if this is considered a naive question and really appreciate any helpful information!