I’m currently using Vue 2 with Laravel Echo to listen to incoming data stream via websocket (e.g. every 5 seconds) and display it on several widgets (e.g. 10-20) from a single Vue component. My goal is to minimize the latency for Vue to display the data since it was received by Laravel Echo. Right now, I’ve come across 2 methods and am wondering if one is better suited to achieve my goal, or if there’s a better way.
- Place the Laravel Echo listen in the App.vue and pass the incoming data stream as props (object) to the widget component
- Place the Laravel Echo listen in the widget component and update the data (object) in that component
I understand that in no.2, as the number of my widget grows, so will the number of listens from Laravel Echo. However, I feel that it has lower latency than no.1, judging by looking at how the data displayed in the browser.
a) Is there a way to more accurately test the latency between no.1 and 2?
b) If my hypothesis is true, is it because in no.2 the data update takes place within the component, hence it’s faster than in no.1 where the data update needs to go through props?
c) If it’s true that no.2 takes more less time for Vue to update the data displayed in the browser, would this latency slowly increase to a point where it becomes worse than that of no.1 as the number of widgets increases?
Would really appreciate any helps or tips provided.