前端 websocket 長(zhǎng)連接
websocket 是什么?
websocket 是一種通信協(xié)議,只需一次http握手就可以建立持久連接,并且能進(jìn)客戶端與服務(wù)端行雙向通信,它允許服務(wù)端主動(dòng)給客戶端推送消息。
websocket 如何建立?
websocket 是現(xiàn)代瀏覽器的一個(gè)內(nèi)置對(duì)象,通過(guò)一個(gè)構(gòu)造函數(shù) new Websocket(url) 便可建立連接
例:

webSocket 4個(gè)狀態(tài):
1、ws.onopen()連接成功
2、ws.onclose()連接關(guān)閉
3、ws.onerror()連接出錯(cuò)
4、ws.onmessage()服務(wù)器返回信息解析
方法:
1、ws.send()發(fā)送信息
2、ws.close()關(guān)閉連接
在Vue中使用
data(){
retrun {
ws: null, // WebSocket實(shí)例
time: 5000, // 計(jì)時(shí)器時(shí)間
}
},
created(){
this.initWebSocket()
},
methods:{
initWebSocket(){
if (window.WebSocket){
let ws = new WebSocket('地址') // 建立連接
this.ws = ws
// 服務(wù)器連接成功
ws.onopen = function(){
console.log('連接成功')
ws.send('hello') // 給后臺(tái)發(fā)消息
this.heartbeat() // 開(kāi)啟心跳
}
// 服務(wù)器連接關(guān)閉
ws.onclose = function(){
console.log('連接關(guān)閉')
}
// 服務(wù)器連接出錯(cuò)
ws.onerror = function(){
console.log('連接出錯(cuò)')
}
// 解析信息
ws.onmessage = function(e){
console.log(e,'接收數(shù)據(jù)')
}
},
// 心跳
heartbeat(){
setInterval(() => {
this.ws.send('心跳')
}, this.time);
}
}
}

浙公網(wǎng)安備 33010602011771號(hào)