html5 长链接,Vue通过WebSocket建立长连接，连接
Vue通過WebSocket建立長連接，連接
使用場景：
在項目開發中，后端需要處理一連串的邏輯，或者等待第三方的數據返回來進行處理之后在返回給前端，可能時間會很長，而且前端也不知道后端什么時候能處理好(時間長的話會達到10分鐘左右)，如果采用普通的HTTP連接，前后端無法一直保持聯系，麻煩的時候可能還需要采用輪詢的機制，所以使用WebSocket連接效果還是比較好的。
使用時間：
在界面加載完之后，建上WebSocket連接，此時前端還可以發送普通的HTTP的請求，等到后端處理完之后，通過建立的WebSocket連接返給前端，前端根據返回的數據進行對應的操作。
代碼展示：
export default {
data() {
return{
// 用戶Id
userId:'',
appid:'',
// 事件類型
type:'',
msg:'',
wsUrl:''
}
},
methods: {
//初始化weosocket
initWebSocket() {
if (typeof WebSocket === "undefined") {
alert("您的瀏覽器不支持WebSocket");
return false;
}
const wsuri = 'ws://(后端WebSocket地址)/websocket/' + this.userId + '/' + this.appid // websocket地址
this.websock = new WebSocket(wsuri);
this.websock.onopen = this.websocketonopen;
this.websock.onmessage = this.websocketonmessage;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
//連接成功
websocketonopen() {
console.log("WebSocket連接成功");
// 添加心跳檢測，每30秒發一次數據，防止連接斷開(這跟服務器的設置有關，如果服務器沒有設置每隔多長時間不發消息斷開，可以不進行心跳設置)
let self = this;
this.timer = setInterval(() => {
try {
self.websock.send('test')
console.log('發送消息');
}catch(err){
console.log('斷開了：' + err);
self.connection()
}
}, 30000)
},
//接收后端返回的數據，可以根據需要進行處理
websocketonmessage(e) {
var vm = this;
let data1Json = JSON.parse(e.data);
console.log(data1Json);
},
//連接建立失敗重連
websocketonerror(e) {
console.log(`連接失敗的信息：`, e);
this.initWebSocket(); // 連接失敗后嘗試重新連接
},
//關閉連接
websocketclose(e) {
console.log("斷開連接", e);
}
},
created() {
if (this.websock) {
this.websock.close(); // 關閉websocket連接
}
this.initWebSocket();
},
destroyed() {
//頁面銷毀時關閉ws連接
if (this.websock) {
this.websock.close(); // 關閉websocket
}
}
};
問題回顧：
在實際使用的時候遇到的問題：有的時候頁面鏈接還沒有建立上，但是后端已經把數據都處理好了，這個時候推給前端，前端接收不到。
解決方案：
1)簡單的方法：讓后端延遲幾秒再推
優勢：簡單
劣勢：降低了性能
2)優化之后的方法：使用Redis保存用戶的登錄狀態，緩存這個用戶的數據，等到建立連接之后再推，推完就清空Redis
http://www.dengb.com/HTML5/1378286.htmlwww.dengb.comtruehttp://www.dengb.com/HTML5/1378286.htmlTechArticleVue通過WebSocket建立長連接，連接 使用場景： 在項目開發中，后端需要處理一連串的邏輯，或者等待第三方的數據返回來進行處理之后在返...
總結
以上是生活随笔為你收集整理的html5 长链接,Vue通过WebSocket建立长连接，连接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ap计算机科学换学分,科普：AP成绩出来
- 下一篇： vue动态获取元素距离页面顶部的高度_V