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("对方回答结束...关闭...");
      }
    },
  });
};
相关推荐
Codelinghu16 分钟前
做后端的我在公司造了一个前端轮子,领导:嘿!你他娘的真是个天才。
前端
小old弟21 分钟前
vue3模板中ref的实现原理
前端·vue.js
招风的黑耳25 分钟前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
Captaincc28 分钟前
用MCP 让Claude控制ChatGPT 4o,自动生成吉卜力风格的分镜
前端·claude·mcp
京东云开发者31 分钟前
自增主键去哪了?---一次开发过程中的思考
java
阿白的白日梦34 分钟前
JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。ts 无法使用 JSX,除非提供了 "--js
前端·javascript·typescript
amagi60034 分钟前
关于黑马程序员微信小程序案例3-3的静态配置问题
前端
点点滴滴的记录38 分钟前
Sentinel 相关知识点
java·微服务·sentinel
curdcv_po38 分钟前
React 进阶:useReducer 详解与实战指南
前端