How to notify front-end from backend?

Question

I am using multer for file uploading. On the server I have this:

stream.on('finish', () => {                                                                              
  console.log('finished')                                                                                
  next()
})

What would be the best way (with what command) to notify the frontend that 'finished' has happened? I want to know this in order to have a loading bar.

That's what websockets are for. The server can send data to the client, and vice-versa. Check out socket.io. Server : `socket.emit("upload finished")`, client : `socket.on("upload finished", function...)` — Jeremy Thille, Jun 08 '17 at 07:10
I've added that as an answer, I'd appreciate if you could validate it :) — Jeremy Thille, Jun 08 '17 at 07:13

score 5 · Accepted Answer · answered Jun 08 '17 at 07:12

5

That's what websockets are for. The server can send data to the client, and vice-versa. Check out socket.io.

Server : socket.emit("upload finished")

Client : socket.on("upload finished", function...)

answered Jun 08 '17 at 07:12

Jeremy Thille

26,047
12
43
63

score 2 · Answer 2 · answered Jun 08 '17 at 08:14

2

While Jeremy Thille 's answer works well, beware of broadcasting event to all.

Socket.emit() simply broadcasts message to all connected clients.

So you need to store the client id of the uploader and notify the progress only to that client and not all. Refer this.

answered Jun 08 '17 at 08:14

vinoth h

511
3
11

You're right, that's all listed in the doc (that's why I gave the link) – Jeremy Thille Jun 08 '17 at 08:46

score 1 · Answer 3 · answered Jun 08 '17 at 07:16

You can use sockets for this type of communication. socket.io is a node package for web sockets. In the server you have

socket.emit('done')

whereas in the client side you can attach to the emit to receive new data

socket.on('done', function (data) {
    // Do something with data
});

score 1 · Answer 4 · answered Jan 31 '23 at 12:55

Well, I know I am 5 years 7 months late but still I want to share my opinion. Socket is a really good approach but another way can also be SSE(Server Sent Events) to automatically notify the frontend via HTTP but you can notify the frontend using only text message .

For FrontEnd:

First you have to create eventsource object.

let sse = new EventSource(
       "URL for backend",
        { withCredentials: true }
      )

here credential is for the cookie to pass.

2.Now add eventListeners to get the result from backend.

see.onmessage = (e)=>{
let data = JSON.parse(e.data)
//now do whatever you want with the data
}

For Backend:

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const PORT = 5000;
let clients = [];

const event = (req, res) => {
 
  const headers = {
    'Content-Type': 'text/event-stream',
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache',
  }
  
  res.writeHead(200, headers)
  let message = { event_name: 'ONGOING' }

  const data = `data: ${JSON.stringify(facts)}\n\n`

  res.write(data)
  const clientId = Date.now()

  const newClient: Client = {
    id: clientId,
    response: res,
  }

  clients.push(newClient)

  req.on('close', () => {
    console.log(`${clientId} Connection closed`)
    clients = clients.filter((clients: Client) => clients.id !== clientId)
  })
};
const notifyEvent = ()=>{
 let newMessage = { event_name: 'FINISHED' }

  const data = `data: ${JSON.stringify(newMessage)}\n\n`
  
  // Send a message to each client
  clients.forEach((client) => client.response.write(data))
}
//Here goes your part
stream.on('finish', () => {                                                                              
  console.log('finished')
  return notifyEvent()                                                                         
  next()
})
app.get("/event", event);

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
});

So this is basically the whole thing. I am attaching a link which helped me to understand the SSE. https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app

How to notify front-end from backend?

4 Answers4