解决前端监听事件绑定多次导致执行多次的情况

问题描述：因自己在做一个websocket的web程序时候需要重新刷新websoket的信息，我采用重新初始化，绑定事件也同时执行了多次，导致在接收消息websocket.onmessage时候，多次触发执行的情况

登录成功后会刷新websocket 初始化信息会绑定第二次

我的代码

new Vue({
        el: '#vueMonthId',
        data: {
           websocket: null,
        }, mounted() {
            var that = this;
           that.webSocketinit()
        },
        methods: {
        loginFun: function (formName) {
                var that = this;
               $.ajax({
                            url: '${path}/login/logCheck',
                            data: {
                                userCode: that.trim(that.loginForm.userCode),
                                passWord: that.trim(that.loginForm.passWord)
                            },
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                if (data.status == 200) {
                                    that.loginDialogFlag = false;
                                    that.ensureInfoDialogFlag = true;
                                    that.$message({
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    //刷新socket
                                    that.webSocketinit();
                                } else {
                                    that.$message.error(data.message);
                                }
                            }
                        })
            },webSocketinit() {
                var that = this;
                var url = that.host + "${path}/board/webSocket"
                //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    // 浏览器支持Websocket
                    that.websocket = new WebSocket('ws://' + url + '/' + 11 + "?path=${path}");
                } else {
                    // 浏览器 Not support websocket
                }
                
                    that.websocketBind=false;
                    //WebSocket连接发生错误的回调方法
                    that.websocket.onerror = function (res) {
                        that.setMegHtml("WebSocket连接发生错误");
                    };
                    //WebSocket连接成功建立的回调方法
                    that.websocket.onopen = function () {
                        //that.setMegHtml("WebSocket连接成功");
                    };
                    //接收到消息的回调方法
                    that.websocket.onmessage = function (event) {
                        that.setMegHtml($.parseJSON(event.data));
                    };
                    window.onbeforeunload = function () {
                        closeWebSocket();
                    };
                    //关闭WebSocket连接
                    function closeWebSocket() {
                        that.websocket.close();
                    }
                    //连接关闭的回调方法
                    that.websocket.onclose = function () {
                        that.setMegHtml("WebSocket连接关闭");
                        console.log("WebSocket连接关闭")
                    };
            }
    })

解决方案：保证websocket这个对象只绑定一次，加了一个标识符 websocketBind 变量 判断保证绑定代码只执行一次

new Vue({
        el: '#vueMonthId',
        data: {
           websocket: null,
            websocketBind:true
        }, mounted() {
            var that = this;
           that.webSocketinit()
        },
        methods: {
        loginFun: function (formName) {
                var that = this;
               $.ajax({
                            url: '${path}/login/logCheck',
                            data: {
                                userCode: that.trim(that.loginForm.userCode),
                                passWord: that.trim(that.loginForm.passWord)
                            },
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                if (data.status == 200) {
                                    that.loginDialogFlag = false;
                                    that.ensureInfoDialogFlag = true;
                                    that.$message({
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    //刷新socket
                                    that.webSocketinit();
                                } else {
                                    that.$message.error(data.message);
                                }
                            }
                        })
            },webSocketinit() {
                var that = this;
                var url = that.host + "${path}/board/webSocket"
                //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    // 浏览器支持Websocket
                    that.websocket = new WebSocket('ws://' + url + '/' + 11 + "?path=${path}");
                } else {
                    // 浏览器 Not support websocket
                }
                if（websocketBind）{
                    //只绑定一次
                    that.websocketBind=false;
                    //WebSocket连接发生错误的回调方法
                    that.websocket.onerror = function (res) {
                        that.setMegHtml("WebSocket连接发生错误");
                    };
                    //WebSocket连接成功建立的回调方法
                    that.websocket.onopen = function () {
                        //that.setMegHtml("WebSocket连接成功");
                    };
                    //接收到消息的回调方法
                    that.websocket.onmessage = function (event) {
                        that.setMegHtml($.parseJSON(event.data));
                    };
                    window.onbeforeunload = function () {
                        closeWebSocket();
                    };
                    //关闭WebSocket连接
                    function closeWebSocket() {
                        that.websocket.close();
                    }
                    //连接关闭的回调方法
                    that.websocket.onclose = function () {
                        that.setMegHtml("WebSocket连接关闭");
                        console.log("WebSocket连接关闭")
                    };
                }
            }
    })