通过XHR将Node.js响应流式传输到客户端

Question

I have an Express.js server with a route that is responsible for parsing and importing a CSV file.

I'd like to report the status of the import process in realtime back to the user's browser.

Streaming responses from Express.js is straight forward:

router.get( '/test', function( _req, _res, _next ) {
    _res.write( 'File import initiated.' );

    // ... processing CSV in loop

    _res.write( 'Processing row x.' );

    // artificial delay to simulate some i/o
    setTimeout( function() {
        _res.write( 'File import completed successfully.' );
        _res.end();
    }, 2000 )
} );

Sending a HTTP request to the endpoint via CURL works as expected. In the above example two streamed responses are received immediately, followed by the final response after two seconds.

This is not the case in the browser (Chrome) however. Testing both with jQuery $.ajax , and a raw XHR call, the entire response appears to be buffered and returned all at once when the response is complete.

How is this type of communication normally handled? I assume socket.io is an option, but surely there's a simpler way to utalise the build int XHR or XHR2 features of the browser?

Answer 1

You can give back a reference id to the client, and the client calls the correct http api's to gather the status of that csv processing request. You might want some backend support to enable this. Something like some tables in the database that can track this status.

router.get( '/test', function( _req, _res, _next ) {
    SaveFile(_res.file).then(function(id) {
        _res.end(JSON.stringify({id: id});
    });
});

router.get( '/status', function( _req, _res, _next ) {
    GetStatus(_res.params.id).then(function(status) {
        _res.end(JSON.stringify(status));
    });
});

Else, if you still want realtime, employ websockets. You've to design the form of communication you expect.