流式输出响应数据

maven依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/dashscope-sdk-java -->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>dashscope-sdk-java</artifactId>
  <exclusions>
    <exclusion>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-simple</artifactId>
    </exclusion>
  </exclusions>
  <version>2.18.2</version>
</dependency>
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version> <!-- 使用最新版本 -->
</dependency>

Springboot

private static final Logger logger = LoggerFactory.getLogger(AIController.class);
private final ExecutorService executor = Executors.newCachedThreadPool();

private static GenerationParam buildGenerationParam(Message userMsg) {
    return GenerationParam.builder()
            .apiKey("sk-20b654c8d6d24f20a17a7349fa9a8641")
            .model("deepseek-r1")
            .messages(Arrays.asList(userMsg))
            .resultFormat(GenerationParam.ResultFormat.MESSAGE)
            .incrementalOutput(true)
            .build();
}


@GetMapping(value = "/query", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter getBotContent(@RequestParam String question) {
    SseEmitter emitter = new SseEmitter(60_000L); // 60秒超时

    executor.execute(() -> {
        try {
            // 先发送思考中状态
            Map<String, Object> thinkingResponse = new HashMap<>();
            thinkingResponse.put("code", 200);
            thinkingResponse.put("msg1", "正在分析您的问题...");
            emitter.send(SseEmitter.event().data(thinkingResponse));

            Generation gen = new Generation();
            Message userMsg = Message.builder()
                    .role(Role.USER.getValue())
                    .content(question)
                    .build();

            GenerationParam param = buildGenerationParam(userMsg);

            // 处理流式响应
            gen.streamCall(param).blockingForEach(message -> {
                Map<String, Object> response = new HashMap<>();
                response.put("code", 200);

                String reasoning = message.getOutput().getChoices().get(0).getMessage().getReasoningContent();
                String content = message.getOutput().getChoices().get(0).getMessage().getContent();

                if (reasoning != null && !reasoning.isEmpty()) {
                    response.put("msg1", reasoning);
                    emitter.send(SseEmitter.event().data(response));
                }

                if (content != null && !content.isEmpty()) {
                    response.remove("msg1");
                    response.put("msg", content);
                    emitter.send(SseEmitter.event().data(response));
                }
            });

            emitter.complete();
        } catch (Exception e) {
            logger.error("Error in streaming response", e);
            Map<String, Object> errorResponse = new HashMap<>();
            errorResponse.put("code", 500);
            errorResponse.put("msg", "处理请求时发生错误: " + e.getMessage());
            try {
                emitter.send(SseEmitter.event().data(errorResponse));
            } catch (IOException ex) {
                throw new RuntimeException(ex);
            }
            emitter.completeWithError(e);
        }
    });

    return emitter;
}

Vue

<template>
  <div class="doubao-chat-container" v-show="show" @mousemove="modelMove" @mouseup="cancelMove">
    <div class="doubao-chat-window">
      <div class="doubao-header" @mousedown="setStartingPoint">
        <div class="doubao-logo"></div>
        <div class="doubao-title">{{ title }}</div>
        <div class="doubao-close" @click.stop="cancel">×</div>
      </div>
      <div class="doubao-messages" ref="box">
        <div v-for="(item, i) in list" :key="i"
          :class="['message', item.id == 2 ? 'bot-message' : 'user-message']">
          <div class="message-content">
            <div class="message-text">{{ item.content }}</div>
          </div>
        </div>
        <div v-if="isButtonDisabled" class="typing-indicator">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
      <div class="doubao-input-area">
        <input type="text" v-model="wordone" class="doubao-input" placeholder="输入消息..." @keyup.enter="sendmsg">
          <button class="doubao-send-btn" :disabled="isButtonDisabled" @click="sendmsg">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
            </svg>
          </button>
        </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: 'deepseek'
      },
    },
    data() {
      return {
        x: 0,
        y: 0,
        node: null,
        isCanMove: false,
        isButtonDisabled: false,
        list: [],
        wordone: '',
        wordtow: '',
        eventSource: null,
        currentIndex: 0, // 当前显示的字符索引
        currentMessage: null, // 当前正在显示的消息对象
        typingTimer: null // 逐字显示定时器
      }
    },
    components: {
    },
    mounted() {
      this.node = document.querySelector('.model-container')
    },
    methods: {
      sendmsg() {
        if (this.isButtonDisabled == false) {
          // 重置相关状态变量
          if (this.typingTimer) {
            clearInterval(this.typingTimer);
          }
          this.currentIndex = 0;
          this.currentMessage = null;
          this.typingTimer = null;

          this.list.push({ id: 1, name: 'sigtuna', content: this.wordone });
          this.scrollToBottom();
          this.getBotContent();
        } else {
          return;
        }
        this.isButtonDisabled = true;
        this.wordone = '';
      },
      getBotContent() {
        // 添加思考中的提示
        this.list.push({ id: 2, name: 'kanade', content: '正在思考中...', isThinking: true });
            this.eventSource = new EventSource(`http://localhost:8080/api/deepSeek/query?question=${this.wordone}`);

            this.eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);
                if (data.code === 200) {
                    if (data.msg1) {
                        // 处理思考问题消息
                        if (!this.currentMessage || this.currentMessage.id !== 2) {
                            // 如果当前没有正在显示的思考问题消息，或者当前消息不是思考问题消息，或者当前思考问题消息已结束
                            this.currentMessage = { id: 2, name: 'kanade', content: '思考问题：' + data.msg1, isThinking: true };
                            this.list.push(this.currentMessage);
                            this.currentIndex = 0;
                        } else {
                            // 如果当前正在显示思考问题消息，追加内容
                            this.currentMessage.content += data.msg1;
                        }
                    }
                    if (data.msg) {
                        // 处理回答消息
                        if (!this.currentMessage || this.currentMessage.id !== 2 || this.currentMessage.isThinking) {
                            // 如果当前没有正在显示的回答消息，或者当前消息不是回答消息，或者当前是思考问题消息
                            this.currentMessage = { id: 2, name: 'kanade', content: '回答问题：' + data.msg, isThinking: false };
                            this.list.push(this.currentMessage);
                            this.currentIndex = 0;
                        } else {
                            // 如果当前正在显示回答消息，追加内容
                            this.currentMessage.content += data.msg;
                        }
                    }
                    this.scrollToBottom();

                }
            };

            this.eventSource.onerror = (error) => {
                this.isButtonDisabled = false;
                this.eventSource.close();
            };
        },
        // 添加新的方法用于处理内容更新时的滚动
        scrollToBottom() {
            this.$nextTick(() => {
                const div = this.$refs.box;
                div.scrollTop = div.scrollHeight;
            });
        },
        startTyping() {
            if (this.typingTimer) {
                clearInterval(this.typingTimer);
            }
            this.typingTimer = setInterval(() => {
                if (this.currentIndex < this.currentMessage.content.length) {
                    this.currentMessage.content = this.currentMessage.content.slice(0, this.currentIndex + 1);
                    this.currentIndex++;
                    const div = this.$refs.box;
                    div.scrollTop = div.scrollHeight;
                } else {
                    clearInterval(this.typingTimer);
                }
            }, 50); // 控制逐字显示速度，可调整
        },
        cancel() {
            if (this.eventSource) {
                this.eventSource.close();
            }
            if (this.typingTimer) {
                clearInterval(this.typingTimer);
            }
            this.$emit('cancel');
        },
        submit() {
            this.$emit('submit');
        },
        setStartingPoint(e) {
            this.x = e.clientX - this.node.offsetLeft;
            this.y = e.clientY - this.node.offsetTop;
            this.isCanMove = true;
        },
        modelMove(e) {
            if (this.isCanMove) {
                this.node.style.left = e.clientX - this.x + 'px';
                this.node.style.top = e.clientY - this.y + 'px';
            }
        },
        cancelMove() {
            this.isCanMove = false;
        },
    }
}
</script>
<style scoped>
.doubao-chat-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.doubao-chat-window {
    width: 400px;
    height: 600px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.doubao-header {
    height: 60px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    cursor: move;
    position: relative;
}

.doubao-logo {
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #6e8efb;
}

.doubao-title {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}

.doubao-close {
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.doubao-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.doubao-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f5f7fb;
    display: flex;
    flex-direction: column;
}

.message {
    max-width: 80%;
    margin-bottom: 16px;
    display: flex;
}

.user-message {
    align-self: flex-end;
}

.bot-message {
    align-self: flex-start;
}

.message-content {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.4;
    font-size: 14px;
    position: relative;
}

.user-message .message-content {
    background: #6e8efb;
    color: white;
    border-top-right-radius: 4px;
}

.bot-message .message-content {
    background: white;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-top-left-radius: 4px;
}

.doubao-input-area {
    padding: 16px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    background: white;
}

.doubao-input {
    flex: 1;
    height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
}

.doubao-input:focus {
    border-color: #6e8efb;
}

.doubao-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6e8efb;
    color: white;
    border: none;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.doubao-send-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.doubao-send-btn:not(:disabled):hover {
    background: #5a7df4;
}

.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    align-self: flex-start;
    margin-top: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #a777e3;
    border-radius: 50%;
    margin: 0 4px;
    animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }
}

