首頁 > 文章 > web前端 > JavaScript實作HTML5遊戲斷線自動重連

JavaScript實作HTML5遊戲斷線自動重連

小云云原創: 2018-02-09 13:51:031713瀏覽

斷線重連的需求一線重連原理二遊戲內自動重連不刷新三刷新遊戲自動重連重連數據Locationreplace重置url重連四實際項目中處理重連機制最後的總結斷線重連的需求，尤其是手機上，會因為網路的不穩定或其他原因，導致用戶的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了：

地調試1

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

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 中保存的資料都僅限於該頁面的協定。

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

。

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的问题（影响充值、关注等等）。不过最终都是有通过变通之类的进行解决了。

JavaScript實作HTML5遊戲斷線自動重連

相關文章