4

我想了解如何使用 WebFlux restcontroller 从 React 生成 json 流。我的第一个尝试迫使我解析为 json 的文本 instetad，但我觉得我在做一些奇怪的事情。我决定投入精力阅读示例，我发现一个示例返回 org.reactivestreams.Publisher 而不是返回 WebFlux。

我发现了一个可以帮助我的老话题（无法在 React-Native 客户端中使用 Webflux 流式响应），但它没有一个单一的答案。好吧，它驱使我在某个地方读到 React 可能不符合 Reactive 但这是一篇非常古老的帖子。

从互联网上获取样本，如果您查看https://developer.okta.com/blog/2018/09/25/spring-webflux-websockets-react基本上您会发现：

WebFlux 产生 Json 但不流式传输：

RestController producing MediaType.APPLICATION_JSON_VALUE and returning org.reactivestreams.Publisher<the relevant pojo>

反应消耗 json：

 async componentDidMount() {
    const response = await fetch('relevant url');
    const data = await response.json();
  }

我尝试过类似的方法，但有两个显着区别：

我返回 MediaType.TEXT_EVENT_STREAM_VALUE 因为我相信我应该更喜欢返回流，因为我正在使用无阻塞代码，而不是返回 org.reactivestreams.Publisher 我知道返回 Webflux 更有意义，以便正确利用 Spring 5 +。

我的 Webflux 休息控制器：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.mybank.web.model.Loans;
import com.mybank.web.service.LoansService;

import reactor.core.publisher.Flux;

@RestController
public class LoansController {
    @Autowired
    private LoansService loansService;

    @CrossOrigin
    @RequestMapping(method = RequestMethod.GET, produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    @ResponseBody
    public Flux<Loans> findAll() {
        Flux<Loans> loans = loansService.findAll();
        return loans;
    }
}

结果显然是一个流，但不是 json（从 Postman 复制）：

data:{"timestamp":1558126555269,"result":"8"}

data:{"timestamp":1558132444247,"result":"10"}

data:{"timestamp":1558132477916,"result":"10"}

data:{"timestamp":1558132596327,"result":"14"}

该堆栈基于 MongoDb 和 Spring boot，但我不会在这里粘贴，因为它不相关。

反应

  async componentDidMount() {
    const response = await fetch('http://localhost:8080');
    const data = await response.json();
  }

由于非常明显的原因，我收到“未捕获（承诺）SyntaxError：JSON 中位于位置 0 的意外令牌 d”：我没有返回有效的 json。

然后，如果我将 Webflux 控制器更改为生成 json（生成 = MediaType.APPLICATION_JSON_VALUE），其余控制器对我的回答既不是流也不是无阻塞代码的结果。

[
    {
        "timestamp": 1558126555269,
        "result": "8"
    },
    {
        "timestamp": 1558132444247,
        "result": "10"
    },
    {
        "timestamp": 1558132477916,
        "result": "10"
    },
    {
        "timestamp": 1558132596327,
        "result": "14"
    }
]

有了这样的答案，React 前端可以解析，但我知道我没有利用流媒体。有人可能会争辩说，这样简单的例子在流式传输中毫无价值，但我的学习目的实际上是集中在使用 webflux + react 消费流正确理解和编码。

最后，在阅读https://spring.io/blog/2017/02/23/spring-framework-5-0-m5-update之后，我更改了 webflux restcontroller 以生成 APPLICATION_STREAM_JSON_VALUE 并且我也尝试了 producer = "application/stream+ json”。对于这两种尝试，restcontroller 的答案似乎是一个 json 流，但 React 再次抱怨：

{"timestamp":1558126555269,"result":"8"}
{"timestamp":1558132444247,"result":"10"}
{"timestamp":1558132477916,"result":"10"}
{"timestamp":1558132596327,"result":"14"}

React 方面的错误：

Unexpected token { in JSON at position 41

总结一下：我没有发现如何从 React 消费一个 Webflux Restcontroller 产生 Json 流。

也许一个可能的答案是“通过使用这个库来改变 React 并以这种方式使用”或者答案是“编码 Webflux Restcontroller 以返回该格式”。顺便说一句，在阅读了我在 React + Webflux 主题下找到的所有示例后，我被卡住了。

换句话说，我的直接问题是：如何使用 webflux 端点从 React 生成 json 流？

4

2 回答 2

1

您是否尝试过使用 EventSource 来消费流？有点晚回复，但希望它可以帮助你。

const source = new EventSource('/api-stream-endpoint');

source.onmessage = function logEvents(event) {
      console.log(JSON.parse(data));
}
于 2021-01-06T22:20:18.000 回答
-1

服务器正在按预期生成单个 JSON 字符串流；但是，客户端在一个请求中接收它们。

也就是说，客户端正在尝试解析{ id: 1 } { id: 2 }并在第二个上失败{。

如果您将服务器切换到 production APPLICATION_JSON，服务器将接收到集合[{ id: 1 }, { id:2 }]并且它应该可以工作。

于 2019-11-13T15:04:31.030 回答