斷線重連的需求

尤其是手機上，會因為網路的不穩定或者其他原因，導致使用者的socket連結斷開。這個時候如果直接讓玩家退出遊戲，重新登入，無疑是非常影響使用者體驗的事情。所以根據這個需求，就有需要程式來實現斷線後自動重連回去的技術，是使用者能夠再次快速開始遊戲進行戰鬥。

一、斷線重連原理

原來其實很簡單，就是在斷線的時候，根據使用者的點選（有些時間短的就不用點選，預設是自動重連回來），程式自動識別，是要重新整理重新進入遊戲還是幫使用者自動重連。客戶端會根據自動重連標記，幫使用者自動做事情。比如自動登陸、選角色、進入場景、請求同步後臺資料等等。

根據實現機制，大致可以分兩種實現方法。主要是遊戲內自動重連（不重新整理）和重新整理遊戲自動重連，後面會詳細講兩種實現機制，以及相關的利弊。

二、遊戲內自動重連（不重新整理）

這種是比較難的，因為不重新整理遊戲，那麼會因為一段時間的斷開遊戲，導致客戶端資料跟伺服器資料不同步了。比如怪物的位置、獲得的獎勵、進度等等。這些需要一開始就設計好，如果策劃在後期要求加這個，那幾乎是無法實現的，改動太大了。所以假設要這麼多，大概是類似下面的做法。（如果真要詳細，得一篇新的Blog了:）
1. 客戶端和服務端協定好那些資料需要客戶端自己同步
2. 斷線多久內可以自動重連（策劃以及技術上的實現來互相評估）
3. 服務端提供自動重連的協議，同時使用者斷線第一時間不應該就銷燬掉相關資料(這裡比較複雜，比如自動戰鬥是否要一直在伺服器掛著，以及其他的一些關聯操作)
4. 客戶端不重新整理遊戲，使用新介面重新連線伺服器，自動更新和同步相應的資料（比如同步怪物位置或者其他人物位置等等）

這種技術一般用於回合制之類的遊戲，一般不涉及戰鬥系統。如果arpg的話，只能短暫的時間內可以自動重連，不然的話變數太大。或者需要做一些變種，比如單純場景的怪物之類的重新整理下，但是世界boss之類的場景就得重新載入之類的特殊處理。

三、重新整理遊戲自動重連

我個人感覺這個是簡單粗暴又實用的做法。大部分遊戲都適合使用，只要一重新整理，遊戲的資料都沒了，全部重新開始，客戶端只需要根據標記來做一些自動化的操作，容易很多。，同時伺服器也不用更改，穩定也不容易出錯。唯一不好的就是使用者體驗會稍微差一些。

重連資料

字串資料：

//ip + 使用者標識 + 服id + 服名字  （資料根據自己專案情況）
 

var reload:string = ip + "#" + token + "#" + serverId + "#" +serverName;

//後面的reload字串都是這裡的內容

重連標識：

reload  //字串

注意：重新整理只能重新整理自己的頁面。（比如在iframe裡面的時候）

Location.replace重置url重連

這種比較簡單，也不會有什麼相容性的問題。就是重連的時候，把之前的登入使用者以及服務端地址給記錄起來
通過url來附帶引數，最後再實際使用中解析出來，通過判斷屬性是否過載，

Location 物件的replace()方法：用新的文件替換當前文件。
通過傳入新的url(其實是原url + 附帶重連資料)

location.replace(oldUrl + "reload#" + reload);

是必須走url，而且還需要和原來的引數進行相容處理。在遊戲遊戲中可能是這樣的url了：

http://localhost:63342/game/index.html?reload=1&host=ws://192.168.0.10:1050/ws&token=soda1&serverId=1&serverName=本地除錯

1. document.cookie
   

   cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。
   利用cookie的本地存放功能，也比較方便，但是會有些手機瀏覽器可能會無法讀取到。

document.cookie = "reload#" + reload;

1. 使用Html5的window.localStorage
   

   localStorage 屬性允許你訪問一個 local Storage 物件。localStorage 與 sessionStorage 相似。不同之處在於，儲存在 localStorage 裡面的資料沒有過期時間（expiration time），而儲存在 sessionStorage 裡面的資料會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。
   
   應該注意的是，無論是 localStorage 還是 sessionStorage 中儲存的資料都僅限於該頁面的協議。

window.localStorage.setItem("reload", reload);

var reload = window.localStorage.getItem("reload");

1. 使用Egret的本地儲存
   使用Egret會更方便，他進行了封裝，H5和打包成本地都可以支援。localStorage.ts

egret.localStorage介面
//儲存資料
export let getItem:(key:string)=>string;
//刪除資料
export let removeItem:(key:string)=>void;
//將所有資料清空
export let clear:()=>void;

Web實現類WebLocalStorage.ts

namespace egret.localStorage.web {
    function getItem(key:string):string {
        return window.localStorage.getItem(key);
    }
    function setItem(key:string, value:string):boolean {
        try{
            window.localStorage.setItem(key, value);
            return true;
        }
        catch(e){
            egret.$warn(1047, key, value);
            return false;
        }
    }
    function removeItem(key:string):void {
        window.localStorage.removeItem(key);
    }

    function clear():void {
        window.localStorage.clear();
    }

    localStorage.getItem = getItem;
    localStorage.setItem = setItem;
    localStorage.removeItem = removeItem;
    localStorage.clear = clear;
}

可以看到內部其實也是採用了window.localStorage來進行實現，同時做了一場處理，最後是通過localStorage介面進行賦值給外部呼叫。下面是實際使用方法：

//使用egret的本地存放方法做
egret.localStorage.setItem("reload",reload);

//遊戲中獲取

var reload:string = egret.localStorage.getItem("reload");

四、實際專案中處理重連機制

這裡的程式碼是重新整理之後重新進入遊戲，然後通過之前的資料（url或者本地快取）解析出相應的資料來進行判斷。

解析url

var reload:string = location.href;

本地快取獲取資料

var reload:string = egret.localStorage.getItem("reload");
console.info("reload資料:" + reload);
if(reload && reload != "")
{
    var cooks:string[] = reload.split("#");

    console.info("斷線重連重新整理過來的");
    this.session.isReload = true;
    this.session.host = cooks[0];
    this.session.token = cooks[1];
    this.session.serverId = Number(cooks[2]);
    this.session.serverName = cooks[3];
}

通過遊戲內的變數進行判斷處理

if(this.session.isReload)
{
    //開始自動重連，走額外的協議以及自動處理
}
else
{
    //走正常的流程
}

最後的總結

斷線重連這裡主要是講了一些思路以及實際專案中的應用。程式碼算是偽5程式碼了，讀者應該根據自己專案實際情況來設計，做一些相應變化，原理是一樣的。

我們有一個專案是有遇到過其中的一個問題，因為一開始沒有考慮自動重連的問題，在客戶端和伺服器都沒這裡的考慮。所以沒辦法做到不重新整理遊戲來進行重連（主要是成本太大，又是arpg遊戲），最終是選擇了遊戲自己重新整理來實現的機制的。當然也會遇到一些坑，比如接入一些平臺，只能重新整理自己的html，無法重新整理平臺的html（遊戲內嵌），導致平臺的sdk的問題（影響充值、關注等等）。不過最終都是有通過變通之類的進行解決了。