Webflux/Angular 慢服务器端事件与 http-client答案

【问题标题】：Webflux/Angular slow Server side events vs http-clientWebflux/Angular 慢服务器端事件与 http-client
【发布时间】：2018-11-14 15:05:03
【问题描述】：

我正在本地运行一个演示，使用 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 );
  }

【问题讨论】：

后面的调用也这么慢吗？还是只是第一个？
@piotrszybicki 有一个带有第一个服务的请求和一个带有第二个服务的请求，getWithSSE 比 getWithGET 慢得多，两个请求都返回相同的数据（3 个大小为 20MB、1k、20MB 的对象）跨度>

标签： spring angular server-sent-events spring-webflux angular-httpclient

【解决方案1】：

您不会像您想象的那样返回照片流。您需要告诉您的方法使用正确的响应类型。

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

这将使您的 Angular 应用正确且更快地处理事件。

【讨论】：