Webflux / Angular慢速服务器端事件vs http-client

Question

我正在本地运行一个带有angular和webflux的演示，点击一个webflux端点，从db返回3张大小为〜（20MB，1k，20MB）的照片

在角度服务上使用http-client和SSE的时间差异很大，我在这里遗漏了什么？

弹簧控制器

@RestController
public class PhotoController {

    @GetMapping(value = "/photos")
    public Flux<Photo> getAllPhoto() {
        return photoService.findAll();
    }
}

角度服务

     getWithGET(): Observable<any> {
         return this.http.get(this.URL);
     }

    getWithSSE(): Observable<any> {
        return Observable.create(obs => {
            const es = new EventSource(this.URL);
            es.addEventListener('message', (evt) => {
                obs.next(evt);
            });
            return () => es.close()
        });
    }

角度分量

clickGET() {
  this.requestsService.getWithGET()
  .subscribe(
    data => console.log(data);

}
clickSSE() {
  this.requestsService.getWithSSE()
  .pipe(take(3))
  .subscribe(
    message  => console.log(message );
  }

Answer 1

你没有像你想象的那样返回一系列照片。您需要告诉您的方法使用正确的响应类型。

@GetMapping(value = "/photos", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<Photo> getAllPhoto() {
    return photoService.findAll();
}

这将使您的Angular应用程序正确处理事件，并且更快。