Vue通過WebSocket建立長連線

2022-05-30 23:48:14 字數 470 閱讀 9353

在專案開發中,後端需要處理一連串的邏輯,或者等待第三方的資料返回來進行處理之後在返回給前端,可能時間會很長,而且前端也不知道後端什麼時候能處理好(時間長的話會達到10分鐘左右),如果採用普通的http連線,前後端無法一直保持聯絡,麻煩的時候可能還需要採用輪詢的機制,所以使用websocket連線效果還是比較好的。

在介面載入完之後,建上websocket連線,此時前端還可以傳送普通的http的請求,等到後端處理完之後,通過建立的websocket連線返給前端,前端根據返回的資料進行對應的操作。

在實際使用的時候遇到的問題:有的時候頁面鏈結還沒有建立上,但是後端已經把資料都處理好了,這個時候推給前端,前端接收不到。

1)簡單的方法:讓後端延遲幾秒再推

優勢:簡單

劣勢:降低了效能

2)優化之後的方法:使用redis儲存使用者的登入狀態,快取這個使用者的資料,等到建立連線之後再推,推完就清空redis

vue專案使用websocket技術

一 為什麼需要websocket?前端和後端的互動模式最常見的就是前端發資料請求,從後端拿到資料後展示到頁面中。如果前端不做操作,後端不能主動向前端推送資料,這也是http協議的缺陷。因此,一種新的通訊協議應運而生 websocket,他最大的特點就是服務端可以主動向客戶端推送訊息,客戶端也可以主動...

vue使用websocket坎坷歷程

起因 專案首頁左右兩欄布局,左側布局是乙個列表始終固定,右側布局路由跳轉,左側列表定時重新整理 http輪訓 右側路由跳轉時會有一些頁面初始化的請求和使用者點選互動的請求。目前很多定時重新整理,都是http輪訓,方便且快捷。但我這種情況有乙個問題,定時器1s重新整理請求介面,如果此時再操作右側面板,...

十八 vue全域性使用WebSocket

首先就是網上的寫法有很多但是 都是需要建立乙個物件進行相關的狀態 有的是需要建立乙個初始化方法進行相關的狀態 然後看的我就一句話 都挺好的,反正就是需要你去建立物件接收傳送訊息,然後我就在這寫乙個全域性的使用的,因為我覺得大部分就是作為訊息推送來用所以全域性來用蠻好的。websocket是什麼 首先...