vue2 使用WebSocket

代码：

        带离开页面 刷新页面 关闭WebSocket

<template>
	<div></div>
</template>
<script>
export default {
	data() {
		return {
			websocket: null,
			// WebSocket 地址
			WebSocket_URL: '',
            reconnectTimer：null
		};
	},
	mounted() {
		// 调用WebSocket
		this.initSysWebsocket();
	},
	methods: {
		 initSysWebsocket() {
            try {
                // 判断浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    // console.log(this.wsUrl)
                    // console.log(this.$store.getters.userId)
                    // 正式环境参数
                    this.websocket = new WebSocket(this.WebSocket_URL);
                    // console.log(this.websocket)
                    this.initWebSocket()
                } else {
                    alert('当前浏览器 不支持')
                }
            } catch (e) {
                // console.log('尝试创建连接失败')
                //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
                this.reConnect()
            }
        },
        reConnect() {
            //重连函数
            var that = this
            // if (this.isConnect) return
            this.reconnectTimer && clearInterval(this.reconnectTimer)
            // 如果 this.rec 存在，清除与之关联的定时器
            this.rec && clearTimeout(this.rec)
            // 延迟5秒重连  避免过多次过频繁请求重连
            this.rec = setTimeout(function () {
                that.initSysWebsocket();
            }, 5000)
        },
        initWebSocket() {
            // this.isConnect = true
            // 连接错误
            this.websocket.onerror = this.setErrorMessage
            // 连接成功
            this.websocket.onopen = this.setOnopenMessage
            // 收到消息的回调
            this.websocket.onmessage = this.setOnmessageMessage
            // 连接关闭的回调
            this.websocket.onclose = this.setOncloseMessage
            // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = this.onbeforeunload
        },
        // 连接错误
        setErrorMessage() {
            // this.isConnect = false
            //调用重连函数
            this.reConnect()
            console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
        },
        // 连接成功
        setOnopenMessage() {
            let that = this
            console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
            that.reconnectTimer = setInterval(function () {
                console.log('WebSocket发送信息：' + "心跳：" + new Date().toLocaleString())
                that.websocket.send('心跳：' + new Date().toLocaleString());
            }, 6 * 1000);
        },
        // 接受消息的回调
        setOnmessageMessage(event) {
            const dataJson = JSON.parse(event.data);
            // console.log('接受的WebSocket参数', dataJson);
        },
        // 连接关闭的回调
        setOncloseMessage() {
            // this.isConnect = false
            // 重连
            this.reConnect()
            // console.log("connection closed (" + e.code + ")")
            console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
        },
        onbeforeunload() {
            this.closeWebSocket()
        },
        closeWebSocket() {
            clearInterval(this.reconnectTimer)
            this.websocket.close();
            this.websocket.onclose = function (evt) {
                console.log("websocket已关闭");
            };
        },

	},
	created() {
		//绑定事件
		window.addEventListener('beforeunload', (e) => this.onbeforeunload());
	},
	beforeDestroy() {
        this.onbeforeunload()
	},
};
</script>
<style></style>