Different WebSocket "onmessage" handlers depending on screen - reactjs

Question

My React Native app (iOS and Android) uses a single global WebSocket connection.
I want to respond to the same messages from the server differently depending on the screen, e.g. one way on the home screen (A) and differently on screen B.
Because the home screen is still mounted and "active" after screen B has been opened, presumably I can't just overwrite the websocket "onmessage" handler as that would lead to inconsistencies.
Can anyone point me in the right direction for what I'm trying to achieve?

Answer 1

Without seeing some code on what you're trying to achieve, I think what you want in general is a subscription model. You have only one handler registered with the socket, but that handler can delegate to other functions that can be added/removed as desired.
In general, I would recommend creating the websocket connection somewhere in the react tree such as a hook with a context provider. To avoid cluttering up the idea here, though, let's assume your websocket connection is defined a static context (i.e. in a module, rather than a component or hook).
// socket.js
const messageHandlers = new Set()
export const addMessageHandler = (handler) => {
messageHandlers.add(handler)
}
export const removeMessageHandler = (handler) => {
messageHandlers.delete(handler)
}
const socket = new WebSocket('ws://example.com')
socket.onmessage = (event) => {
messageHandlers.forEach((handler) => handler(event))
}
Then in your screen:
import { addMessageHandler, removeMessageHandler } from '/path/to/socket.js'
const SomeScreen = () => {
useCallback(() => {
const handler = (event) => { /* do something with event */ }
addMessageHandler(handler)
return () => removeMessageHandler(handler)
}, [])
}
This will keep the listener alive even if the screen is in the background. If you're using react-navigation, you can also make it register only while the screen is the current screen using useFocusEffect such as:
useFocusEffect(
useCallback(() => {
const handler = (event) => { /* do something with event */ }
addMessageHandler(handler)
return () => removeMessageHandler(handler)
}, [])
)