From f24b7693054747b2757e0f49c707e32f9f408dbc Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Fri, 25 Apr 2025 10:59:36 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=9C=8B=E6=9D=BF=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/videos/01.webm | Bin 14140366 -> 14140366 bytes src/views/base/dataBoard/index.vue | 101 ++++++++++++++++++++--------- 2 files changed, 70 insertions(+), 31 deletions(-) diff --git a/public/static/videos/01.webm b/public/static/videos/01.webm index 9f019980fc570bc6d582bbbb5bda7e5114f48c2f..92b557bcde215ecaaa2d5c12c08094b4fba219ce 100644 GIT binary patch delta 4689 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 delta 4689 zcmXw73slY7_wROl+)6KcDAKt%dQe`2M9huqmS>cd@)+dJc+{vEI#FK~Qn=)iW6C2` zgW4jEN1j8f6v~Z^ZA@xE!CS;qh+-YxzNji z{v0BT=3XjN$p0G*zQ+|yF0Aot>8C9HGxg3+ZlEdMxhi47^flZdJuPx_WSHM7u5fEu zwc7CW+mxID#Sqp1$L3@xw01qa_wU>Dzdr-lp=Aj+V+Q((F*1>OJaViGmg6af9hnz0wTomF5eFnOE-#SSGZWxxrS59%UY{ zpty2B!5;1A2A8D=qs`&LXp3Iu6sHl|5^nGr?9AG9kmGcx1p6t2E4-zF=51i0x#ck( z#f=c!i(D}YK8~>rqBu=S2ce$&h%2(B&~QsMD+mp@ZdYPfy+;e;K3AO6$0==orpRSa zg*xaCSG<=rMmA`+pfPG&w~Qi7#Vu~=t~X9;TTC?;4-)KN4mXUF&ZM-3Gb!!*7SrBJ zpd38{F4$^wZuplJn`jTQi4L(Ua%Wi! zR#U;1OsYz8fT|Qn(=2jZrVEySlPkwc_iWn3JsYPLmbh1ll?d9wm8)TLCnr;Rxk(;o z-OZI{(qeZfSnTesH=*UyUcs)ZxbhFl-p3j2eLCby=w?m73YOf18#%+N;~ma7Va8$W zg>DKr8UbtecT6{@n3wK?CH&5fR)F)-j-6gow%LyaJNc3ul}Ld*T_A90r#rLBZR#Z0 zDi?0_RO({l3SCT?ttr*`Py}0ZV>{4VvO82GYq}^{(qe8L3~C2f*+fh8D+Ie!z>O27 zMwJ>GRhr}Zbl|^>SKPQzf8dCw4x=>59fdlug&RMVHWX>l++agdXS-yIyeJ-V6D$28 z&n{;u(s`v&+j4HAm6m#SL34+tULH%GDY8O5;3kXp{|xmgqn+DL5lp(pP4cDkKo2Mn z^o(jpOII!{u)_X5@XuKPSFY^c!g^BR=0gJSM`xzZSjFuTe?T}Cbwf7!7{zMYK9bcxjTei?qTF;fd?DS z#rK1_Y8yyb;0vT=f+WkM8w{+>%>3b@TJM zS$EhI)ywo2EnR9U*jXoTHbpwttv4L&_KopUavP7pCU@ax*;3WsZ=h;#pFm@BC+-vM zLL@hk zdTu^JN?Gp9fpKa`4Nt=XS5^P@vw}_BpP5dF&WY8~R)SQ7ryNz3< zLznS``pC^$870)ZE8OCQ6c;rJZ7{?|eH*rtGF}$-+~TFa^4_=SD5I_xvF*p(bd)mh ze+!xSwO8cpCskm8$t+-*oYCGE=h2bT;8BLftcvTOOA3T7%GnA+J@J7)~2myWoxTj9WgI+`>b^Ej-lT zn%w#wg57@4t!$*gsi6=!by$ub-RyaoV2jW_1R6dK3we$u4f|Q>O1M=#^!D7V@NjW35+HBzJFc8kR~xYd2Qcz1+8j`BN#VCyruwYfCgepfEUC8MGHlCUkC+E>ej z)QyF|NVUGXNA2n*SaupWFpzE-je#3RW7V#>L+CycyoDR|hR<$e^UNq!Cl7>bTcV-@ zpRrKj6YkoH+@*1XJ(+-HB-IQLhnnFL6H9Tq_Lb14A|2^{72}>!SlBGV4vau9k~|H^ zfu~{Q6nU2B3GJ`QMvy%=GEVM%axl)4A99hTjEF=V56XzB!SbDTM${o8>4#NEoy3fq ziJOJGuRl_eWOE}5EgEcYOvs!_U9Avzk&yHS-ZAo>rAKI1`yv%dGks!UrcbP~o=W^I zv}=)#^gmR^{!Jz7kPCh)LMoCHF2q8@g^7B3I75Z@60#9ESWX%uml)bZsJs78Of=nU z653>#ZZ*Xtls3L6nvjb0o5xS7rHp>Z1>5->vCyKZDX=K&yTg9uHq+oJ9YY?Hyt2Oo zuk5ML@&TvK#w*jBxM=i_sW5uSwC~a=+Pzq?oI%7z6>K_Gu(p9y2$ z&)RK>SwlXGVC1)_@ae;>ck%`DWwKx^PY@q{Xq`3w3k~UlB$4DmbQJYv_TmMYjD78Z z$zCHJ!QI(&+Q}@w+(fWT3CKoLbKG2Lj+@uAjJCC|6KrihQBv!ZdC>Y~{!K!WX4(#+ z9^{OSBt3dJA8i3VdiQ`lN9Sk5K}jzXj7*AtOosBNsyd$VH7lSa(1_ zp*@161U{=5^^oy?ezRcDYLJqoS!s)4R@&ms^VIXdgmxv8lD;Km$qPz1?xSGE2FOU# zyU-=@E;Rn_I7+u#Xx}0!L1SM0k8;mf#|ZW4JxEDXyog6jfOzpk_-ZQf3=*VijlQPK zQW{J3xM_kF%|cR=wz@Bct?r32azzMW; z)yY6|?Xn#0N3<1aE74NWI9e*&Dzw$$+9hpVcSUbV2v5`B!kr^7i{XIi1_zJyvv%|) zoyX(gbtPms3`~cHfzs&C)c!fXVyO#48wO30dd{K1uKxpD=oW+anbWN*SzYy}{` zVSjbT@HZ5hWF=VDSJIj-r!%4D^m>ydaz|el?C6h#ZyVnYVB@>-j7;XY7YX)uAL-49 zSsUSDR@Us>6m5YGT633RJ|=DxjET#RvA}AFZx_0Q1oN_m+1VBp*S0HC>|=s?#PV#2 zSe~P4OYXb?!5&N`!I`=t2U0g|_RB*zs~jZQOml=fT=Ln{w~{iR6G00}Y?{2+*Eh6L6nPTwZ`7RkXYV~OM~)Qg zp(9CiZkw|g?I+kaCqGDzEdNh)K7W)iW8N3QtmTvmN(Aw&Q-O2;;P`g*JsWr`yH-&*=zaa14u-q&e*`?Faiy2R=@q zbX|p3Pny$FbI?u3{P+zhl=dRFrC_&%XoV2$b|`&3rLbubEMp9T{C@HwxSxFZHycbb z>Z2G|NFYC*arhlwzU(tT%U0$h$l+w};a;B!J~KLrAKXZEe%O4(aRwzLEw@1yolakl zfYX;ES%Tx~j*ok?y5VvskH@SL^sILumE znyjE=qdmp0DO|&UIz)=*vTI30(&gp7xDp*9hzE6)M@J z+ax?+zb~_Wg)Yrz1EG$%L&DSi380+-^C#sWb7(Y zNjRTy%A+rJC_rdSNqD|5JT*Y>ko60pwhAKQIpFXqvTX~w$R+I3|Y5Pm8oN?KAC_ijTcz$X33)&g@((Y`u{F*&2 z9+U8#xbZAdjox^WIS)yAvaGYfvd(3DQ;i{X&!h0Hs5loO4`ulW)JKejr&;AWFsnTO zS2-;=uNEw=6t$|yxjZ74cPl$#3ggXuctTC2jpi6Rv$}T^6%hk_;>J)Rr%z0 zULshQH~nmp*>D3g8*1h{Q?+k|ZU+5qp=hc3gQ{iC_wgCCn#iPCRa?_cOKb2*{+df< zQrl7swJkU2*HGWDiWejjbvJHRQB)L8(h>Y=cqsZGa_XCZ?; MtCn|ec*~9c50x?{8UO$Q diff --git a/src/views/base/dataBoard/index.vue b/src/views/base/dataBoard/index.vue index 54942d13..14699998 100644 --- a/src/views/base/dataBoard/index.vue +++ b/src/views/base/dataBoard/index.vue @@ -37,14 +37,17 @@ export default { return { isFullScreen: false, scaleNum: 0.8, - dataObj:{} + dataObj:{}, + sseReader: null, // 保存流读取器 + abortController: null, // 用于中止 fetch 请求 + retryCount: 0, // 当前重试次数 + isDestroyed: false // 标记组件是否已销毁 }; }, created() { this.init() }, mounted() { - console.log('dataBoard mounted') this.boxReset = debounce(() => { this.resetSize() }, 300) @@ -54,9 +57,9 @@ export default { }) this.getData() }, - destroyed() { - console.log('dataBoard destroyed') - }, + beforeDestroy() { + this.closeSSE(); + }, computed: { sidebarOpened() { return this.$store.state.app.sidebar.opened @@ -68,40 +71,76 @@ export default { } }, methods: { - getData() { + async getData() { let _this = this; + if (_this.isDestroyed) return; const url = process.env.VUE_APP_BASE_API+'/admin-api/monitoring/message/subscribe/'+store.getters.userId+'-'+Date.now(); const token = getAccessToken() const headers = new Headers({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'text/event-stream' }); - fetch(url, { headers }) - .then(response => { - const reader = response.body.getReader(); - const decoder = new TextDecoder(); - const readStream = () => { - reader.read().then(({ done, value }) => { - if (done) { - console.log('SSE 连接关闭'); - return; - } - const data = decoder.decode(value); - console.log('收到消息:', data); - if (_this.isValidData(data)){ - _this.upDateMsg(data); - } - readStream(); // 继续读取 - }).catch(error => { - console.error('SSE 读取错误:', error); - }); - }; - readStream(); - }) - .catch(error => { - console.error('SSE 连接失败:', error); - }); + try { + // 创建中止控制器 + this.abortController = new AbortController(); + // 发起 fetch 请求(替换为你的接口地址) + const response = await fetch(url, { + method: 'GET', + headers: headers, + signal: _this.abortController.signal // 绑定中止信号 + }); + + // 获取流读取器 + _this.sseReader = response.body.getReader(); + const decoder = new TextDecoder(); + + // 持续读取流数据 + while (true) { + const { done, value } = await _this.sseReader.read(); + if (done) { + console.log('SSE 连接正常关闭'); + _this.handleReconnect(); // 触发重连 + break; + } + // 处理 SSE 事件数据 + const data = decoder.decode(value); + console.log('收到消息:', data); + if (_this.isValidData(data)){ + _this.upDateMsg(data); + } + } + } catch (error) { + // 主动中止的请求不报错 + if (error.name === 'AbortError') return; + console.error('SSE 连接异常:', error); + _this.handleReconnect(); // 触发重连 + } }, + closeSSE() { + this.isDestroyed = true; // 标记销毁 + if (this.abortController) { + this.abortController.abort(); // 中止 fetch 请求 + } + if (this.sseReader) { + this.sseReader.cancel(); // 关闭流读取器 + this.sseReader = null; + } + console.log('SSE 连接已强制关闭'); + }, + handleReconnect() { + if (this.isDestroyed) return; + // 指数退避策略(最大重试 5 次) + const maxRetries = 5; + if (this.retryCount < maxRetries) { + const delay = Math.pow(2, this.retryCount) * 1000; + setTimeout(() => { + this.retryCount++; + this.initSSE(); + }, delay); + } else { + console.error('SSE 重连次数已达上限'); + } + }, isValidData (data) { return data.trim().startsWith('data:{') && !data.includes('heartbeat'); },