Custom Event emitter/consumers in Browser Javascript outside DOM


Custom Event emitter/consumers in Browser Javascript outside DOM



Currently I have the following structure, an Object WebsocketService and multiple FrontendControllers.


WebsocketService


FrontendController



The WebsocketService listens on a websocket (duh) and updates the internal application state. This means in some cases the front end must be updated with new values.


WebsocketService



To keep my UI code and the application logic nicely seperated I envision a design where the FrontendControllers can subscribe to events emitted the WebsocketService and very likely other Services later on.


FrontendController


WebsocketService



I have read the documentation for Creating and triggering events on MDN. But all of that is very DOM centric. My WebsocketService obviously doesn't have an addEventListener function.


WebsocketService


addEventListener



I would prefer to not use 3th-party libraries. A hack that comes to mind is simply have an id="events" DOM Node somewhere and having everyone subscribe to that. Then dispatchEvents on that Element and have the FrontendControllers decide that they care about.


id="events"


dispatchEvent


FrontendController



Of course I could also implement my own infrastructure for all this, but I'd also prefer to avoid that, because I'm lazy.



What is the clean way to do this? Or is there a much better solution to decouple my application logic and frontend in plain old javascript?



This question has not received enough attention.









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Export result set on Dbeaver to CSV

Opening a url is failing in Swift