websocket不同于http協(xié)議，是由后端往前端推送數(shù)據(jù)，因此對(duì)于即時(shí)性數(shù)據(jù)比較合適。
創(chuàng)建websocket：
let base = config.wsIp;**
let webSocketIP = ``;
let socket = '';
let isFirst = true;
export const createSocket =tid => {
isFirst = true;
console.log('establish websocket connection')
webSocketIP = `${base}/websocket/${tid}`
socket = new WebSocket(webSocketIP);
socket.onopen = onopenWs;
socket.onclose = oncloseWs;
socket.onerror = onerrorWs;
socket.onmessage = onmessageWs;
}
const onopenWs = event => {
console.log("鏈接", event);
socket.send("websocket client connect testss");
}
const oncloseWs = event => {
console.log("斷開鏈接", event);
clearInterval(setIntervalWesocketPush)
}
const onerrorWs = event => {
console.log("出現(xiàn)錯(cuò)誤", event);
clearInterval(setIntervalWesocketPush)
}
const onmessageWs = event => {
console.log(JSON.parse(event.data))
window.dispatchEvent(new CustomEvent('onmessageWS', {
detail: {
data: event,
isFirst: isFirst
}
}))
if(isFirst) {
isFirst = false;
}
}
使用：
import { createSocket } from '../apis/websocket'
this.getNoticeData(this.tid);
getNoticeData(tid) {
createSocket(tid);
window.addEventListener('onmessageWS', this.setNoticeData)
},
這種寫法是參考的簡(jiǎn)書上的一個(gè)老哥的，但他那個(gè)里邊有點(diǎn)問題，所以簡(jiǎn)單做了修改。修改主要是去除了前端的每隔一定時(shí)間請(qǐng)求一下，這是沒必要的，后端定時(shí)推送數(shù)據(jù)本身就是websocket的一大優(yōu)勢(shì)，如果使用前端每隔一段時(shí)間請(qǐng)求一下，那還不如直接使用http請(qǐng)求那。
