Started writing this in the AM, and then got busy with work…
If you are not using redux or some global state thing, the right approach would be a context in the ClientContainer.
Here is a gist of what that might look like.
Not tested, but should work.
You could combine the above with a ChannelContext that was responsible for managing and communicating the channel data/status to child components.
This should be imported on the client container, or maybe app.js, but not in components down the tree that end up on the server render. Which is the problem I think you are having… this websocket stuff will not work in the context of node without some help - like the channel logger I linked above.
It can be done for sure - but if you have an authenticated socket, that authentication would need to be considered when connected back to localhost from the server render node process..
Take a look at the kinda hoops are required for hydrating state in apollo for example:
As you point out, this is a bit challenging if you are doing stuff with sockets all over your tree..this is why i suggest very carefully locating the socket related code - and you probably will need to use something like redux to hook it up with react properly - or else you will have re-renders all over the place…
