ReactJs UI中的Spring webflux数据

Question

我正在玩spring WebFlux。我已经创建了一个项目，该项目将监听mongo封顶的集合，并在数据到达时返回数据流量。
我正在我的repository方法中使用@tailable。

我的控制器看起来像这样

@GetMapping("/findall")
  public Flux<Product>> findAll() {
    return productRepository.findAllProducts().;
 }

一切正常。我通过添加一个doOnNext(...)对此进行了测试，每当有一个新项目添加到我的capped集合中时，doOnNext中的consumer就会被执行。

现在我想让这个显示在浏览器上。我想用ReactJs（我对前端是全新的）。

到目前为止，我还没有找到任何方法在浏览器中显示通量数据。我有什么办法可以做到这一点。

我试过这样的SSE（服务器发送的事件）

 componentDidMount() {
   this.eventSource = new EventSource('http://localhost:8080/findall');
   this.eventSource.addEventListener('product', (data) => {
            let json = JSON.parse(data.data)
            this.state.products.push(json.name)
            this.setState ( {
                products : this.state.products
            })
        });
 }

这工作起来非常好，但要使其工作，我必须像这样更改服务器端代码

 @GetMapping("/findall")
  public Flux<ServerSentEvent<Product>> findAll() {
    return productRepository.findAllProducts().map(data -> ServerSentEvent.<Product>builder().event("product").data(data).build());
  }

在我看来，这有点紧密耦合，因为UI应该知道要监听的事件类型('product')。

有没有其他方法可以从UI端处理事件流（特别是使用reactjs)？

Answer 1

您不应该为了将数据流化到浏览器而更改控制器。下面的代码段应该可以工作：

@GetMapping(path="/findall", produces=MediaType.TEXT_EVENT_STREAM_VALUE)
@ResponseBody
public Flux<Product>> findAll() {
    return productRepository.findAllProducts();
}

如果您想查看完整的工作示例，您可以在本研讨会和本示例应用程序中看到该功能。