/* 滚动条样式 */
.doubao-messages::-webkit-scrollbar {
    width: 6px;
}

.doubao-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.doubao-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.doubao-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>

同时在主页面中引入

<Model :show="show" @cancel="cancel" @submit="submit"></Model>

<script>
  import Model from './Model.vue'
  export default {
    data() {
      return{
        show: false,
      };
    },
    components: {
      Model
    },
    methods: {
      cancel() {
        this.show = false
      },
      submit() {
        this.show = false
      },
      diaglog() {
        this.show = true;
      }
    }
  }
</script>

uni-app

下载依赖

import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

页面代码

<template>
  <view class="doubao-page">
    <view class="doubao-header">
      <view class="doubao-logo"></view>
      <view class="doubao-title">{{ title }}</view>
    </view>

    <scroll-view class="doubao-messages" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation>
      <view v-for="(item, i) in list" :key="i"
        :class="['message-container', item.id == 2 ? 'bot-container' : 'user-container']">
        <view class="message-content" :class="item.id == 2 ? 'bot-message' : 'user-message'">
          <view class="message-text">{{ item.content }}</view>
        </view>
      </view>
      <view v-if="isButtonDisabled" class="typing-indicator">
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
      </view>
    </scroll-view>

    <view class="doubao-input-area">
      <input type="text" v-model="wordone" class="doubao-input" placeholder="输入消息..." @confirm="sendmsg">
        <button class="doubao-send-btn" :disabled="isButtonDisabled" @tap="sendmsg">
          <uni-icons type="paperplane" size="20" color="#fff"></uni-icons>
        </button>
      </view>
  </view>
