How to organize work with WebSocket?

Question

React

Good afternoon, you need to subscribe to WebSocket from different components at different levels.

Where should I connect?

I have 2 options:
1. Use the context by passing the connection
2. Connect in a separate file, and subscribe to updates in the useEffect component.

But I didn’t find any good examples where it’s not a blunder “right now, in useEffect, we’ll quickly set everything up,” I didn’t find.
It is not clear how and where to do error handling, disconnection, etc.

Please tell me, maybe someone has some developments, or I saw high-quality github projects, and not a stump "it works, okay, it will do."

How do they usually organize work with ws, where are connections stored, how are they passed to components, how are disconnections handled?

Answer 1

Depends on the size of the project and further support. If one-two-spit, then at least through `window.ws = new WebSocket()`. If you already need something more concise, then I would try to isolate the socket connection from the components as much as possible. I would make it so that some context would only pass business methods to components. And he did the work with the socket under the hood, hiding it from the components.