SpringBoot项目整合智谱AI + SSE推送流式数据到前端展示 + RxJava得浅显理解

已于 2024-08-27 19:02:07 修改
阅读量788 收藏 23
点赞数 13
分类专栏： Spring Boot 文章标签： 人工智能 java spring boot
于 2024-08-27 17:22:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73966521/article/details/141605291
版权

项目背景：

项目背景是一个这个AI答题应用平台，我引入AI得作用就是让AI根据我指定得这个题目的标题和描述来生成一些列的题目。（主要功能是这个，但是还用了AI给我评分，不过这个功能比较简单，在本文就简单介绍）。

引入并整合智谱AI功能：

引入：

首先还是先贴一个官方文档：

智谱AI开放平台 (bigmodel.cn)

大概的步骤就是：

引入依赖

直接复制官方文档的客户端代码（同步调用）

引入之后我们可以不着急去在项目中使用，可以先跑一个单元测试

@SpringBootTest
public class AItest {


    private final String Key = "自己的Key";
    //测试是否可以连接
    @Test
    public void test() {
        ClientV4 client = new ClientV4.Builder(Key).build();
        List<ChatMessage> messages = new ArrayList<>();
        ChatMessage chatMessage = new ChatMessage(ChatMessageRole.USER.value(), "作为一名营销专家，请为智谱开放平台创作一个吸引人的slogan");
        messages.add(chatMessage);
//        String requestId = String.format(requestIdTemplate, System.currentTimeMillis());

        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()
                .model(Constants.ModelChatGLM4)
                .stream(Boolean.FALSE)
                .invokeMethod(Constants.invokeMethod)
                .messages(messages)
                .build();
        ModelApiResponse invokeModelApiResp = client.invokeModelApi(chatCompletionRequest);
        try {
            System.out.println("model output:" + invokeModelApiResp.getData().getChoices().get(0));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

整体的代码逻辑：

首先先创建一个AI的客户端

接着拼接需要传给AI的信息列表，这里是ChatMessage

然后就是拼接这个需要发送的请求了

        里面有蛮多的参数

        model：模型，这个直接用最新的就行

        stream：就是指定流式还是非流式

        调用方法：这个默认就行

        message：就是你要发送的信息

最后发送调用接收返回值

对AI的这种工具的一个封装和简化的思想

对于这种工具类，就可以把这个封装成自己的SDK，以后自己直接引入即可

1：编写一个配置类将这个AI的客户端交给IOC容器管理：

@Configuration
@Data
public class AiConfig {

    private final String aiKey = "自己的key";


    @Bean
    public ClientV4 clientV4() {
        return new ClientV4.Builder(aiKey).build();
    }
}

2：编写这个工具类：

这里叫不叫工具类都可以，鱼皮老师的定义是需要引入Bean对象的可以在Manager包下管理

首先可以只有一个最简单的方法：

我们可以利用Java的重载来一层一层向上封装

我们可以考虑到，我们和AI对话，一般都是直接问他对吧，所以作为我们用户，我们最乐意的应该是直接传一个文本，但是这里我们还需要注意，我们为了让这个返回的答案更准确，我们可以封装一个系统的prompt，给AI一个背景。

所以我们向上封装：

我们在这个方法中只需要传系统的prompt和用户的prompt就可以了

还可以再往上封装

我们可以根据传递的参数

我们可以封装同步和异步：

其它都是同理了，直接看代码：

package com.ljh.aiplatform.manager;

import com.ljh.aiplatform.common.ErrorCode;
import com.ljh.aiplatform.exception.BusinessException;
import com.zhipu.oapi.ClientV4;
import com.zhipu.oapi.Constants;
import com.zhipu.oapi.service.v4.model.*;
import io.reactivex.Flowable;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;

/**
 * AI的请求
 */
@Component
public class AiManager {

    @Resource
    private ClientV4 clientV4;

    // 稳定的随机数
    private static final float STABLE_TEMPERATURE = 0.05f;

    // 不稳定的随机数
    private static final float UNSTABLE_TEMPERATURE = 0.99f;

    /**
     * 同步请求（答案不稳定）
     *
     * @param systemMessage
     * @param userMessage
     * @return
     */
    public String doSyncUnstableRequest(String systemMessage, String userMessage) {
        return doRequest(systemMessage, userMessage, Boolean.FALSE, UNSTABLE_TEMPERATURE);
    }

    /**
     * 同步请求（答案较稳定）
     *
     * @param systemMessage
     * @param userMessage
     * @return
     */
    public String doSyncStableRequest(String systemMessage, String userMessage) {
        return doRequest(systemMessage, userMessage, Boolean.FALSE, STABLE_TEMPERATURE);
    }

    /**
     * 同步请求
     *
     * @param systemMessage
     * @param userMessage
     * @param temperature
     * @return
     */
    public String doSyncRequest(String systemMessage, String userMessage, Float temperature) {
        return doRequest(systemMessage, userMessage, Boolean.FALSE, temperature);
    }

    /**
     * 通用请求（简化消息传递）
     *
     * @param systemMessage
     * @param userMessage
     * @param stream
     * @param temperature
     * @return
     */
    public String doRequest(String systemMessage, String userMessage, Boolean stream, Float temperature) {
        List<ChatMessage> chatMessageList = new ArrayList<>();
        ChatMessage systemChatMessage = new ChatMessage(ChatMessageRole.SYSTEM.value(), systemMessage);
        chatMessageList.add(systemChatMessage);
        ChatMessage userChatMessage = new ChatMessage(ChatMessageRole.USER.value(), userMessage);
        chatMessageList.add(userChatMessage);
        return doRequest(chatMessageList, stream, temperature);
    }

    /**
     * 通用请求
     *
     * @param messages
     * @param stream
     * @param temperature
     * @return
     */
    public String doRequest(List<ChatMessage> messages, Boolean stream, Float temperature) {
        // 构建请求
        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()
                .model(Constants.ModelChatGLM4)
                .stream(stream)
                .temperature(temperature)
                .invokeMethod(Constants.invokeMethod)
                .messages(messages)
                .build();
        try {
            ModelApiResponse invokeModelApiResp = clientV4.invokeModelApi(chatCompletionRequest);
            return invokeModelApiResp.getData().getChoices().get(0).toString();
        } catch (Exception e) {
            e.printStackTrace();
            throw new BusinessException(ErrorCode.SYSTEM_ERROR, e.getMessage());
        }
    }

    /**
     * 通用请求（流式输出）（简化消息传递）
     * @param systemMessage
     * @param userMessage
     * @param temperature
     * @return
     */
    public Flowable<ModelData> doStreamRequest(String systemMessage, String userMessage,Float temperature) {
        List<ChatMessage> chatMessageList = new ArrayList<>();
        ChatMessage systemChatMessage = new ChatMessage(ChatMessageRole.SYSTEM.value(), systemMessage);
        chatMessageList.add(systemChatMessage);
        ChatMessage userChatMessage = new ChatMessage(ChatMessageRole.USER.value(), userMessage);
        chatMessageList.add(userChatMessage);
        return doStreamRequest(chatMessageList,temperature);
    }

    /**
     * 通用请求(流式输出）
     * @param messages
     * @param temperature
     * @return
     */
    public Flowable<ModelData> doStreamRequest(List<ChatMessage> messages,Float temperature) {
        // 构建请求
        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()
                .model(Constants.ModelChatGLM4)
                .stream(Boolean.TRUE)
                .temperature(temperature)
                .invokeMethod(Constants.invokeMethod)
                .messages(messages)
                .build();
        try {
            ModelApiResponse invokeModelApiResp = clientV4.invokeModelApi(chatCompletionRequest);
            final Flowable<ModelData> flowable = invokeModelApiResp.getFlowable();
            return flowable;
        } catch (Exception e) {
            e.printStackTrace();
            throw new BusinessException(ErrorCode.SYSTEM_ERROR, e.getMessage());
        }
    }
}

将AI结合自己的业务

先讲一个这个宏观的步骤：

如何将AI结合自己的业务

1：我们需要确定我们需要给AI什么样的prompt，AI会给我们更准确的答案（这个可能需要遵循一些给AI提问的技巧和长时间的调试）

2：我们接收到AI的请求之后，我们应该如何处理（我觉得这一步也很难）

秉承着上面的步骤，我们来将这个AI具体结合到我们的业务中

我们的业务目的是生成题目，所以我们要给AI的肯定是生成题目的标题和题目的描述

还有一个最重要的，一定要指定返回题目的类型，一定要和我们数据库中的题目格式一样

系统prompt实例：

你是一位严谨的出题专家（让GLM进行角色扮演），我会给你如下信息：（分隔符标示不同内容）

应用名称，
【【【应用描述】】】，（对于描述多行内容，可以通过特殊字符包起来，防止用户的输入干扰生成结果）
应用类别，
要生成的题目数，
每个题目的选项数

请你根据上述信息，按照以下步骤来出题：（链式思考，将复杂任务拆解成简单的任务）

  1. 要求：题目和选项尽可能地短，题目不要包含序号，每题的选项数以我提供的为主，题目不能重复（指定输出长度的示例）

  2. 严格按照下面的 json 格式输出题目和选项

[{"options":[{"value":"选项内容","key":"A"},{"value":"","key":"B"}],"title":"题目标题"}]
（少样本学习）

title 是题目，options 是选项，每个选项的 key 按照英文字母序（比如 A、B、C、D）以此类推，value 是选项内容

  1. 检查题目是否包含序号，若包含序号则去除序号

  2. 返回的题目列表格式必须为 JSON 数组（指定固定的输出格式）

标红的技巧都是在智谱AI的官方文档中的Prompt工程的文档中有写 

用户prompt实例：

小学数学测验， 【【【小学三年级的数学题】】】， 得分类， 10， 3

MBTI 性格测试， 【【【快来测测你的 MBTI 性格】】】， 测评类， 10， 3

用户的prompt就根据这个系统的prompt给就好。 

具体的代码实现：

首先想清楚这个我们如果要生成题目，我们需要几个参数？

根据AiManager（默认非流式且题目较为稳定），我们只要传两个参数，一个是系统prompt，一个是用用户的prompt。

系统prompt那就是这个默认值，用户的prompt是由应用的标题，应用的描述，应用题目数量，每个题目的选项组成的，所以我们需要一个封装用户prompt的方法

首先先来个dto接收前端参数：

/***
 * ai生成题目请求
 */
@Data
public class AiGenerateQuestionRequest implements Serializable {


    /**
     * 应用id
     */
    private Long appId;

    /**
     * 要生成的题目数
     */
    private Integer questionsNum = 10;
    /**
     * 每个题目的选项数
     */
    private Integer optionsNum = 4;

    private static final long serialVersionUID = 1L;
}

我们只需要应用的id，我们就可以自己在数据库中查出对应的应用

还有生成的题目数，和对应题目的选线

private static final String SystemPromptQuestion = "你是一位严谨的出题专家，我会给你如下信息：\n" +
            "```\n" +
            "应用名称，\n" +
            "【【【应用描述】】】，\n" +
            "应用类别，\n" +
            "要生成的题目数，\n" +
            "每个题目的选项数\n" +
            "```\n" +
            "\n" +
            "请你根据上述信息，按照以下步骤来出题：\n" +
            "1. 要求：题目和选项尽可能地短，题目不要包含序号，每题的选项数以我提供的为主，题目不能重复\n" +
            "2. 严格按照下面的 json 格式输出题目和选项\n" +
            "```\n" +
            "[{\"options\":[{\"value\":\"选项内容\",\"key\":\"A\"},{\"value\":\"\",\"key\":\"B\"}],\"title\":\"题目标题\"}]\n" +
            "```\n" +
            "title 是题目，options 是选项，每个选项的 key 按照英文字母序（比如 A、B、C、D）以此类推，value 是选项内容\n" +
            "3. 检查题目是否包含序号，若包含序号则去除序号\n" +
            "4. 返回的题目列表格式必须为 JSON 数组\n";

    /**
     * 封装用户的prompt
     *
     * @param app
     * @param questionsNum
     * @param optionsNum
     * @return
     */
    public String getUserPrompt(App app, Integer questionsNum, Integer optionsNum) {
        ThrowUtils.throwIf(app == null, ErrorCode.NOT_FOUND_ERROR, "应用不存在");
        StringBuilder userPrompt = new StringBuilder();
        userPrompt.append("应用名称" + app.getAppName()).append("\n");
        userPrompt.append("应用描述" + app.getAppDesc()).append("\n");
        userPrompt.append("应用类别" + AppTypeEnum.getEnumByValue(app.getAppType()).getText()).append("\n");
        userPrompt.append(questionsNum).append("\n");
        userPrompt.append(optionsNum);
        return userPrompt.toString();
    }

系统的常量和封装用户的prompt方法

/**
     * AI生成题目（非流式）
     *
     * @param aiGenerateQuestionRequest
     * @return
     */
    @PostMapping("/ai_generate")
    public BaseResponse<List<QuestionContentDTO>> aiGenerateQuestion(@RequestBody AiGenerateQuestionRequest aiGenerateQuestionRequest) {
        ThrowUtils.throwIf(aiGenerateQuestionRequest == null, ErrorCode.PARAMS_ERROR, "ai参数为空");
        Long appId = aiGenerateQuestionRequest.getAppId();
        App app = appService.getById(appId);
        ThrowUtils.throwIf(app == null, ErrorCode.NOT_FOUND_ERROR, "应用不存在");
        Integer questionsNum = aiGenerateQuestionRequest.getQuestionsNum();
        Integer optionsNum = aiGenerateQuestionRequest.getOptionsNum();
        String userPrompt = getUserPrompt(app, questionsNum, optionsNum);
        String result = aiManager.doSyncStableRequest(SystemPromptQuestion,userPrompt);
        int startIndex = result.indexOf("[");
        int endIndex = result.lastIndexOf("]");
        String jsonStr = result.substring(startIndex, endIndex + 1);
        List<QuestionContentDTO> questionContentDTOS = JSONUtil.toList(jsonStr, QuestionContentDTO.class);
        return ResultUtils.success(questionContentDTOS);
    }

整体的代码逻辑其实很简单

就是先从数据库中查出对应的app

接着封装用户的prompt

然后调用自己封装的ai接口生成结果

最后处理结果

不过最后这个处理结果需要注意：
```json
[
  {"options":[{"value":"12 + 15", "key":"A"},{"value":"14 + 17", "key":"B"},{"value":"13 + 16", "key":"C"}], "title":"小学数学测验：哪个选项的结果是29？"},
  {"options":[{"value":"5 x 6", "key":"A"},{"value":"4 x 7", "key":"B"},{"value":"6 x 5", "key":"C"}], "title":"小学数学测验：哪个选项的结果是30？"}
]

这个是AI返回的result

[{"options":[{"result":"","score":0,"value":"","key":"A"}],"title":""}]

这个是我们数据库中存储的格式

我们发现，AI返回的时候多了什么 ```json

这种奇奇怪怪的字符

所以我们做一个处理获取第一个 "[" 和 最后一个"]"的位置，取一个字串即可

优化：

这里的优化点是什么呢：

我们生成题目会有重复

​​​我们每次都给AI发送同样的系统prompt和用户prompt，这样AI就很容易生成重复的题目

虽然说我们可以查询数据库然后将存入数据库中的重复题目删除

但是这样做用户体验并不好

我们最好的办法就是让这个AI不要生成重复的题目

这里就涉及到一个保存AI上下文的方法了

平常我们和AI聊天，都在一个界面中聊，但是你关闭了这个客户端之后，之前的记录就没了，如果你想引用之前的内容，就不太行了。

我们的解决办法就是保存用户的上下文

具体代码：

List<ChatMessage> chatMessageList = new ArrayList<>();
/**
     * AI生成题目（非流式）
     *
     * @param aiGenerateQuestionRequest
     * @return
     */
    @PostMapping("/ai_generate")
    public BaseResponse<List<QuestionContentDTO>> aiGenerateQuestion(@RequestBody AiGenerateQuestionRequest aiGenerateQuestionRequest) {
        ThrowUtils.throwIf(aiGenerateQuestionRequest == null, ErrorCode.PARAMS_ERROR, "ai参数为空");
        Long appId = aiGenerateQuestionRequest.getAppId();
        App app = appService.getById(appId);
        ThrowUtils.throwIf(app == null, ErrorCode.NOT_FOUND_ERROR, "应用不存在");
        Integer questionsNum = aiGenerateQuestionRequest.getQuestionsNum();
        Integer optionsNum = aiGenerateQuestionRequest.getOptionsNum();
        String userPrompt = getUserPrompt(app, questionsNum, optionsNum);
        chatMessageList.add(new ChatMessage(ChatMessageRole.SYSTEM.value(), SystemPromptQuestion));
        chatMessageList.add(new ChatMessage(ChatMessageRole.USER.value(), userPrompt));
        String result = aiManager.doRequest(chatMessageList, Boolean.FALSE, null);
        System.out.println(result);
        int startIndex = result.indexOf("[");
        int endIndex = result.lastIndexOf("]");
        String jsonStr = result.substring(startIndex, endIndex + 1);
        chatMessageList.add(new ChatMessage(ChatMessageRole.ASSISTANT.value(), jsonStr));
        List<QuestionContentDTO> questionContentDTOS = JSONUtil.toList(jsonStr, QuestionContentDTO.class);
        return ResultUtils.success(questionContentDTOS);
    }

我们保存一个List<ChatMessage> chatMessageList = new ArrayList<>();这样的对话列表

每次和AI对话完就保存进去，然后传递给AI，那AI就知道了，就不会生成重复的题目了

注意点：

1：tokens的长度不要太小，在项目中，我们处理Ai返回的数据，是因为这段数据前面有一个 [，后面有一个 ]，如果把token设置得太小，后面得 ] 可能就会消失。

2：就是关于temperature这个值得设置，多尝试

3：注意保存这个上下文，这个上下文进行保存是会消耗tokens的，所以不能保存过长。

将生成题目的功能改造成流式输出并且用SSE的方式推送到前端

SSE技术：

Server-Sent Events（SSE）是一种技术，用于在客户端和服务器之间建立持久的单向通信通道，从而允许服务器主动推送更新到客户端。与 WebSocket 和其他实时通信技术相比，SSE 主要用于简单的、单向的数据流传输，特别适用于需要从服务器向客户端发送实时更新的场景。

SSE是单向的（从服务端到客户端），特别适用于这种AI流式生成答案返回

WebSocket是双向的，比较适合于网页聊天这种

这就是AI的优化了

我们每次生成的时候都要等很长的事件

为了提高用户的体验，我们可以生成一道题就输出一道题

这个需求最难的是什么？

我们知道就是，我们只要在后端的参数一改

把stream的参数改成true就是流式输出了（最多我们再封装一个方法）。

但是我们如何处理流式的数据呢？

[
{"options":[{"score":0,"value":"15","key":"A"},{"score":0,"value":"20","key":"B"}],"title":"3 + 12 等于多少？"},{"options":[{"score":0,"value":"6","key":"A"},{"score":0,"value":"7","key":"B"}],"title":"9 减去几等于 3？"}
]

 这个是Ai给我们的answer

问题是：我们肯定不能说一个题目都没取完整就返回给前端

但是，我们什么时候能确定这个一个题目是取完整了呢？

首先我们要知道，AI返回的流不一定是一个子一个字返回的

有可能是一个 ：tions":[    也有可能是一个： lue":"6",

这种奇奇怪怪的字符串。

这里鱼皮老师用了一个方法：就是将每次返回的一块进行分流

将一个大的流分成n个小流，并且呢，将每个字符串转成一个字符列表就是List<Charcter>

然后我们在 “下游” 就可以简单进行处理了。

后端代码：

/**
     * 通用请求（流式输出）（简化消息传递）
     * @param systemMessage
     * @param userMessage
     * @param temperature
     * @return
     */
    public Flowable<ModelData> doStreamRequest(String systemMessage, String userMessage,Float temperature) {
        List<ChatMessage> chatMessageList = new ArrayList<>();
        ChatMessage systemChatMessage = new ChatMessage(ChatMessageRole.SYSTEM.value(), systemMessage);
        chatMessageList.add(systemChatMessage);
        ChatMessage userChatMessage = new ChatMessage(ChatMessageRole.USER.value(), userMessage);
        chatMessageList.add(userChatMessage);
        return doStreamRequest(chatMessageList,temperature);
    }

    /**
     * 通用请求(流式输出）
     * @param messages
     * @param temperature
     * @return
     */
    public Flowable<ModelData> doStreamRequest(List<ChatMessage> messages,Float temperature) {
        // 构建请求
        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()
                .model(Constants.ModelChatGLM4)
                .stream(Boolean.TRUE)
                .temperature(temperature)
                .invokeMethod(Constants.invokeMethod)
                .messages(messages)
                .build();
        try {
            ModelApiResponse invokeModelApiResp = clientV4.invokeModelApi(chatCompletionRequest);
            final Flowable<ModelData> flowable = invokeModelApiResp.getFlowable();
            return flowable;
        } catch (Exception e) {
            e.printStackTrace();
            throw new BusinessException(ErrorCode.SYSTEM_ERROR, e.getMessage());
        }
    }
/**
     * AI生成题目（流式）
     *+
     * @param aiGenerateQuestionRequest
     * @return
     */
    @GetMapping("/ai_generate/sse")
    public SseEmitter aiGenerateQuestionSSE(AiGenerateQuestionRequest aiGenerateQuestionRequest) {
        ThrowUtils.throwIf(aiGenerateQuestionRequest == null, ErrorCode.PARAMS_ERROR, "ai参数为空");
        Long appId = aiGenerateQuestionRequest.getAppId();
        App app = appService.getById(appId);
        ThrowUtils.throwIf(app == null, ErrorCode.NOT_FOUND_ERROR, "应用不存在");
        Integer questionsNum = aiGenerateQuestionRequest.getQuestionsNum();
        Integer optionsNum = aiGenerateQuestionRequest.getOptionsNum();
        String userPrompt = getUserPrompt(app, questionsNum, optionsNum);
        Flowable<ModelData> modelDataFlowable = aiManager.doStreamRequest(SystemPromptQuestion, userPrompt, null);
        AtomicInteger count = new AtomicInteger();//用AtomicInteger可以保证线程安全（因为在使用流的时候，其实是个多线程的环境，普通的int无法保证线程安全）
        SseEmitter sseEmitter = new SseEmitter();
        StringBuilder stringBuilder = new StringBuilder();
        //todo gpt提供了另一种方法
        modelDataFlowable.observeOn(Schedulers.io())
                .map(modelData -> modelData.getChoices().get(0).getDelta().getContent())
                .map(modelData -> modelData.replaceAll("\\s", ""))//\\s 是一个正则表达式，表示匹配任意空白字符。 replaceAll("\\s", "") 这行代码用于去除字符串中的所有空白字符，包括空格、制表符(Tab)、换行符和其他空白字符
                .filter(StringUtils::isNotBlank)
                .flatMap(message -> {
                    List<Character> characterList = new ArrayList<>();
                    for (char c : message.toCharArray()) {
                        characterList.add(c);
                    }
                    return Flowable.fromIterable(characterList);
                })//latMap 是 ReactiveX（RxJava）库中的一个非常重要且常用的操作符。它的作用是将源 Observable 或 Flowable 发送的每个数据项映射为一个新的 Observable 或 Flowable
                .doOnNext(character -> {
                    if (character.equals('{')) {
                        count.addAndGet(1);
                    }
                    if(count.get() > 0){
                        stringBuilder.append(character);
                    }
                    if (character.equals('}')) {
                        count.addAndGet(-1);
                        if (count.get() == 0){
                            sseEmitter.send(JSONUtil.toJsonStr(stringBuilder.toString()));
                            stringBuilder.setLength(0);
                        }
                    }
                })
                .doOnError(throwable -> sseEmitter.completeWithError(throwable))
                .doOnComplete(sseEmitter::complete)
                .subscribe();
        return sseEmitter;

    }

前面的逻辑和上面一样

整体的代码逻辑：

首先，这个AI流式返回是返回了一个Flowable<ModelData>这种流式对象

我们可以对这个流式对象链式调用，就和Java8中的stream一样

接着继续分析：

.map(modelData -> modelData.getChoices().get(0).getDelta().getContent())

将这个数据取出来

.map(modelData -> modelData.replaceAll("\\s", ""))//\\s 是一个正则表达式，表示匹配任意空白字符。 replaceAll("\\s", "") 这行代码用于去除字符串中的所有空白字符，包括空格、制表符(Tab)、换行符和其他空白字符

将这个一些无效字符进行过滤

.filter(StringUtils::isNotBlank)

然后将空字符串再进行一个过滤

.flatMap(message -> {
                    List<Character> characterList = new ArrayList<>();
                    for (char c : message.toCharArray()) {
                        characterList.add(c);
                    }
                    return Flowable.fromIterable(characterList);
                })

latMap 是 ReactiveX（RxJava）库中的一个非常重要且常用的操作符。它的作用是将源 Observable 或 Flowable 发送的每个数据项映射为一个新的 Observable 或 Flowable

就是上面说的进行了一个分流

.doOnNext(character -> {
                    if (character.equals('{')) {
                        count.addAndGet(1);
                    }
                    if(count.get() > 0){
                        stringBuilder.append(character);
                    }
                    if (character.equals('}')) {
                        count.addAndGet(-1);
                        if (count.get() == 0){
                            sseEmitter.send(JSONUtil.toJsonStr(stringBuilder.toString()));
                            stringBuilder.setLength(0);
                        }
                    }
                })

到这个地方就剩下这个字符列表了

我们怎么处理，这里涉及到一个算法（其实就是力扣上的括号匹配）

但是这里可以做一个简化，因为我们知道 "{" 先出来，并且"{}"两个数量是对称的

所以我们来一个计数器当有左大括号 ++ ，有右大括号 -- ，然后等到计数器为0 的时候，通过SSE的sseEmitter返回给前端即可。

最后订阅一下就行。

还有一个注意点：需要注意这里的返回值是一个sseEmitter这个对象。

前端代码：

const doSubmitSSE = async () => {
  if (!props.appId) {
    return;
  }
  submitting.value = true;
  //创建SSE请求
  const eventRouce = new EventSource(
    //填写后端的完整的地址
    `http://localhost:8100/api/question/ai_generate/sse?appId=${props.appId}&optionsNum=${form.optionsNum}&questionNum=${form.questionsNum}`
  );
  eventRouce.onmessage = function (event) {
    console.log(event.data);
    props.aiOnSSESuccess?.(JSON.parse(event.data));
  };
  eventRouce.onopen = function () {
    console.log("建立连接");
    props.aiOnSSEStart?.(event);
    handleCancel();
  };
  eventRouce.onerror = function () {
    if (event?.eventPhase == EventSource.CLOSED) {
      props.aiOnSSEClose?.(event);
      console.log("正常关闭");
      eventRouce.close();
    }
  };
  submitting.value = false;
};
整体的代码逻辑：

首先先创建一个SSE对象来接收请求（SSE接收请求和axios没关系，我们这里需要指定后端的完整路径名称，并且把参数带上）

接着SSE对象的三个方法：onmessage，onopen ，onerror

这里就是接收参数，然后把这个event.data的数据传递给父组件，所以其实没有什么逻辑

关于这个流式和异步处理的自我思考：

 首先智谱AI底层的流式处理用的是RxJava响应式编程的库

先说一下什么是响应式编程：

响应式编程（Reactive Programming）是一种编程范式，用于处理异步数据流和变化的事件

它特别适合处理用户界面、实时数据流、事件驱动系统等需要高效处理异步操作的场景。

结合我们项目中的AI答案的流式返回，就刚好很适合这个响应式编程

根据上面那个项目的整个流程，我觉得处理整个流式答案返回最重要的就是整个流的概念和RxJava提供了很多的操作符可以直接来操作这个流（代码案例如上）

就和这个Java8中的新特性一样

毕竟这个地方叫自我思考

我问了gpt一个问题，因为我在看响应式编程的时候老是看到一个词叫：异步处理

但是在我第一次接触 “异步” 这个概念的时候，我见到的是：异步调用

我一开始就把这两个东西搞混了，我以为是一个东西

首先异步调用：

异步调用 是指在程序中发起一个操作或任务时，不需要等待这个操作或任务完成就能继续执行后续代码。异步调用的主要目的是避免阻塞主线程或当前执行上下文，以提高应用的响应能力和性能。

换成人话说就是，向我们平常的代码都是一行一行执行下来的，都是同步的，如果有一行卡住了，那后面的都不能执行

但是异步的不一样，异步的啊，不能让你堵住，我就先执行后面的，在你这个地方留一个回调函数，等你执行完了我再回来执行你

之前在API开发平台的接口中有提到，就是在springgateway的过滤器默认应该用的是springFlux的异步调用， 我向记录日志，我需要等，这个调用的接口的人调用结束了，我才能记录日志。

但是这个默认应该是异步的，所以就先记录了空日志（因为我什么都没干，所以是空的）。

前端天生就是可以异步调用的

绑定一个按钮，然后点击一下，就调用

接着就是异步处理了

异步处理 是指处理任务或数据的方式，使得任务可以在后台执行，而主线程可以继续执行其他操作。异步处理通常涉及到多个异步操作的组合、管理和协调。它的目标是高效地处理异步任务，并管理任务之间的关系。

说人话：

我们上面的流就是异步处理的，比如AI返回给我们的数据是 ： a，b，c，d

AI是流式返回给我们的

然后我们搞了两个map 第一个map 给每个数 +1 第二个map给每个数  ×2

当a来了，a就执行第一个map，这个时候a开始+1，加完1，之后，a就流到 “下游”了，b就来了

b就+1，a这个时候就在×2了

所以我们也能看出来，这种异步处理数据流的感觉了

这样也可以提高效率对吧，类似多线程同时运行

我要200
关注
  • 13
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Springboot+Vue整合笔记【超详细】
江夏、的博客
12-05 1万+
| 作者：江夏 | 微信公众号：1024笔记 | 知乎：https://www.zhihu.com/people/qing-ni-chi-you-zi-96 | GitHub：https://github.com/JiangXia-1024?tab=repositories Part 1 目前很多公司的开发模式都是前后的分离的分工模式，这样能够做到各司其职，提高开发的效率。之前也有文章介绍了springboot项目和vue创建一个简单的前端项目，这篇文章则是将springboot和vue进行简单的整合，实现
springboot整合mybatisplus+shardingsphere
huzi_1998的博客
04-21 2401
shardingsphere+mybatisplus分库分表操作
AI项目落地实战：SpringBoot3+SpringAI+Uniapp
吉他程序员的博客
08-01 1119
AI不仅仅是风口，也是今后的时代潮流。本人花心血开发了一套AI实战项目，可商用。支持h5，小程序，app三端。可拿来二开，也可直接上架。不用担心版权问题，但是如果是倒卖源码，本人会追究其责任。如果你是大学生，也可以抓住这个机会学习AI，源码并不难，都是java那一套。本人也会提供免费学习指导。
百度智能云+SpringBoot=AI对话【人工智能】
小心星的博客
03-20 2007
百度智能云+SpringBoot=AI对话【人工智能】
springboot 项目整合 AI (文心一言）
m0_60873265的博客
07-23 1335
第四步：调用调试——百度智能云登录成功——点击个人中心——安全认证——点击显示输入验证码获取Access Key和Secret Key。第三步：点击接口文档——API列表——可以点击指定模型进行查看调用示例。第六步：调用示例——单轮——多轮——流式。多轮：两个人对话，回答最后一个问题。第二步：点击应用接入——创建应用。注册——个人认证——登录成功。第一步：点击千帆大模型平台。
Springboot+druid+多数据源
fonjames的专栏
05-30 1548
1.在Spring Boot中配置两个不同的Oracle数据源，你需要在配置类中分别定义两个数据源，并使用AbstractRoutingDataSource来路由到不同的数据源。当然，如果你的应用需要配置多个Druid数据源，并且每个数据源的密码都需要通过自定义的解密方法解密，你可以扩展上面的配置方法以适应多数据源的场景。这样，每次调用到数据源的地方，都会根据你的逻辑动态切换到不同的数据源。3. 使用多数据源在业务代码中，你可以通过@DS注解器来指定使用特定的数据源，或者不指定时使用默认的数据源。
SpringBoot项目整合jwt和redis完成登录token校验(含原理解析)
Barry_Li1949的博客
11-27 2258
1、引入JWT依赖: 通过在项目的pom.xml中添加JWT依赖，使得项目能够使用JWT相关的功能。2、实现JWT工具类: 创建一个JwtUtil类，用于生成和解析JWT。createJWT方法用于创建一个新的JWT，而parseJWT方法用于验证和解析一个已存在的JWT。3、登录接口实现: 在登录接口中，首先验证用户的登录信息，然后使用JwtUtil生成JWT。这个JWT会被返回给用户，并存储在Redis中，用于后续的请求验证。
Springboot整合文心一言----非流式响应与流式响应（前后端）
weixin_65237252的博客
04-26 1752
Springboot整合文心一言----非流式响应与流式响应（前后端）
springboot整合百度云ai人脸识别（保姆级教程）
qq_41516802的博客
07-14 1956
springboot整合百度云ai人脸识别简单又快捷
Chatgpt AI聊天实现，技术NodeJs+uni-app+eventsource，流式响应，支持上下文聊天
qq_38287682的博客
06-14 1105
最近空闲出点时间，作为一名前端程序员，我一直对人工智能（AI）技术充满了好奇和热情。最近，我开发了一个AI聊天小应用，这个AI聊天小应用是基于我对前端开发和人工智能的研究和兴趣而诞生的。它的目标是为用户提供一个与AI进行有趣而真实对话的平台。让我简单介绍一下它的特点和功能。
基于SpringBoot快速开发的爬虫项目源码+项目使用说明+sql数据库.zip
08-10
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
基于springboot+mybatis-plus+mysql+redis的NBA球员数据管理系统完整源码+说明.zip
03-27
2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用，具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习，也...
毕业设计基于SpringBoot+Vue的在线考试系统源码+数据库+项目说明（含前端+后端）.zip
07-02
【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门...
Java毕业设计 基于springboot学生成绩可视化系统源码+部署文档+全部数据资料（高分项目）
04-23
3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶...
个人毕设基于Springboot+Vue开发的会议室管理系统完整源码+数据库+项目说明（含前端+后端）.zip
07-02
个人毕设基于Springboot+Vue开发的会议室管理系统完整源码+数据库+项目说明（含前端+后端）.zip个人毕设基于Springboot+Vue开发的会议室管理系统完整源码+数据库+项目说明（含前端+后端）.zip个人毕设基于Springboot...
python 实现convolution neural network卷积神经网络算法
luthane的博客
08-26 4676
卷积神经网络（Convolutional Neural Networks, CNN）是一种包含卷积计算且具有深度结构的前馈神经网络（Feedforward Neural Networks, FNN），是深度学习的代表算法之一。基本原理CNN的核心思想是通过模拟人类视觉系统的工作方式，自动提取图像中的特征，并将其用于分类、检测、分割等任务。它主要受到了生物学上感知机制的启发，模拟了人类视觉系统中的感知细胞和复杂细胞的工作方式。
透明性和解释性AI：概念与应用
weixin_49007164的博客
08-25 1494
透明性AI指的是AI系统的操作过程、决策机制、数据流动和模型行为是可理解和可追踪的。换句话说，透明性AI使得人们可以清楚地看到AI系统是如何做出决策的，这一过程包括输入数据的处理方式、模型的内部计算过程、以及最终决策的产生机制。解释性AI是指AI系统不仅能够给出决策结果，还能够提供关于该决策如何产生的解释。解释性AI的目标是帮助用户理解AI的行为，尤其是当AI的决策与预期不符时，提供合理的解释来消除用户的疑虑。
【python计算机视觉编程——1.基本的图像操作和处理】
m0_53694086的博客
08-26 4102
参数sigma为标准差（σ），是高斯滤波器的一个重要参数，它控制滤波器的平滑程度。标准差越大，高斯函数的曲线越宽，滤波器的影响范围就越大。标准差较大: 高斯滤波器会在更大范围内进行平滑，使得图像变得更加模糊，细节和边缘特征会被更强地平滑掉。标准差较小: 高斯滤波器会产生较小范围的平滑效果，图像的细节保留更多。还可以给定转换矩阵，将RGB图像转换为CIE XYZ色彩空间。图像像素值被分成128个区间，用于计算每个区间的像素值频率。可以返回目录中所有jpg图像的列表。
【自由能文章系列（简单难度）】【开篇论文】自由能原理在多个领域的统一视角
最新发布
神经美学_茂森的博客
08-27 604
自由能原理作为一个统一的理论框架，成功地将多个看似不相关的领域（如神经科学、物理学、经济学、信息论、控制论、认知科学和生物学进化）联系在一起。通过自由能原理，我们可以更深刻地理解不同系统如何在给定条件下实现最优行为或状态。#自由能原理 #跨领域统一框架 #优化逻辑 #参数调节 #贝叶斯大脑 #预测编码 #最优控制 #注意力机制 #自然选择 #机器学习。：自由能原理、跨领域统一框架、优化逻辑、参数调节、贝叶斯大脑、预测编码、最优控制、注意力机制、自然选择、机器学习。
springboot+mqtt+websocket+rabbitmq实现消息推送代码
03-31
抱歉，作为 AI 语言模型，我不能提供具体的代码实现，但我可以为您列出步骤： 1. 首先，您需要选择合适的消息队列，如 RabbitMQ。 2. 在 Spring Boot 中，您可以使用 Spring Boot RabbitMQ Starter 来集成 RabbitMQ。 3. 为了实现消息推送，您需要实现一个 WebSocket 控制器，将客户端连接到该控制器。 4. 使用 Spring Boot WebSocket Starter 来集成 WebSocket。 5. 在 WebSocket 控制器中，您可以使用 RabbitMQ 的 Java 客户端来创建一个连接并订阅一个队列。 6. 当有新的消息到达队列时，您可以将消息推送到 WebSocket 客户端。 这是一个基本的框架，您可以根据您的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值