最後的egret

  堅持作一件事真的好難~ 決定從新寫博客的時候想着必定要堅持一個週一篇，然而....

  年後上班老闆找個人第一件大事：之後公司的棋牌產品不會有大的動做了；公司PHP（內部用的運營後臺）的小姐姐休產假了，我暫時接手她的工做；之後公司會向着其餘遊戲方向發展，想讓我去學習cocos；

  寫了egret 半年了，伴隨着今天最後一個egret棋牌遊戲上線，也就宣告着個人egret生涯暫時告一段落了，今天寫點東西算是記念一下吧。

 

1、由於是作的h5遊戲，跑在微信瀏覽器裏面的，因此前端出身的我仍是有一點點優點的，儘管我只是個菜鳥。

  對於egret 鎖屏js休眠的問題，因爲egret的這種機制，每每會致使用戶在鎖屏後（或者切出去以後）再進來就會發現遊戲畫面渲染出現錯亂，可能要等到下個階段渲染改組件的時候才恢復；

  這種問題應該也不算是新鮮事了吧。在瀏覽器有這樣一個事件能夠監聽當前頁面是否處於激活狀態：我是判斷鎖屏到解鎖花了多久。通常超過5秒就會讓用戶刷新一下，重現渲染遊戲畫面。

Utils.activationDoc = function (status) {
//兼容寫法
    var hiddenProperty = 'hidden' in document ? 'hidden' :
        'webkitHidden' in document ? 'webkitHidden' :
            'mozHidden' in document ? 'mozHidden' :
                null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var hiddenTime = null;
    var showTime = null;
    var onVisibilityChange = function () {if (!document[hiddenProperty]) {
         //激活作點什麼
        } else {
           //非激活作點什麼
        }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
}

2、關於websocket

一直用不習慣egret提供的socket,因此借鑑了一個小框架你們能夠看一看，學習一下，啥也不說了，都在代碼裏

// TypeScript file
class ReconnectingWebSocket {
    //These can be altered by calling code
    public debug:boolean = false;

    //Time to wait before attempting reconnect (after close)
    public reconnectInterval:number = 1000;
    //Time to wait for WebSocket to open (before aborting and retrying)
    public timeoutInterval:number = 2000;

    //Should only be used to read WebSocket readyState
    public readyState:number;

    //Whether WebSocket was forced to close by this client
    private forcedClose:boolean = false;
    //Whether WebSocket opening timed out
    private timedOut:boolean = false;

    //List of WebSocket sub-protocols
    private protocols:string[] = [];

    //The underlying WebSocket
    private ws:WebSocket;
    private url:string;

    /**
     * Setting this to true is the equivalent of setting all instances of ReconnectingWebSocket.debug to true.
     */
    public static debugAll = false;

    //Set up the default 'noop' event handlers
    public onopen:(ev:Event) => void = function (event:Event) {};
    public onclose:(ev:CloseEvent) => void = function (event:CloseEvent) {};
    public onconnecting:() => void = function () {};
    public onmessage:(ev:MessageEvent) => void = function (event:MessageEvent) {};
    public onerror:(ev:ErrorEvent) => void = function (event:ErrorEvent) {};

    constructor(url:string, protocols:string[] = []) {
        this.url = url;
        this.protocols = protocols;
        this.readyState = WebSocket.CONNECTING;
        this.connect(false);
    }

    public connect(reconnectAttempt:boolean) {
        this.ws = new WebSocket(this.url, this.protocols);

        this.onconnecting();
        this.log('ReconnectingWebSocket', 'attempt-connect', this.url);

        var localWs = this.ws;
        var timeout = setTimeout(() => {
            this.log('ReconnectingWebSocket', 'connection-timeout', this.url);
            this.timedOut = true;
            localWs.close();
            this.timedOut = false;
        }, this.timeoutInterval);

        this.ws.onopen = (event:Event) => {
            clearTimeout(timeout);
            this.log('ReconnectingWebSocket', 'onopen', this.url);
            this.readyState = WebSocket.OPEN;
            reconnectAttempt = false;
            this.onopen(event);
        };

        this.ws.onclose = (event:CloseEvent) => {
            clearTimeout(timeout);
            this.ws = null;
            if (this.forcedClose) {
                this.readyState = WebSocket.CLOSED;
                this.onclose(event);
            } else {
                this.readyState = WebSocket.CONNECTING;
                this.onconnecting();
                if (!reconnectAttempt && !this.timedOut) {
                    this.log('ReconnectingWebSocket', 'onclose', this.url);
                    this.onclose(event);
                }
                setTimeout(() => {
                    this.connect(true);
                }, this.reconnectInterval);
            }
        };
        this.ws.onmessage = (event) => {
            this.log('ReconnectingWebSocket', 'onmessage', this.url, event.data);
            this.onmessage(event);
        };
        this.ws.onerror = (event) => {
            this.log('ReconnectingWebSocket', 'onerror', this.url, event);
            this.onerror(event);
        };
    }

    public send(data:any) {
        if (this.ws) {
            this.log('ReconnectingWebSocket', 'send', this.url, data);
            return this.ws.send(data);
        } else {
            throw 'INVALID_STATE_ERR : Pausing to reconnect websocket';
        }
    }

    /**
     * Returns boolean, whether websocket was FORCEFULLY closed.
     */
    public close():boolean {
        if (this.ws) {
            this.forcedClose = true;
            this.ws.close();
            return true;
        }
        return false;
    }

    /**
     * Additional public API method to refresh the connection if still open (close, re-open).
     * For example, if the app suspects bad data / missed heart beats, it can try to refresh.
     *
     * Returns boolean, whether websocket was closed.
     */
    public refresh():boolean {
        if (this.ws) {
            this.ws.close();
            return true;
        }
        return false;
    }

    private log(...args: any[]) {
        if (this.debug || ReconnectingWebSocket.debugAll) {
            console.debug.apply(console, args);
        }
    }
}