</template>

<script>
  import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

  export default {
    components: {
      uniIcons
    },
    data() {
      return {
        title: 'deepseek',
        isButtonDisabled: false,
        list: [
          { id: 2, content: '您好！我是智能助手，有什么可以帮您的吗？' }
        ],
        wordone: '',
        scrollTop: 0,
        currentIndex: 0,
        currentMessage: null,
        typingTimer: null,
        eventSource: null
      }
    },
    methods: {
      sendmsg() {
        if (this.isButtonDisabled || !this.wordone.trim()) return;

        // 清除之前的定时器和状态
        if (this.typingTimer) {
          clearInterval(this.typingTimer);
        }
        if (this.eventSource) {
          this.eventSource.close();
        }

        this.currentIndex = 0;
        this.currentMessage = null;
        this.typingTimer = null;

        // 添加用户消息
        this.list.push({ id: 1, content: this.wordone });
        this.scrollToBottom();

        // 获取机器人回复
        this.getBotContent();

        this.isButtonDisabled = true;
        this.wordone = '';
      },
      getBotContent() {
        // 添加思考中的提示
        this.list.push({ id: 2, name: 'kanade', content: '正在思考中...', isThinking: true });
        this.eventSource = new EventSource(`http://localhost:8080/api/deepSeek/query?question=${this.wordone}`);

        this.eventSource.onmessage = (event) => {
          const data = JSON.parse(event.data);
          if (data.code === 200) {
            if (data.msg1) {
              // 处理思考问题消息
              if (!this.currentMessage || this.currentMessage.id !== 2) {
                            // 如果当前没有正在显示的思考问题消息，或者当前消息不是思考问题消息，或者当前思考问题消息已结束
                            this.currentMessage = { id: 2, name: 'kanade', content: '思考问题：' + data.msg1, isThinking: true };
                            this.list.push(this.currentMessage);
                            this.currentIndex = 0;
                        } else {
                            // 如果当前正在显示思考问题消息，追加内容
                            this.currentMessage.content += data.msg1;
                        }
                    }
                    if (data.msg) {
                        // 处理回答消息
                        if (!this.currentMessage || this.currentMessage.id !== 2 || this.currentMessage.isThinking) {
                            // 如果当前没有正在显示的回答消息，或者当前消息不是回答消息，或者当前是思考问题消息
                            this.currentMessage = { id: 2, name: 'kanade', content: '回答问题：' + data.msg, isThinking: false };
                            this.list.push(this.currentMessage);
                            this.currentIndex = 0;
                        } else {
                            // 如果当前正在显示回答消息，追加内容
                            this.currentMessage.content += data.msg;
                        }
                    }
                    this.forceScrollToBottom();

                }
            };

            this.eventSource.onerror = (error) => {
                this.isButtonDisabled = false;
                this.eventSource.close();
            };
        },
        scrollToBottom() {
            this.$nextTick(() => {
                this.scrollTop = 999999;
            });
        },

        // 强效滚动到底部方法
        forceScrollToBottom() {
            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this);
                query.select('.doubao-messages').boundingClientRect();
                query.select('.doubao-messages').scrollOffset();
                query.exec((rects) => {
                    if (rects && rects[1]) {
                        const scrollHeight = rects[0].height;
                        uni.pageScrollTo({
                            scrollTop: scrollHeight,
                            duration: 300
                        });
                    }
                });
            });
        },
        startTyping() {
            if (this.typingTimer) {
                clearInterval(this.typingTimer);
            }
            this.typingTimer = setInterval(() => {
                if (this.currentIndex < this.currentMessage.content.length) {
                    this.currentMessage.content = this.currentMessage.content.slice(0, this.currentIndex + 1);
                    this.currentIndex++;
                    this.scrollToBottom();
                } else {
                    clearInterval(this.typingTimer);
                }
            }, 50);
        },
        onUnload() {
            // 页面卸载时关闭连接
            if (this.eventSource) {
                this.eventSource.close();
            }
            if (this.typingTimer) {
                clearInterval(this.typingTimer);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.doubao-page {
    display: flex;
    flex-direction: column;
    height: 90vh;
    background-color: #f5f7fb;
}

.doubao-header {
    height: 120rpx;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    position: sticky;
    top: 0;
    z-index: 10;
}

.doubao-logo {
    width: 64rpx;
    height: 64rpx;
    background-color: white;
    border-radius: 50%;
    margin-right: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #6e8efb;
}

.doubao-title {
    font-size: 32rpx;
    font-weight: 600;
    flex: 1;
}

.doubao-messages {
    flex: 1;
    padding: 40rpx;
    background: #f5f7fb;
}

.message {
    max-width: 80%;
    margin-bottom: 32rpx;
    display: flex;
}

.user-message {
    align-self: flex-end;
}

.bot-message {
    align-self: flex-start;
}

.message-content {
    padding: 24rpx 32rpx;
    border-radius: 36rpx;
    line-height: 1.4;
    font-size: 28rpx;
}

.user-message .message-content {
    background: #6e8efb;
    color: white;
    border-top-right-radius: 8rpx;
}

.bot-message .message-content {
    background: white;
    color: #333;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    border-top-left-radius: 8rpx;
}

.doubao-input-area {
    padding: 20rpx;
    background: white;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #e5e5e5;
}

.doubao-input {
    flex: 1;
    height: 80rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 40rpx;
    padding: 0 32rpx;
    font-size: 28rpx;
    margin-right: 20rpx;
}

.doubao-send-btn {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #6e8efb;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doubao-send-btn[disabled] {
    background: #cccccc;
}

.typing-indicator {
    display: flex;
    padding: 16rpx 32rpx;
    background: white;
    border-radius: 36rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    align-self: flex-start;
    margin-top: 16rpx;
}

.dot {
    width: 16rpx;
    height: 16rpx;
    background: #a777e3;
    border-radius: 50%;
    margin: 0 8rpx;
    animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10rpx);
    }
}

.message-container {
    display: flex;
    margin-bottom: 32rpx;
    width: 100%;
}

.user-container {
    justify-content: flex-end;
}

.bot-container {
    justify-content: flex-start;
}

/* 修改原有消息样式 */
.message-content {
    max-width: 80%;
    padding: 24rpx 32rpx;
    border-radius: 36rpx;
    line-height: 1.4;
    font-size: 28rpx;
}

.user-message {
    background: #6e8efb;
    color: white;
    border-top-right-radius: 8rpx;
    border-bottom-left-radius: 8rpx;
}

.bot-message {
    background: white;
    color: #333;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    border-top-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
}
</style>