获取第三方接口的EventStream返回给前端，SpringBoot+Vue+WebFlux+SseEmitter

获取第三方接口的EventStream返回给前端

最近项目有个需求，获取第三方gpt接口提供的AI聊天服务，回显给前端，其实就是http请求第三方接口并拿到EventStream流，推送给前端。
试了下RestTemplate，不太理想，于是使用WebFlux，直接上核心代码：

后端：

    private static SseEmitter sendEventStreamPost(String url, String jsonData){        SseEmitter emitter = new SseEmitter();        Mono.fromCallable(() -> {                    WebClient.create(url)                            .post()                            .contentType(MediaType.APPLICATION_JSON)                            .accept(MediaType.TEXT_EVENT_STREAM)                            .body(BodyInserters.fromValue(jsonData))                            .retrieve()                            .bodyToFlux(byte[].class)                            .doOnNext(data -> {                                try {                                    emitter.send(data);                                } catch (IOException e) {                                    log.error("Event Stream Exception:" + e);                                }                            })                            .doOnError(error -> {                                log.error("Event Stream Error:" + error);                            })                            .doOnComplete(() -> {                                emitter.complete();                            })                            .subscribe();                    return emitter;                })                .subscribeOn(Schedulers.boundedElastic())                .subscribe();        return emitter;    }

其中曾踩了一些坑：
1.原本是bodyToFlux(String.class)，结果没有返回也没有报错，排查了许久，最终改成bodyToFlux(byte[].class)
2.原本未使用Mono.fromCallable进行异步请求，结果其实是一次获取到完整的流再给前端，与长连接实时输出信息相悖。实际应该把SseEmitter返回给前端，异步调用接口对SseEmitter进行写入并且在完成后emitter.complete()关闭流。

前端，vue框架：

import { fetchEventSource } from '@microsoft/fetch-event-source'methods: {    test() {      var data = {        sendContent: "你好,你能帮我做些什么"      }      if ('EventSource' in window) {        const url = 'http://xxx/api/help/chat/sendMsgStream'        var _this = this        fetchEventSource(url, {          method: 'POST',          headers: {            "Content-Type": 'application/json',            "Accept": "*/*"          },          body: JSON.stringify(data),          onmessage(event) {            console.info("event.data:", event.data);            const eventData = event.data            _this.msg += eventData          },          onerror(err) {            console.log('err:',err)          }        })      } else {        console.log("error")      }    }  }

其中msg绑定的是聊天窗口的机器人答复，目前前端代码并不完善，在eroor时并未断开连接，等解决了再编辑