I am writing a simple chat using Node.js, Websockets and Vue.js. Specifically, I have a Vue instance and a Websockets Client. When a user presses a "Submit" button, Vue asks the Client to send a message to a Server. When the Client receives a message from the Server, it asks the Vue to render it to the page. My first thought was for the Vue to have a reference to Client, and for Client to have a reference to Vue, but the two objects become closely coupled. Is there a better way to enforce communication between these two objects?
You can use Observer pattern.
Vueinstance holds the reference to a
Clientinstance is observed by an
Clientinstance will push new event to its observer when it receive updates from the server.
Vueinstance subscribes to the
ClientObserverinstance so that it will re-render every time a new event comes.
In this case, the
Vue instance only keeps one reference to the
Client instance and the
Client instance only keeps on reference to the