springboot+vue使用流式響應(yīng)的實現(xiàn)示例

更新時間：2026年02月13日 08:35:42 作者：IT界Tony哥

本文主要介紹了springboot+vue使用流式響應(yīng)的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在Spring Boot和Vue.js的組合中實現(xiàn)流式響應(yīng)（Streamed Response），通常指的是從服務(wù)器端以流的形式逐步發(fā)送數(shù)據(jù)到客戶端，而不是一次性發(fā)送整個響應(yīng)。這種方式特別適用于實時更新的數(shù)據(jù)展示、長時間運行的任務(wù)反饋等場景。下面是一個基本的實現(xiàn)方法。

服務(wù)器端：Spring Boot

添加依賴：確保你的pom.xml文件中包含Web相關(guān)的依賴。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

創(chuàng)建控制器：使用ResponseBodyEmitter或SseEmitter來處理流式響應(yīng)。這里我們以SseEmitter為例，它專為服務(wù)器發(fā)送事件（Server-Sent Events, SSE）設(shè)計。

@RestController
public class StreamController {

    @GetMapping("/stream-sse")
    public SseEmitter streamSse() {
        SseEmitter emitter = new SseEmitter();

        // 模擬一個長時間運行的任務(wù)
        Executors.newSingleThreadExecutor().submit(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    Thread.sleep(1000); // 每秒發(fā)送一次數(shù)據(jù)
                    emitter.send("Message " + i);
                }
                emitter.complete();
            } catch (IOException | InterruptedException e) {
                emitter.completeWithError(e);
            }
        });

        return emitter;
    }
}

客戶端：Vue.js

安裝Axios：如果你打算使用Axios來處理HTTP請求，首先需要安裝它。

npm install axios

在Vue組件中使用：

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      messages: []
    };
  },
  mounted() {
    const eventSource = new EventSource('/stream-sse'); // 注意這里的URL應(yīng)與后端匹配

    eventSource.onmessage = (event) => {
      this.messages.push(event.data);
    };

    eventSource.onerror = () => {
      console.log('EventSource failed.');
      eventSource.close();
    };
  }
};
</script>

請注意，在Vue部分，我們直接使用了瀏覽器原生的EventSource API來監(jiān)聽來自服務(wù)器的事件。如果你希望通過Axios或其他庫來處理這種類型的連接，可能需要尋找支持SSE的庫或者自行封裝邏輯，因為大多數(shù)HTTP庫默認并不直接支持SSE。

通過上述步驟，你可以構(gòu)建一個基于Spring Boot和Vue.js的應(yīng)用程序，該應(yīng)用程序能夠以流的方式從服務(wù)器向客戶端推送數(shù)據(jù)，提供更流暢的用戶體驗。

到此這篇關(guān)于springboot+vue使用流式響應(yīng)的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)springboot vue 流式響應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: