Vue中使用websocket

在methods中添加websocket相关函数

    data(){
        return {
            ws:null
        }
    },
    
    methods: {
     websocket() {
                //建立socket通道
                //process.env.VUE_APP_URL为服务端地址
                //code为自定义的参数，主要是用于服务端标识当前会话是哪个用户
                this.ws = new WebSocket(
                    'ws:' +
                        process.env.VUE_APP_URL +
                        '/websocket?identity=identity'
                );
                //socket连接成功后的回调函数
                this.ws.onopen = () => {
                    console.log('websocket连接成功！');
                    //若项目中没有使用nginx转发请求则忽略这步
                    //设置定时器，每过55秒传一次数据
                    //以防长时间不通信被nginx自动关闭会话
                    //也可以通过修改nginx配置文件延长关闭时间
                    setInterval(() => {
                        this.keepAlive(ws);
                    }, 55000);
                };
                //接收来自服务端消息的回调函数
                //fluseData() 为自定义的数据刷新函数
                this.ws.onmessage = evt => {
                    console.log('已接收来自后台的消息：', evt);
                    // 刷新数据
                    this.fluseData();
                };
                //关闭socket的回调函数
                this.ws.onclose = function() {
                    // 关闭 websocket
                    console.log('连接已关闭...');
                };
                // 路由跳转时结束websocket链接
                this.$router.afterEach(function() {
                    this.ws.close();
                });
            },
        //持续向后台发送消息，用于维护socket通道不被nginx关闭  
        keepAlive(webSocket) {
            if (webSocket) {
                if (webSocket.readyState == webSocket.OPEN) {
                    webSocket.send('');
                }
            }
        }
    }

在页面加载时调用函数建立socket连接

mounted() {
    this.websocket();
}

在页面关闭或销毁时关闭socket

beforeDestroy() {
        this.ws.close();
    },