大模型流式接口对接学习记录--打字机效果输出（演示基于前端vue2环境，后端SpringBoot环境）

微凉甚好sh

已于 2025-01-03 16:04:44 修改

阅读量2.3k

点赞数 13

文章标签：学习

于 2025-01-01 18:47:24 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50786236/article/details/144854506

版权

前文：一直在研究大模型接口的流式对接，很好奇打字机效果如何实现，踩了很多坑，而网上能找的资料少之又少，既然没人讲，那就我来！

正文：不浪费时间，直接上代码。

总的思路有两种，一种真正意义上的流式数据返回，一种是模拟的打字机效果。

1. 流式数据返回

后端代码（基于springboot实现）

@PostMapping(value = "/streamModel", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> streamModel(@RequestBody String message) {
        // 构造消息列表
        List<ChatMessage> chatMessages = new ArrayList<>();
        // 设置默认系统文本（简单理解是构建模型的人设）
        chatMessages.add(new ChatMessage("system", "你的身份是一个专业的全能的专家，你的名字叫小林，请以恭敬的语气回答客户的问题！"));
        chatMessages.add(new ChatMessage("user", message));

        // 构造模型对象
        ChatCompletionRequest request = new ChatCompletionRequest();
        request.setModel("glm-4-flash");
        request.setMessages(chatMessages);
        request.setStream(true);
        request.setInvokeMethod(Constants.invokeMethodSse);

        ModelApiResponse modelApiResponse = clientV4.invokeModelApi(request);

        AtomicReference<String> content = new AtomicReference<>("");
        // 遍历数据流,将每个元素中的content进行拼接,最终返回拼接后的content
        return Flux.from(modelApiResponse.getFlowable()).map(
                data -> {
                    content.set(content.get() + data.getChoices().get(0).getDelta().getContent());
                    return content.get();
                }
        );
    }

代码讲解：在JAVA中，实现流式数据返回一般是使用SSE，那么JAVA是提供了Flux来实现SSE，即允许服务器向客户端推送数据的技术。属于单向通信技术。

在上述代码中，对接的是智谱AI的接口，具体的对接参数构成，请自行参考不同的大模型的接口说明