websocket的使用

websocket.js
export default class WebSocketClient {
    constructor(url) {
        this.url = url

        this.websocket = null
        this.reconnectInterval = 6000 // 重连间隔时间
        this.heartBeatInterval = 5000 // 心跳间隔时间
        this.heartBeatTimer = null
        this.reconnectTimer = null
        this.message = ""
    }

    connect() {
        this.createWebSocket()
    }

    createWebSocket() {
        if (!this.websocket) {
            this.websocket = new WebSocket(this.url)
            this.websocket.onopen = this.websocketOnOpen.bind(this)
            this.websocket.onmessage = this.websocketOnMessage.bind(this)
            this.websocket.onclose = this.websocketOnClose.bind(this)
            this.websocket.onerror = this.websocketOnError.bind(this)
        }
    }

    websocketOnOpen() {
        console.log("WebSocket连接成功")
        this.startHeartBeat()
    }

    websocketOnMessage(event) {
        console.log("收到消息：", event.data)
        this.message = event.data
    }

    websocketOnClose() {

        console.log("WebSocket连接关闭")
        if (this.websocket) {
            this.websocket.close()
            this.websocket = null
        }
        clearInterval(this.heartBeatTimer)
        clearInterval(this.reconnectTimer)
    }

    websocketOnError() {
        console.log("WebSocket连接错误")
        console.log("WebSocket 连接中……")
        this.connect()
        this.websocket.close()
    }


    startHeartBeat() {
        this.heartBeatTimer = setInterval(() => {
            if (this.websocket.readyState === 1) {
                let message = JSON.stringify({ "type": "ping" })
                this.websocket.send(message)
            }
        }, this.heartBeatInterval)
    }

    stopHeartBeat() {
        if (this.websocket) {
            this.websocket.close()
            this.websocket = null
        }
        clearInterval(this.heartBeatTimer)
        clearInterval(this.reconnectTimer)
    }

    closeWebSocket() {
        if (this.websocket) {
            this.websocket.close()
            this.websocket = null
        }
        clearInterval(this.heartBeatTimer)
        clearInterval(this.reconnectTimer)
    }
    send(mess) {
        this.websocket.send(mess)
    }
}
websocket.vue
<template></template>
  
<script>
import WebSocketClient from "@/util/websocket.js"
export default {
    props: {
        sendW: Boolean
    },
    computed: {
        message() {
            if (this.websocket) {
                return this.websocket.message
            }
        },
    },
    data() {
        return {
            websocket: null
        }
    },
    created() {
        let user_info
        //  const isToken = (config.headers || {}).isToken === false;
        let token = ""
        //  const isToken = (config.headers || {}).isToken === false;
        if (sessionStorage.getItem("access_token")) {
            token = JSON.parse(sessionStorage.getItem("access_token")).content;
        }
        // let token = JSON.parse(sessionStorage.getItem("access_token"))
        let websocketUrl = `${process.env.VUE_APP_WS_API}/clean/ws/info?access_token=${token}`
        this.websocket = new WebSocketClient(websocketUrl)
        this.websocket.connect()
    },
    mounted() {
    },
    watch: {
        message() {
            if (this.message)
                this.$emit("getMessage", this.message)
                this.$emit("getMessage1", this.message)
        },
        sendW() {
            let message = JSON.stringify({ "type": "ping" })
            this.websocket.send(message)
        },
    },
    beforeDestroy() {
        this.websocket.closeWebSocket()
    },
};
</script>
     使用
     
      <webSocket @getMessage="getMessage" :sendW="sendW"></webSocket>
      
      import webSocket from "@/view/workManage/components/webSocket.vue";
       components: {   
    webSocket,
  },
  
   getMessage(data) {
      console.log(data)
    },