欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+SseEmitter和Vue3+EventSource實現實時數據推送

 更新時間:2025年03月04日 08:33:29   作者:麥當勞不要薯條  
本文主要介紹了SpringBoot+SseEmitter和Vue3+EventSource實現實時數據推送,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

EventSource 的優(yōu)點

  • 簡單易用:EventSource 使用簡單,基于標準的 HTTP 協議,無需復雜的握手過程。
  • 自動重連:EventSource 具有內置的重連機制,確保連接中斷后自動重新連接。
  • 輕量級:EventSource 使用長輪詢機制,消耗的資源相對較少,適合低帶寬環(huán)境。
  • 跨域支持:EventSource 允許在跨域環(huán)境下進行通信,通過適當的響應頭授權來自不同域的客戶端連接。

1、SpringBoot實現SseEmitter

1.1簡易業(yè)務層

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * Author tm
 * Date 2023/9/25
 * Version 1.0
 */
@RestController
@RequestMapping(path = "/sysTest/see")
public class SseControllerTest {
    private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();


    /**
     * 前端傳遞標識,生成唯一的消息通道
     */
    @GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
    public SseEmitter push(String id) throws IOException {
        // 超時時間設置為3s,用于演示客戶端自動重連
        SseEmitter sseEmitter = new SseEmitter(30000L);
        // 設置前端的重試時間為1s
        sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("連接成功"));
        sseCache.put(id, sseEmitter);
        System.out.println("add " + id);
        sseEmitter.onTimeout(() -> {
            System.out.println(id + "超時");
            sseCache.remove(id);
        });
        sseEmitter.onCompletion(() -> System.out.println("完成?。?!"));
        return sseEmitter;
    }

    /**
     * 根據標識傳遞信息
     */
    @GetMapping(path = "push")
    public String push(String id, String content) throws IOException {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.send(SseEmitter.event().name("msg").data("后端發(fā)送消息:" + content));
        }
        return "over";
    }

    /**
     * 根據標識移除SseEmitter
     */
    @GetMapping(path = "over")
    public String over(String id) {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.complete();
            sseCache.remove(id);
        }
        return "over";
    }
}

2、Vue3對接EventSource

const  initEventSource = ()=>{
  if (typeof (EventSource) !== 'undefined') {
    const evtSource = new EventSource('https://xxx.xxx.x.x/sysTest/see/subscribe?id=002', { withCredentials: true }) // 后端接口,要配置允許跨域屬性
    // 與事件源的連接剛打開時觸發(fā)
    evtSource.onopen = function(e){
      console.log(e);
    }

    // 當從事件源接收到數據時觸發(fā)
    evtSource.onmessage = function(e){
      console.log(e);
    }
    // 與事件源的連接無法打開時觸發(fā)
    evtSource.onerror = function(e){
      console.log(e);
      evtSource.close(); // 關閉連接
    }
    // 也可以偵聽命名事件,即自定義的事件
    evtSource.addEventListener('msg', function(e) {
      console.log(e.data)
    })
  } else {
    console.log('當前瀏覽器不支持使用EventSource接收服務器推送事件!');
  }

  
}

3、測試、驗證、使用

使用postMan調用接口測試

3.1、 postMan調用后端"push"接口發(fā)送消息

在這里插入圖片描述

3.2、前端實時接收到數據

在這里插入圖片描述

4、踩坑

4.1、nginx對于EventSource連接要特殊處理

#eventSource
location /es/ {
    proxy_pass  http://請求地址/;
    #必須要設置當前Connection 屬性
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding off;
    proxy_buffering off;
    proxy_cache off;
}

4.2、連接通道接口類型一定要設置MediaType.TEXT_EVENT_STREAM_VALUE

在這里插入圖片描述

4.3、 跨越問題,項目地址和接口地址需要在同一域名下

在這里插入圖片描述

4.4 、EventSource監(jiān)聽事件的類型需要與后端發(fā)送的類型一致

在這里插入圖片描述

在這里插入圖片描述

到此這篇關于SpringBoot+SseEmitter和Vue3+EventSource實現實時數據推送的文章就介紹到這了,更多相關SpringBoot 實時數據推送內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家! 

相關文章

  • java開發(fā)中常遇到的各種難點以及解決思路方案

    java開發(fā)中常遇到的各種難點以及解決思路方案

    Java項目是一個復雜的軟件開發(fā)過程,其中會涉及到很多技術難點,這篇文章主要給大家介紹了關于java開發(fā)中常遇到的各種難點以及解決思路方案的相關資料,需要的朋友可以參考下
    2023-07-07
  • Java中去除字符串中所有空格的幾種方法

    Java中去除字符串中所有空格的幾種方法

    這篇文章介紹了Java中去除字符串中所有空格的幾種方法,有需要的朋友可以參考一下
    2013-07-07
  • springboot如何讀取自定義配置項

    springboot如何讀取自定義配置項

    這篇文章主要介紹了springboot如何讀取自定義配置項的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-05-05
  • 詳解Spring mvc的web.xml配置說明

    詳解Spring mvc的web.xml配置說明

    本篇文章主要介紹了Spring mvc的web.xml配置說明,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • Mybatis-Plus實現公共字段自動賦值的方法

    Mybatis-Plus實現公共字段自動賦值的方法

    這篇文章主要介紹了Mybatis-Plus實現公共字段自動賦值的方法,涉及到通用字段自動填充的最佳實踐總結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-07-07
  • 淺談hibernate中多表映射關系配置

    淺談hibernate中多表映射關系配置

    下面小編就為大家?guī)硪黄獪\談hibernate中多表映射關系配置。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • 詳解利用Spring的AbstractRoutingDataSource解決多數據源的問題

    詳解利用Spring的AbstractRoutingDataSource解決多數據源的問題

    本篇文章主要介紹了詳解利用Spring的AbstractRoutingDataSource解決多數據源的問題。具有一定的參考價值,有興趣的可以了解一下。
    2017-03-03
  • Java編程實現提取文章中關鍵字的方法

    Java編程實現提取文章中關鍵字的方法

    這篇文章主要介紹了Java編程實現提取文章中關鍵字的方法,較為詳細的分析了Java提取文章關鍵字的原理與具體實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-11-11
  • Java如何讀取jar包中的resource資源文件

    Java如何讀取jar包中的resource資源文件

    這篇文章主要介紹了Java如何讀取jar包中的resource資源文件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • MybatisPlus多表連接查詢的具體實現

    MybatisPlus多表連接查詢的具體實現

    MyBatis Plus是一款針對MyBatis框架的增強工具, 它提供了很多方便的方法來實現多表聯查,本文主要介紹了MybatisPlus多表連接查詢的具體實現,具有一定的參考價值,感興趣的可以了解一下
    2023-10-10

最新評論