Utilizing Vue loaded from a script (not a CLI) in a file named admin.js, I have multiple components that interact with each other by emitting events. No Vuex is used in this setup. Additionally, there is another file called socket which creates a websocket and an onmessage event listener, completely separate from the Vue components.
Vue components can utilize the socket as it is defined like so:
var Socket = new WebSocket(wsServer + ":" + wsPort);
Since it is created in the main scope, all Vue components can access it for functionalities such as:
Socket.send({ ... })
In some scenarios, it may be necessary to analyze data from the socket and respond with data from multiple components.
I have considered two solutions for handling these situations:
In each component that needs to wait for data from the socket, add an event listener and call internal methods of the components based on the commands received. This approach involves sending data from the socket to components and reacting accordingly. However, this method could lead to complications due to event listeners multiplying and difficulties in managing them.
Retrieve data directly from components through the socket. In this case, when a specific message is received in the event listener onmessage, check the components for the required data and react accordingly.
This process would look something like this:
Socket.onmessage = function(e) {
let json = JSON.parse(e.data);
if (json.cmd == "CALLDATA") {
// Retrieve data from Vue component
let obj = objectized data from the component
Socket.send(obj)
}
}
Now, the question arises:
How (or is it even possible) to retrieve data from one or more components from outside of Vue Components?