- 創建websocket.js
const WSS_URL = `wss://wss.xxxx.com/ws?appid=xxx`
let Socket = ''
let setIntervalWesocketPush = null
// 建立連接
export function createSocket() {
if (!Socket) {
console.log('建立websocket連接')
Socket = new WebSocket(WSS_URL)
Socket.onopen = onopenWS
Socket.onmessage = onmessageWS
Socket.onerror = onerrorWS
Socket.onclose = oncloseWS
} else {
console.log('websocket已連接')
}
}
// 打開WS之後發送心跳
export function onopenWS() {
sendPing() //發送心跳
}
// 連接失敗重連
export function onerrorWS() {
clearInterval(setIntervalWesocketPush)
Socket.close()
createSocket() //重連
}
// WS數據接收統一處理
export function onmessageWS(e) {
window.dispatchEvent(new CustomEvent('onmessageWS', {
detail: {
data: e
}
}))
}
/**發送數據
1. @param eventType
*/
export function sendWSPush(eventTypeArr) {
const obj = {
appId: 'airShip',
cover: 0,
event: eventTypeArr
}
if (Socket !== null && Socket.readyState === 3) {
Socket.close()
createSocket() //重連
} else if (Socket.readyState === 1) {
Socket.send(JSON.stringify(obj))
} else if (Socket.readyState === 0) {
setTimeout(() => {
Socket.send(JSON.stringify(obj))
}, 3000)
}
}
/**關閉WS */
export function oncloseWS() {
clearInterval(setIntervalWesocketPush)
console.log('websocket已斷開')
}
/**發送心跳 */
export function sendPing() {
Socket.send('ping')
setIntervalWesocketPush = setInterval(() => {
Socket.send('ping')
}, 5000)
}
- 組件中調用
import { createSocket, sendWSPush } from './api/websocket'
createSocket() //創建
sendWSPush(11111) //發送數據
// 事件監聽 如果websockte有反應觸發"this.getDataFunc"方法
window.addEventListener('onmessageWS', this.getDataFunc)
//根據需要,銷燬事件監聽(不然會創建多個監聽事件,發一次通告提示好幾次)
window.removeEventListener('onmessageWS', this.getDataFunc)
methods: {
getDataFunc(e) {
console.log(e)
}
}