如何在 Angular $http 中处理来自 Express response.write() 的响应

Question

I'm trying to upload a csv file using ng-file-upoad . Here is my code snippet:

Upload.upload({
   url: baseUrl + '/file-upload',
   data: {
      file: file
   }
 })
 .then(function(res) {
    console.log('success: ===> ', res);
 }, function(err) {
    console.log('erroir: ===> ', err);
 }, function() {
    console.log('progress: ', arguments);
 });

And in node environment I'm parsing the file and inserting the data in database. I don't want to close the connection. That's why I used "response.write". Here is my code snippet:

var path = req.files.file.path,
    currentIndex = 0;

fs.readFile(path, 'utf8', function(err, data) { 
    if(err) {
         // handle error
    } else {
        // making array (dataArray) from data
        dataArray.forEach(function(eachData){
            newEntry = new app.db.models.SomeCollection(eachData);
            newEntry.save(function(err, data) {
              if (currentIndex === dataArray.length) {
                 res.end('DONE!');
              } else {
                  currentIndex++;
                  res.write(JSON.stringify({
                     total: dataArray.length,
                     done: currentIndex
                  }));
              }
            });
        })
    }
});

My question is how I will get the data I'm passing in "res.write"? I don't want to use socket for only this purpose. Am I missing something?

Answer 1

As already explained here :

response.send(msg) is equal to response.write(msg);response.end();

Which means, send can only be called once, write can be called many times, but you must call end yourself.

You are probably not receiving the response because response.end() is missing.

Once you end() your response you should be able to access the response data in your angular controller in the Upload.upload promise that is returned.

It's not like close a connection as you said. This is not a socket-ish like implementation (such as ws or socket.io ). Once a request is made it should have a response even if it is to provide error details about that request (ie status 401, 403, 404, etc).

Answer 2

in your angular component:

  ...
  constructor(private incrementalService: IncrementalService) {}
   
  incrementalTest() { //activate with a button or whatnot
    this.incrementalService.increment().subscribe( (result:any) => {
      if (result.partialText) {
        console.log(partialText); //do whatever you need to do with your partial results here!
      }
    })
  }

your angular service:

   import { HttpClient, HttpHeaders } from '@angular/common/http';
   public class IncrementalService {

     constructor(private http: HttpClient) {}

     increment(): Observable<ArrayBuffer> {
        const options = {
          reportProgress: true,
          responseType: 'text',
          observe: 'events'
        }
        return this.http.request('get', 'http://someURL', { ...this.addRawHeaderOptions(), ...options});
     }

     private addRawHeaderOptions() {
        const authHeaders = new HttpHeaders({
          'Content-Type': 'text/html',
          //authorization, Cache-Control: 'no-cache, Pragma:'no-cache', et al.     }
        return { headers: authHeaders }
     }
   }

Finally, your back-end service (this is express, but should work similarly for raw node):

  async function(request, response) {
    const increments = [ 1,2,3,4 ];
    response.set('Content-Type', 'text/html');
    for (const value of increments) { //contains async call - not switch-outable for a forEach.
      response.write(`increment - ${value} `);
      const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
      await delay(1000)
    }
    response.status(200).end()
  }

browser console output when run:

• increment - 1
• increment - 1 increment - 2
• increment - 1 increment - 2 increment - 3
• increment - 1 increment - 2 increment - 3 increment - 4

.!Sorry for any typos - i had to transcribe this from a locked-down machine.