Vue 中封裝 websocket
阿新 • • 發佈:2021-06-23
// 建立 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) }