React SocketContext: 2 Components using 1 Websocket - reactjs

Question

MY PROBLEM
I have a server which receives streaming data over UDP and rebroadcasts the data over websockets. In my front-end I have 2 different components which pick up the data and render the values. Whenever my server broadcast the object, key A is picked up by component 1. And key B should be picked up by component B.
For debugging purposes, the code below works smooth if I were to use a single component, but as soon as I use both only 1 is able to fetch and update data correctly while the other does nothing. What am I doing wrong?
MY SERVER (Just the important stuff)
# Dict to hold values
var data = {"score" : 0, "session" : 0,}
# handle different incoming UDP packets
client.on(PACKETS.session, handle_session);
client.on(PACKETS.score, handle_score);
#update data.session object with new values
function handle_session(data) {
data['session'] = data.session
websocket.broadcast(data);
}
#update data.score object with new values
function handle_score(data) {
data['score'] = data.score
websocket.broadcast(data);
}
# Broadcast data function gets called in handle functions.
websocket.broadcast = function broadcast(data) {
websocket.clients.forEach(function each(client) {
console.log(data);
client.send(data);
});
};
MY REACT APP
CONTEXT.JS - Create my socket
export const socket = new WebSocket("ws://localhost:8000")
export const SocketContext = React.createContext();
APP.JS - I wrap both my components in SocketContext
function App() {
return (
<div className="App">
<SocketContext.Provider value={socket}>
< Score />
< Session />
</SocketContext.Provider>
</div>
SCORE.JS - Component number 1 loads the socket from context.
function Score() {
const [score, setScore] = useState(0)
const websocket = useContext(SocketContext);
useEffect(() => {
websocket.onmessage = function(e) {
var packet = JSON.parse(e.data);
setScore(packet.score)
}
}, [websocket,]);
return (
<h6>{score}</>
);
}
export default Score;
SESSION.JS - Component number 2 loads the same socket from context.
function Session() {
const [session, setSession] = useState(0)
const websocket = useContext(SocketContext);
useEffect(() => {
websocket.onmessage = function(e) {
var packet = JSON.parse(e.data);
setSession(packet.session)
}
}, [websocket,]);
return (
<h6>{session}</>
);
}
export default Session;
So when running the frontend and adding console logging in useEffect for both components, Only one runs at the time. Then when reloading the app. Another one runs. They never run both at the same time.

Answer 1

Do you have any specific error messages in the console?
This bit on the server-side seems problematic:
data['score'] = {data.score}
It seems that should be:
data['score'] = data.score;
Edit*
Also another issue I see is variable scope overwriting:
You set:
var data = {"score" : 0, "session" : 0,}
But later both your functions use data in their local scope which is not good and would cause issues:
function handle_session(data) {
Should probably be:
function handle_session(d) {
Also this:
websocket.broadcast = function broadcast(data) {
Should probably be:
websocket.broadcast = function broadcast(d) {
These functions can share the same inner scope variable, d because they are siblings.
***EDIT, UPDATED ANSWER
The issue is with the use of websocket.onmessage. Since websocket is a single instance shared between components, once the listener is set on the onmessage property inside App.js, subsequent children components will be ignored when they try to set the same listener on the same property on the same websocket instance.
The key is to use addListener instead!
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event
I created a simple working React <> Express <> Websocket App example of your situation, resolved by using addListener. I reproduced your exact problem.
Now all 3 component's useEffects will properly listen as you expected.
Open a terminal and run: npm run dev
https://codesandbox.io/p/sandbox/bitter-mountain-q3x118
Hope that helps!