Vue+WebSocket頁面實(shí)時(shí)刷新長連接的實(shí)現(xiàn)
最近vue項(xiàng)目要做數(shù)據(jù)實(shí)時(shí)刷新,折線圖每秒重畫一次,數(shù)據(jù)每0.5秒刷新一次,說白了就是實(shí)時(shí)刷新,因?yàn)閿?shù)據(jù)量較大,用定時(shí)器估計(jì)頁面停留一會就會卡死。。。
與后臺人員討論過后決定使用h5新增的WebSocket來實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)展示,記錄一下過程以及碰到的問題;
注意:頁面刷新長連接會被關(guān)閉,其實(shí)進(jìn)入當(dāng)前頁面建立長連接的目的就是頁面不用F5刷新,所有數(shù)據(jù)自動實(shí)時(shí)刷新,如果還是來回F5大刷頁面那就沒有意義了。。。
ps: 如果實(shí)在有這個(gè)需求的話,網(wǎng)上貌似有實(shí)現(xiàn)刷新頁面長連接不斷的方法,請自行百度。。。。
<template> <div> </div> </template> <script> export default { data() { return { websock: null, } }, created(){ //頁面剛進(jìn)入時(shí)開啟長連接 this.initWebSocket() }, destroyed: function() { //頁面銷毀時(shí)關(guān)閉長連接 this.websocketclose(); }, methods: { initWebSocket(){ //初始化weosocket const wsuri = process.env.WS_API + "/websocket/threadsocket";//ws地址 this.websock = new WebSocket(wsuri); this.websocket.onopen = this.websocketonopen; this.websocket.onerror = this.websocketonerror; this.websock.onmessage = this.websocketonmessage; this.websock.onclose = this.websocketclose; }, websocketonopen() { console.log("WebSocket連接成功"); }, websocketonerror(e) { //錯(cuò)誤 console.log("WebSocket連接發(fā)生錯(cuò)誤"); }, websocketonmessage(e){ //數(shù)據(jù)接收 const redata = JSON.parse(e.data); //注意:長連接我們是后臺直接1秒推送一條數(shù)據(jù), //但是點(diǎn)擊某個(gè)列表時(shí),會發(fā)送給后臺一個(gè)標(biāo)識,后臺根據(jù)此標(biāo)識返回相對應(yīng)的數(shù)據(jù), //這個(gè)時(shí)候數(shù)據(jù)就只能從一個(gè)出口出,所以讓后臺加了一個(gè)鍵,例如鍵為1時(shí),是每隔1秒推送的數(shù)據(jù),為2時(shí)是發(fā)送標(biāo)識后再推送的數(shù)據(jù),以作區(qū)分 console.log(redata.value); }, websocketsend(agentData){//數(shù)據(jù)發(fā)送 this.websock.send(agentData); }, websocketclose(e){ //關(guān)閉 console.log("connection closed (" + e.code + ")"); }, }, } </script>
到此這篇關(guān)于Vue+WebSocket頁面實(shí)時(shí)刷新長連接的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue+WebSocket實(shí)時(shí)刷新長連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對是登錄操作,我們?yōu)榱送瓿蒘SO(Single Sign On)的效果,認(rèn)證和授權(quán)在UC完成,用戶發(fā)起資源請求,服務(wù)網(wǎng)關(guān)會進(jìn)行過濾,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲到Minio的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn))
本篇文章主要介紹了詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04element input輸入框自動獲取焦點(diǎn)的實(shí)現(xiàn)
本文主要介紹了element input輸入框自動獲取焦點(diǎn)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06詳解vuex中mutations方法的使用與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實(shí)現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11