blog/2020-11-30-diving_deeper_into_real_time_applications

[utterances-bot]

Abdelaziz Mahmoud: Diving Deeper Into SSL Certificates?

https://abdelaziz321.github.io/blog/2021-07-02-diving_deeper_into_ssl_certificates

[go4cas]

Hi @abdelaziz. This is a great article, thanks.

I have a real-time dashboard application, that consists of the following stack:

• On the client a vue.js app, with has a few dashboard pages, each with a number of different widgets (some dashboards have up to 40 widgets on the page) - each of these widgets calls a different API endpoint (at the moment I use short polling, which creates loads of HTTP calls in a short period of time)
• On the server I have node.js API. This API calls various external services (Zendesk API, some internal API's, SUrveYMonkey API, etc), and exposes a set of public endpoints tot the client app

Now, my question is, if I had to convert the stack to web sockets, would you foresee any issues by opening 40+ WS connections from the vue.js app to the node.js server? Or, is there a better way of dealing with my use case?

[abdelaziz321]

Hello @go4cas. glad you liked it.

I don't have much experience, so I can't assure what is the best solution, but here are some thoughts that could help:

• opening multiple web-sockets is possible but not necessary.

• different messages/events could be transferred over only one channel. so we may consider something like this quick example:

// fire events at different points in the server code
socket.emit('topSellerUpdated', { 'event_payload': event_payload });
socket.emit('dailyEarningChartDataUpdated', { 'event_payload': event_payload });
socket.emit('newOrderCreated', { 'event_payload': event_payload });
// ....

// listening to the server events and mapping the events payload to the different components.
socket.onAny((event, ...args) => {
  switch (event) {
     case 'topSellerUpdated': this.$store.commit('dashboard/UPDATE_TOP_SELLERS', ...args); break;
     case 'dailyEarningChartDataUpdated': this.$store.commit('dashboard/UPDATE_DAILY_EARNING_CHART_DATA', ...args); break;
     case 'newOrderCreated': this.$store.commit('dashboard/UPDATE_ORDERS', ...args); break;
     // ...
  }
});

• as you already using nodejs. you may consider researching about socket.io

• Also, you may consider caching - if possible - the external APIs called by node.js to reduce the response time.