Suggestions for organizing a large Halogen or React-Basic-Hooks SPA with websockets

I’m interested in what the best practices are for using websockets in larger applications. I understand that with react+flux the general suggestion is to stick them in middleware, but there isn’t really such a thing with Halogen (yet.) The approach that seems to make the most sense to me is to have the websocket be owned by the root component, and then have it make edits to either a halogen-store, mutuate local state, or distribute information to children. Does anyone have any suggestions?

I would also be very interested in hearing what the best practices might be with purescript-react-basic-hooks as well.



Assuming the payload for the websocket is a string, you can use an Action that accepts the string. For example:

data Action = Initialize | DoWebsocket String | Finalize

Then, you can use the emitter/listener system & HS.notify to dispatch the action. How you handle the action is up to you - one option, as you suggest, is mutating the state, but there are others (ie firing off background task, etc).

This is the pattern I’ve used, but there may be others, curious what folks have to say.

Happy coding, feel free to ask any follow up questions!

1 Like

The equivalent to “middleware” would be to add capabilities your underlying application Monad. You can have an abstract effect that lets you subscribe to resources, which may have batched and shared connections under the hood. I’d look at halogen-realworld to get some inspiration for handling effects.


This older thread on Halogen & WebSockets might be useful for you also:

1 Like