在web應(yīng)用中，客戶端與服務(wù)端的通信一般使用http短連接。這種通信方式使得網(wǎng)頁響應(yīng)速度快，但是對于一些實時性要求高的應(yīng)用，如在線聊天室、股票交易等，需要使用長連接技術(shù)。
長連接一般是指客戶端與服務(wù)端建立一條相對較長的持久連接，通過這個連接雙方可以實時通信。比如在一些聊天室應(yīng)用中，用戶發(fā)送消息到服務(wù)端，服務(wù)端再實時將這個消息推送給在線的其他用戶。中間過程中所有的通信都是在同一個TCP連接上完成的。
在Vue中實現(xiàn)長連接需要考慮兩個方面的問題：前端如何與服務(wù)端建立長連接，如何在前端中處理從服務(wù)端接收到的數(shù)據(jù)。
為了建立長連接，前端需要使用WebSocket技術(shù)。WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議。與HTTP相比，WebSocket除了支持長連接外，還能實現(xiàn)跨域通信。
// 客戶端建立Socket連接
let socket = new WebSocket('ws://localhost:8888');
// 連接成功回調(diào)
socket.onopen = () =>{
console.log('與服務(wù)器建立了WebSocket連接');
};
// 接收到消息回調(diào)
socket.onmessage = (event) =>{
let data = JSON.parse(event.data);
console.log('收到服務(wù)器消息：', data);
};在前端中處理接收到的數(shù)據(jù)可以通過Vue的數(shù)據(jù)響應(yīng)機制實現(xiàn)。當(dāng)從服務(wù)端接收到新的數(shù)據(jù)時，可以將其更新到Vue的數(shù)據(jù)模型中，再通過組件的數(shù)據(jù)綁定實現(xiàn)對頁面的實時更新。
// 客戶端建立Socket連接
let socket = new WebSocket('ws://localhost:8888');
// 定義Vue組件
Vue.component('chat-room', {
template: `{{ message }}`,
data() {
return {
messages: [],
newMessage: ''
};
},
created() {
// 接收到消息回調(diào)
socket.onmessage = (event) =>{
let data = JSON.parse(event.data);
this.messages.push(data.message);
};
},
methods: {
send() {
// 發(fā)送消息
let data = { message: this.newMessage };
socket.send(JSON.stringify(data));
this.newMessage = '';
}
}
});
// 創(chuàng)建Vue實例
let vm = new Vue({
el: '#app'
});當(dāng)從服務(wù)端接收到新的消息時，組件的created方法會被調(diào)用，在回調(diào)函數(shù)中將消息添加到Vue的數(shù)據(jù)模型中。當(dāng)界面中的按鈕被點擊時，send方法會向服務(wù)端發(fā)送消息，之后將新消息添加到Vue的數(shù)據(jù)模型中，從而實現(xiàn)了實時更新。