dify+vue+java接入大模型流式输出

接口风格应该都是openAI

一、后端

后端使用常规的spring boot,需要检查安装包,需要使用到webFlux+SseEmitter

XML 复制代码
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

controller层

java 复制代码
@PostMapping(path = "/test", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter queryPage(@RequestBody TestParam param){
    return testService.test(param);
}

service层

java 复制代码
import cn.hutool.json.JSONObject;
import cn.kunming.kgoa.service.aihelper.api.model.param.TestParam;
import cn.kunming.kgoa.service.common.api.utils.SecurityUtil;
import io.netty.channel.ChannelOption;
import lombok.extern.slf4j.Slf4j;
import org.springframework.core.ParameterizedTypeReference;
import org.springframework.http.client.reactive.ReactorClientHttpConnector;
import org.springframework.http.codec.ServerSentEvent;
import org.springframework.stereotype.Service;
import org.springframework.web.reactive.function.client.WebClient;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import reactor.core.publisher.Flux;
import reactor.netty.http.client.HttpClient;




public SseEmitter test(TestParam param){
    SseEmitter emitter = new SseEmitter(300_000L);

    HttpClient httpClient = HttpClient.create().tcpConfiguration(tcpClient -> tcpClient.option(ChannelOption.CONNECT_TIMEOUT_MILLIS, 10000));
    WebClient client = WebClient.builder().clientConnector(new ReactorClientHttpConnector(httpClient))
            .baseUrl("http://192.168.70.226/v1")
            .build();
    ParameterizedTypeReference<ServerSentEvent<String>> type = new ParameterizedTypeReference<ServerSentEvent<String>>() {
    };
    JSONObject body = new JSONObject();
    body.set("inputs", new JSONObject());
    body.set("query", param.getContent());
    body.set("user", SecurityUtil.getUserId().toString());
    body.set("response_mode", "streaming");
    body.set("conversation_id", param.getConversationId());

    log.info("Dify chat body: {}", body);
    Flux<ServerSentEvent<String>> eventStream = client.post()
            .uri("/chat-messages")
            .header("Authorization", "Bearer " + "app-dgEzITfxrVqxrgSyRnS7p3I1")
            .header("Content-Type", "application/json")
            .bodyValue(body.toString())
            .retrieve()
            .bodyToFlux(type);

    eventStream.subscribe((content) -> {
        String data = content.data();
        log.info("收到数据:"+data);
    }, emitter::completeWithError, emitter::complete);
    return emitter;
}

二、前端

前端需要使用fetch-event-source框架,因为需要使用post进行参数传递,默认的SSE是不支持post方法的。

bash 复制代码
npm install @microsoft/fetch-event-source

实现代码

javascript 复制代码
import { fetchEventSource } from "@microsoft/fetch-event-source";

const ctrl = new AbortController();
let content = ref("你好");
let send = function (content) {
  var url =
    "http://localhost:8001/kgoa-service-aihelper/aihelper/test/test";
  fetchEventSource(url, {
    method: "POST",
    headers: {
      Accept: "*/*",
      Connection: "keep-alive",
      "Content-Type": "application/json",
      Authorization: "pc_3aaac4d1343a3526cc86dd1d0f4eda35",
    },
    body: JSON.stringify({
      content: content,
    }),
    signal: ctrl.signal,
    async onopen(response) {
      console.log("Connection to server opened.");
    },
    onmessage(msg) {
      let data = JSON.parse(msg.data);
      console.log(data);
    },
    onclose() {
      // if the server closes the connection unexpectedly, retry:
      
    },
    onerror(event) {
      console.log(event);
      if (event.target.readyState === EventSource.CLOSED) {
        console.error("EventSource connection closed by the server.");
      } else if (event.target.readyState === 0) {
        console.log("对方回答结束...关闭...");
      }
    },
  });
};
相关推荐
liliangcsdn几秒前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero4 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui7 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴10 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte13 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常15 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常16 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾18 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101820 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Shimiy25 分钟前
第六章 面向对象编程------进阶
java