Vue 中封装 websocket
时间:2021-06-23 17:04:51
收藏:0
阅读:0
// 创建 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)
let i = 0
setInterval(() => {
sendData(i++, this.test)
}, 6000)
}
评论(0)