phanect phanect - 22 days ago 9
Ajax Question

Show status of long process running on server side

I'm working for CSV import in my Node.js based web app.
Most given CSV files has tens of thousands of records, and it takes several minutes.

So until import finish, I want to show users "Currently importing..." message.

What I want to create is similar to Github's forking screen. After you press fork button on top right of repo, it shows message that "Forking / It should only take a few seconds." until fork finishes.
In addition, I want to add progress bar to indicate percentage of processed records hopefully.

Current my implementation is:


  1. Client send request with CSV data

  2. Server processes received CSVs and insert records to DB.

  3. Server respond 200 if CSV is valid.



But with implementation users cannot see current status. Even sometimes socket hangs up.

I'm considering following reimplementation:


  1. Client send request with CSV data

  2. Server respond 200 to tell client that CSV is received

  3. Server starts to process received CSVs and insert records to DB.



However, I have no idea:


  1. how client know that import is done

  2. how client know when error is occur in CSV processing and DB insertion



How can implement server side?
Thanks in advance ;)

Answer

You need to use socket.io here to keep track of the progress. As soon as you receive the CSV, your client could connect to socket.

Server:

io.on('connection', function (socket) {
    console.log('CONNECTED');
    socket.join('progressSession');
});

You can periodically emit progress event to let the client know how many records you've been processed. (I hope you're processing records asynchronously, or can at least run some other code in between)

io.sockets.in('progressSession').emit('progress', noOfRecords);

And, Client can listen on progress event and show it to the user

var socket = io.connect('http://localhost:9000');
socket.on('progress' , function (status){
    console.log(status);
    // show status to the user
});

Comment if need any more clarity.