斷線重連的需求一斷線重連原理二游戲內(nèi)自動重連不刷新三刷新游戲自動重連重連數(shù)據(jù)Locationreplace重置url重連四實際項目中處理重連機制最后的總結斷線重連的需求

尤其是手機上，會因為網(wǎng)絡的不穩(wěn)定或者其他原因，導致用戶的socket鏈接斷開。這個時候如果直接讓玩家退出游戲，重新登錄，無疑是非常影響用戶體驗的事情。所以根據(jù)這個需求，就有需要程序來實現(xiàn)斷線后自動重連回去的技術，是用戶能夠再次快速開始游戲進行戰(zhàn)斗。

一、斷線重連原理

原來其實很簡單，就是在斷線的時候，根據(jù)用戶的點擊（有些時間短的就不用點擊，默認是自動重連回來），程序自動識別，是要刷新重新進入游戲還是幫用戶自動重連?？蛻舳藭鶕?jù)自動重連標記，幫用戶自動做事情。比如自動登陸、選角色、進入場景、請求同步后臺數(shù)據(jù)等等。

根據(jù)實現(xiàn)機制，大致可以分兩種實現(xiàn)方法。主要是游戲內(nèi)自動重連（不刷新）和刷新游戲自動重連，后面會詳細講兩種實現(xiàn)機制，以及相關的利弊。

二、游戲內(nèi)自動重連（不刷新）

這種是比較難的，因為不刷新游戲，那么會因為一段時間的斷開游戲，導致客戶端數(shù)據(jù)跟服務器數(shù)據(jù)不同步了。比如怪物的位置、獲得的獎勵、進度等等。這些需要一開始就設計好，如果策劃在后期要求加這個，那幾乎是無法實現(xiàn)的，改動太大了。所以假設要這么多，大概是類似下面的做法。（如果真要詳細，得一篇新的Blog了:）

1. 客戶端和服務端協(xié)定好那些數(shù)據(jù)需要客戶端自己同步

2. 斷線多久內(nèi)可以自動重連（策劃以及技術上的實現(xiàn)來互相評估）

3. 服務端提供自動重連的協(xié)議，同時用戶斷線第一時間不應該就銷毀掉相關數(shù)據(jù)(這里比較復雜，比如自動戰(zhàn)斗是否要一直在服務器掛著，以及其他的一些關聯(lián)操作)

4. 客戶端不刷新游戲，使用新接口重新連接服務器，自動更新和同步相應的數(shù)據(jù)（比如同步怪物位置或者其他人物位置等等）

這種技術一般用于回合制之類的游戲，一般不涉及戰(zhàn)斗系統(tǒng)。如果arpg的話，只能短暫的時間內(nèi)可以自動重連，不然的話變數(shù)太大。或者需要做一些變種，比如單純場景的怪物之類的刷新下，但是世界boss之類的場景就得重新載入之類的特殊處理。

三、刷新游戲自動重連

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

重連數(shù)據(jù)

字符串數(shù)據(jù)：

//ip + 用戶標識 + 服id + 服名字 （數(shù)據(jù)根據(jù)自己項目情況）
var reload:string = ip + "#" + token + "#" + serverId + "#" +serverName;
//后面的reload字符串都是這里的內(nèi)容

重連標識：

reload //字符串

注意：刷新只能刷新自己的頁面。（比如在iframe里面的時候）

Location.replace重置url重連

這種比較簡單，也不會有什么兼容性的問題。就是重連的時候，把之前的登錄用戶以及服務端地址給記錄起來

通過url來附帶參數(shù)，最后再實際使用中解析出來，通過判斷屬性是否重載，

Location 對象的replace()方法：用新的文檔替換當前文檔。

通過傳入新的url(其實是原url + 附帶重連數(shù)據(jù))

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

是必須走url，而且還需要和原來的參數(shù)進行兼容處理。在游戲游戲中可能是這樣的url了：

地調(diào)試1

http://localhost:63342/game/index.html?reload=1&host=ws://192.168.0.10:1050/ws&token

cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個 cookie。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值。

利用cookie的本地存放功能，也比較方便，但是會有些手機瀏覽器可能會無法讀取到。

document.cookie = "reload#" + reload;

1.使用Html5的window.localStorage

localStorage 屬性允許你訪問一個 local Storage 對象。localStorage 與 sessionStorage 相似。不同之處在于，存儲在 localStorage 里面的數(shù)據(jù)沒有過期時間（expiration time），而存儲在 sessionStorage 里面的數(shù)據(jù)會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。

應該注意的是，無論是 localStorage 還是 sessionStorage 中保存的數(shù)據(jù)都僅限于該頁面的協(xié)議。

既然是H5游戲，當然重點是使用這個了，先看下localStorage的API
。

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

讀?。?/p>

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

1.使用Egret的本地保存

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

egret.localStorage接口
//保存數(shù)據(jù)
export let getItem:(key:string)=>string;
//刪除數(shù)據(jù)
export let removeItem:(key:string)=>void;
//將所有數(shù)據(jù)清空
export let clear:()=>void;
Web實現(xiàn)類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;
}

可以看到內(nèi)部其實也是采用了window.localStorage來進行實現(xiàn)，同時做了一場處理，最后是通過localStorage接口進行賦值給外部調(diào)用。下面是實際使用方法：

//使用egret的本地存放方法做
egret.localStorage.setItem("reload",reload);
//游戲中獲取
var reload:string = egret.localStorage.getItem("reload");

四、實際項目中處理重連機制

這里的代碼是刷新之后重新進入游戲，然后通過之前的數(shù)據(jù)（url或者本地緩存）解析出相應的數(shù)據(jù)來進行判斷。

解析url

var reload:string = location.href;

本地緩存獲取數(shù)據(jù)

var reload:string = egret.localStorage.getItem("reload");
console.info("reload數(shù)據(jù):" + 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];
}

通過游戲內(nèi)的變量進行判斷處理

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

最后的總結

斷線重連這里主要是講了一些思路以及實際項目中的應用。代碼算是偽5代碼了，讀者應該根據(jù)自己項目實際情況來設計，做一些相應變化，原理是一樣的。

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

以上所述是小編給大家介紹的JavaScript實現(xiàn)HTML5游戲斷線自動重連的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！