websocket的封装和服务器断线重连

 

import { Message } from 'element-ui'

export const connectSocket = (userId) => {

    if (!userId) {

        return;

    }

    let lockReconnect = false;//避免重复连接

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

    function createWebSocket() {

        try {

            if ('WebSocket' in window) {

                let protocol = window.location.protocol;

                if (protocol === 'http:') {

                    window.webSocket = new WebSocket("ws://" + window.location.host + "/api/hod/web/socket/" );

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

                    window.webSocket = new WebSocket("wss://" + window.location.host + "/api/hod/web/socket/" );

                }

                websocketInit()

            } else {

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

            }

 

        } catch (e) {

            websocketReconnect()

        }

    }

    createWebSocket()

 

    function websocketInit() {

        let timeId ='';

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

        webSocket.onopen = function () {

        

            console.log("webSocket连接成功");

            timeId = setInterval(() => {

                webSocket.send('ping');

            }, 30000)

        };

        webSocket.onclose = function (e) {

            console.log(e);

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

            if (timeId) {

                clearInterval(timeId);

            }

            if (e.code == 1006){

                websocketReconnect()

            }

           

 

        };

        //每个页面接收消息的处理方式都不同

        // webSocket.onmessage = function () {

        //     //   Notification({

        //     //     dangerouslyUseHTMLString: true,

        //     //     message: '<p>'+event.data+'</p>',

        //     //   })

        //     // heartCheck.start();

        // };

        webSocket.onerror = function () {

 

        };

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

        window.onbeforeunload = function () {

            webSocket.close();

        }

    }

 

    function websocketReconnect() {

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

            return;

        }

        lockReconnect = true;

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

        tt && clearTimeout(tt);

        var tt = setTimeout(function () {

            createWebSocket()

            lockReconnect = false;

        }, 3000);

 

    }

};

 

在main.Js中挂载

import {connectSocket} from './api/api'

Vue.prototype.connectSocket = connectSocket;

页面使用

 this.connectSocket(this.$store.state.user.id)

        window.webSocket.onmessage = function (event) {

            console.log(event)

            this.TableData = event.data

        }