reactjs - 如何使用 webflux 端点从 React 生成 json 流

Question

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

我发现了一个可以帮助我的老话题( Unable to Consume Webflux Streaming Response in React-Native client )，但它没有一个答案。好吧，它驱使我读到 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> 

react 消费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 休息 Controller :

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，但我不打算在此处粘贴，因为它不相关。

react

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

我收到“Uncaught (in promise) SyntaxError: Unexpected token d in JSON at position 0”，原因很明显:我没有返回有效的json。

然后，如果我更改 Webflux Controller 以生成 json(produces = MediaType.APPLICATION_JSON_VALUE)，其余 Controller 对我的回答既不是流也不是无阻塞代码的结果。

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

有了这样的答案，React 前端可以解析，但我知道我没有利用流媒体。有人可能会争辩说，对于这样一个简单的例子，在流媒体中思考毫无值(value)，但我的学习目的真正集中在使用 webflux + react 消费流正确理解和编码。

终于看完了 https://spring.io/blog/2017/02/23/spring-framework-5-0-m5-update我更改了 webflux restcontroller 以生成 APPLICATION_STREAM_JSON_VALUE 并且我还尝试了生成 =“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 流？

Answer 1

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

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

source.onmessage = function logEvents(event) {
      console.log(JSON.parse(data));
}