where I should initiate and connect socket.io in React Native component? - react-native

Question

i now learning socket.io to build a chat app with React Native that contain private messaging like line/whatsapp, user can add another user to their friendlist, and can start chat with them...
Here's my Stack Navigation looks like:
class MainNavigator extends Component {
render() {
const { user } = this.props;
return (
<Stack.Navigator>
{user.username ? (
<>
<Stack.Screen name="ChatList" component={ChatList} options={{ title: 'Chatz' }} />
<Stack.Screen
name="Chat"
component={Chat}
options={{ title: `Chat as "${user.username}"` }}
/>
</>
) : (
<>
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
</>
)}
</Stack.Navigator >
);
}
}
You can see that if there is a user logged in in my app, stack navigator only contain ChatList and Chat, where the ChatList is a list of all active Chats.
I know that to connect a socket to backend we simply connect it with socket = io(http://localhost:3000), but where i should connect it in my components?
I'll use the socket in ChatList and Chat component.
Should i connect it in both of the component constructor like this?
class ChatList extends Component {
constuctor(props) {
super()
this.socket = io('localhost:3000');
}
.......
}
class Chat extends Component {
constuctor(props) {
super()
this.socket = io('localhost:3000');
}
.......
}
Or somewhere else just once? Because if i did it like above, it connecting several times to my express backend...

Answer 1

You should only connect to socket server once and switch connection when needed. My suggestion is create a class service that control connection logic and all component that need to listen to this connection channel will subcribe to the service. Example:
class SocketService {
constructor() {
this.connection = null
this.listener = []
}
connect(server) {
this.connection = io(server)
this.connection.<on_receive_messages> = this.onMessageReceived(data)
}
addListener(identify, callback = () => {}) {
this.listener[identify] = callback
}
removeListener(identify) {
delete this.listener[identify]
}
onMessageReceived(data) {
this.listener.map(callback => callback(data))
} ​
}
Then once user logged in, let connect your service
onUserLoggedIn() {
socket = new SocketService();
socket.connect("localhost:3000");
navigation.navigate("ChatList");
}
And inside your component
class ChatList extends Component {
componentDidMount() {
socket.addListener("ChatList", (message) => {
Alert.alert("message", message)
})
}
componentWillUnmount() {
socket.removeListener("ChatList");
}
.......
}
class Chat extends Component {
componentDidMount() {
socket.<switch_channel_or_something>
socket.addListener("Chat", (message) => {
Alert.alert("message", message)
})
}
componentWillUnmount() {
socket.removeListener("Chat");
}
}
It's not a complete code but you might get the idea