1. 程式人生 > 其它 >Vue 中封裝 websocket

Vue 中封裝 websocket

// 建立 websocket.js 資料夾
let wsurl = 'ws://82.157.123.54:9010/ajaxchattest'
let ws = null
let weboscket_callback = null

//獲取 websocket 推送的資料
let websocketonmessage = e => {
 return weboscket_callback(e)
}

// 連線成功
let websocketonopen = () => {
 console.log('連線 websocket 成功')
}

// 連線失敗時重新連線
let websocketonerror = () => {
 initWebSocket()
}

// 斷開連結後報錯 let websocketclose = e => { console.log('斷開連線', e) } // 手動關閉 websocket let closewebsocket = () => { ws.close() } let initWebSocket = () => { //初始化 websocket ws = new WebSocket(wsurl) ws.onmessage = websocketonmessage ws.onopen = websocketonopen ws.onerror = websocketonerror ws.onclose
= websocketclose } // 傳送資料 let sendData = (data, callback) => { weboscket_callback = callback if (typeof data == 'string') { data = data } else { data = JSON.stringify(data) } switch (ws.readyState) { case 0: setTimeout(() => { ws.send(data) }, 1000) break case 1: ws.send(data)
break case 3: initWebSocket() setTimeout(() => { ws.send(data) }, 1000) break } } initWebSocket() export { sendData, closewebsocket }

元件中引用

import{sendData,closewebsocket}from'../../utils/websocket' 在methods中: //用來接收websocket推送的資料 test(e){ console.log(e.data) }, // 傳送資料 send(){   sendData('dfa',this.test) setTimeout(()=>{ closewebsocket() },3000) setTimeout(()=>{ sendData('重新發送',this.test) },5000) leti=0 setInterval(()=>{ sendData(i++,this.test) },6000) }