實時數據響應，組件化websocket減少代碼冗余

組件定義 websocket.vue

<template><div></div>
</template><script>export default {data() {return {webSocket: null, // webSocket實例lockReconnect: false, // 重連鎖，避免多次重連maxReconnect: 3, // 最大重連次數， -1 標識無限重連reconnectTime: 0, // 重連嘗試次數};},created() {this.initWebSocket()},destroyed: function () {this.webSocket.close()},//方法集合methods: {/*** 初始化 weoSocket*/initWebSocket() {// ws地址 const host = 'XXXXXXX'const wsUri = `ws://${host}:3000`console.log(wsUri)// 建立連接this.webSocket = new WebSocket(wsUri)// 連接成功this.webSocket.onopen = this.onOpen// 連接錯誤this.webSocket.onerror = this.onError// 接收信息this.webSocket.onmessage = this.onMessage// 連接關閉this.webSocket.onclose = this.onClose},/*** 連接成功事件*/onOpen() {console.log('WebSocket connection success')this.reconnectTime = 0},/*** 數據發送* @param msg*/send(msg) {//數據發送this.webSocket.send(msg)console.log('Websocket send:',msg)},/*** 連接失敗事件* @param e*/onError(e) {//錯誤console.log(`WebSocket connection error：${e.code} ${e.reason} ${e.wasClean}`)//重連// this.reconnect()},/*** 連接關閉事件* @param e*/onClose(e) {//關閉console.log(`WebSocket connection closed：${e.code} ${e.reason} ${e.wasClean}`)//重連// this.reconnect()},/*** 重新連接*/reconnect() {if (this.lockReconnect || (this.maxReconnect !== -1 && this.reconnectTime > this.maxReconnect)) {return}this.lockReconnect = truesetTimeout(() => {this.reconnectTime++// 建立新連接this.initWebSocket()this.lockReconnect = false}, 5000)},/*** 接收服務器推送的信息* @param msgEvent*/onMessage(msgEvent) {// console.log('日志信息打印：',msgEvent)this.$emit('onMessage', msgEvent.data)},},}
</script>

組件引用

        <myWebsocket v-if="dialogVisible" @onMessage="getMsg" />