Search code examples
node.jsreal-timemean-stackangular8

Best way to send data from server to frontend in real time (MEAN)

I'm creating a nodejs (10.16) and angular(8) app whichs is intended to generate and mail png files based on a list. The user is supposed to enter to the principal page and load an excel file, then the app reads this file and turns it into an array like:

list = [
  [name1, [email protected]]
  [name2, [email protected]]
  [        ...           ]
  [namex, [email protected]]
]

Which is shown through a table as shown bellow:

enter image description here

Then, when the user clicks on the send button, the app creates the png files and send them to the given emails. This whole process (since the user clicks on send and when the server finishes to send the last email) can take 1-3 seconds with each mail, so if the user provides 10 mails, the process can take 30 seconds.

So what I want to do is to show a progress bar or some sort of notification mechanism to show the user which element is being handled and how many mails are pending to send in real time.

The matter is that , for example, I can show the names and emails when the user selects an excel file because what I do is to upload the file to the server (backend) and then it returns one specific response (a json actually) which can be handled in the frontend, but it is just one element that doesn't change with time.

So the question is, what resource/mechanism would you recomend me to send data from the backend to the frontend in real time? At this way I should be able to show what resource is being handled in real time.

I've researched a little and found info about Server Sent Events and Websockets but I really want to know if those are correct approaches and what alternatives should I have to consider.

Thanks!

Solution

  • Since the processing can take so long, you will need to keep communication from the server and receive multiple updates. Websockets are definitely appropriate here.

    Socket.io is a great library & easy to use for real-time communication for this purpose.