代码之家 › 专栏 › 技术社区 › pvpkiran

ReactJs UI中的Spring webflux数据

spring-webflux server-sent-events reactjs

1

pvpkiran · 技术社区 · 8 年前

我正在玩spring webflux。我创建了一个项目,该项目将监听mongo封顶的收集,并在收到数据时返回数据流量。
我正在使用 @Tailable 在我的存储库方法中。

我的控制器看起来像这样

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

这工作非常好。我用addind a测试了这个 doOnNext(...) ,每当有新项目添加到我的capped collection中时,将执行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应该知道要侦听的事件类型(“产品”)。

是否有其他方法来处理UI端的事件流(尤其是 reactjs ) ?

1 回复 | 直到 8 年前

1

Brian Clozel 8 年前

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

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

您可以看到此功能正在中使用 this workshop 和 this sample app 如果你想看到一个完整的工作示例。