webSocket发送、接收数据

在vue中，将下面的js export导出，配置到main.js，如下

在main.Js中挂载

import {connectSocket} from './api/api' //  这里是webSocket的js文件

Vue.prototype.connectSocket = connectSocket;

页面使用

 this.connectSocket()

        window.webSocket.onmessage = function (event) {

            console.log(event)

            this.list = event.data

        }

webScoket连接代码

    <script>
        window.onload = function(){
            createWebSocket()
        }
        var lockReconnect = false; //避免重复连接

        //判断当前浏览器是否支持WebSocket

        function createWebSocket() {

            try {

                if ('WebSocket' in window) {

                    var protocol = window.location.protocol;
                    var url = window.location.host + "/evo-websocket/evo-accesscontrol/websocket?keepalive_backend=websocket_evo_accesscontrol_backend"
                    if (protocol === 'http:') {

                        window.webSocket = new WebSocket("ws://" + url);

                    } else if (protocol === 'https:') {

                        window.webSocket = new WebSocket("wss://" + url);

                    }
                    websocketInit()

                } else {

                    Message.error('你的浏览器不支持websocket，请切换浏览器。');

                }

            } catch (e) {

                websocketReconnect()

            }

        }


        var timeId = null;
        function websocketInit() {

            //连接成功建立的回调方法

            webSocket.onopen = function() {

                console.log("webSocket连接成功");
                webSocket.send('push-person-config');

                timeId = setInterval(() => {

                    webSocket.send('push-person-config');

                }, 30000)

            };

            webSocket.onclose = function(e) {

                console.log("webSocket连接关闭");

                websocketReconnect()

            };

            //每个页面接收消息的处理方式都不同
            webSocket.onerror = function() {
                console.log("WebSocket连接发生错误");
            };
            webSocket.onmessage = function (event) {

                console.log(JSON.parse(event.data))
                var data = JSON.parse(event.data)
                if (data.channelName === 'push-person-config') {
                    document.getElementById("personName").innerText = data.data.name
                    document.getElementById("personSex").innerText = data.data.sex
                    document.getElementById("personSell").innerText = data.data.department
                    document.getElementById("personImg").setAttribute('src', data.data.pictureUrl)
                }

            }

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

            window.onbeforeunload = function() {

                webSocket.close();
                clearInterval(interval1)
                clearInterval(interval2)
            }
        }

        function websocketReconnect() {

            if (lockReconnect) { // 是否已经执行重连
                return;
            }

            lockReconnect = true;

            //没连接上会一直重连，设置延迟避免请求过多

            timer && clearTimeout(timer);

            var timer = setTimeout(function() {

                createWebSocket()

                lockReconnect = false;

            }, 3000);
        }
        
    </script>