如何在Angular HTTPClient中处理流？

Question

如何在Angular HTTPClient中处理流？

3

我有一个后端(Spring Boot) API，它将数据块写入响应中。我正在尝试从我的Angular代码中读取这些数据块。我预期从服务器接收到数据块。然而，httpClient的get方法直到从服务器检索到所有数据之后才返回任何内容。下面是我的代码：

Spring Boot 代码

@GetMapping(value = "/stream", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public ResponseEntity<StreamingResponseBody> fetchData(@RequestParam String path) {
    try {
        Pair<InputStream, Long> streamAndLen = CommonUtils.getTestStream();
        InputStream stream = streamAndLen.getKey();
        StreamingResponseBody resp =  outputStream -> {
            CommonUtils.copy(stream, outputStream);
            stream.close();
        };
        return ResponseEntity.ok()
            .header(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_TYPE)
            .header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE)
            .contentLength(streamAndLen.getValue())
            .contentType(MediaType.APPLICATION_OCTET_STREAM)
            .body(resp);
    } catch (Exception e) {
        throw new RuntimeException("Could not get the data for the requested file", e);
    }
}

==============CommonUtils==================

public static Pair<InputStream, Long> getTestStream() {
    File file = new File("file_path_in_system");
    try {
        return new Pair<>(new FileInputStream(file), file.length());
    } catch (FileNotFoundException e) {
        e.printStackTrace();
        throw new RuntimeException("File " + file.getAbsolutePath() + " is not found.", e);
    }
}

public static void copy(InputStream stream, OutputStream outputStream) {
    try {
        int buffSize = 1024 * 4;
        byte[] data = new byte[buffSize];
        int length = -1;
        while ((length = stream.read(data)) != -1) {
            outputStream.write(data, 0, length);
            outputStream.flush();
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Pair只是一个键值对的POJO。

Angular片段

let headers = new HttpHeaders().set('Accept', 'application/octet-stream');
this.http.get(env.streamURL + '?path=' + this.filePath, { headers, observe: 'body', reportProgress: true, responseType: 'blob' })
  .pipe(
    map(res => {
      console.log(res);
    })
  )
  .subscribe(
    (res: any) => {
      console.log('res = ' + res);
    }
  );

我希望在我的Angular应用程序中获取数据块 (在从服务器调用flush之后) 而不是等待所有的数据块。是否有方法可以实现这一点？

- user1223879

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vishal Petkar · Accepted Answer

如果您想从服务器获取块，我建议使用HTML 5 API，即SSE。

您可以在此处阅读更多信息： https://www.w3schools.com/html/html5_serversentevents.asp 此外，您可以在下面的链接中查看演示： https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse