這篇文章主要介紹如何使用JavaScript實(shí)現(xiàn)HTML5游戲斷線自動(dòng)重連，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),上虞企業(yè)網(wǎng)站建設(shè),上虞品牌網(wǎng)站建設(shè),網(wǎng)站定制,上虞網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,上虞網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

一、斷線重連原理

原來(lái)其實(shí)很簡(jiǎn)單，就是在斷線的時(shí)候，根據(jù)用戶的點(diǎn)擊（有些時(shí)間短的就不用點(diǎn)擊，默認(rèn)是自動(dòng)重連回來(lái)），程序自動(dòng)識(shí)別，是要刷新重新進(jìn)入游戲還是幫用戶自動(dòng)重連。客戶端會(huì)根據(jù)自動(dòng)重連標(biāo)記，幫用戶自動(dòng)做事情。比如自動(dòng)登陸、選角色、進(jìn)入場(chǎng)景、請(qǐng)求同步后臺(tái)數(shù)據(jù)等等。

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

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

這種是比較難的，因?yàn)椴凰⑿掠螒颍敲磿?huì)因?yàn)橐欢螘r(shí)間的斷開(kāi)游戲，導(dǎo)致客戶端數(shù)據(jù)跟服務(wù)器數(shù)據(jù)不同步了。比如怪物的位置、獲得的獎(jiǎng)勵(lì)、進(jìn)度等等。這些需要一開(kāi)始就設(shè)計(jì)好，如果策劃在后期要求加這個(gè)，那幾乎是無(wú)法實(shí)現(xiàn)的，改動(dòng)太大了。所以假設(shè)要這么多，大概是類(lèi)似下面的做法。

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

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

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

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

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

三、刷新游戲自動(dòng)重連

我個(gè)人感覺(jué)這個(gè)是簡(jiǎn)單粗暴又實(shí)用的做法。大部分游戲都適合使用，只要一刷新，游戲的數(shù)據(jù)都沒(méi)了，全部重新開(kāi)始，客戶端只需要根據(jù)標(biāo)記來(lái)做一些自動(dòng)化的操作，容易很多。，同時(shí)服務(wù)器也不用更改，穩(wěn)定也不容易出錯(cuò)。唯一不好的就是用戶體驗(yàn)會(huì)稍微差一些。

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

字符串?dāng)?shù)據(jù)：

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

重連標(biāo)識(shí)：

reload //字符串

注意：刷新只能刷新自己的頁(yè)面。（比如在iframe里面的時(shí)候）

Location.replace重置url重連

這種比較簡(jiǎn)單，也不會(huì)有什么兼容性的問(wèn)題。就是重連的時(shí)候，把之前的登錄用戶以及服務(wù)端地址給記錄起來(lái)

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

Location 對(duì)象的replace()方法：用新的文檔替換當(dāng)前文檔。

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

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

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

地調(diào)試1

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

cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。

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

document.cookie = "reload#" + reload;

1.使用Html5的window.localStorage

localStorage 屬性允許你訪問(wèn)一個(gè) local Storage 對(duì)象。localStorage 與 sessionStorage 相似。不同之處在于，存儲(chǔ)在 localStorage 里面的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間（expiration time），而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話（browsing session）結(jié)束時(shí)被清除，即瀏覽器關(guān)閉時(shí)。

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

既然是H5游戲，當(dāng)然重點(diǎn)是使用這個(gè)了，先看下localStorage的API
。

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

讀取：

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

1.使用Egret的本地保存

使用Egret會(huì)更方便，他進(jìn)行了封裝，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實(shí)現(xiàn)類(lèi)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)部其實(shí)也是采用了window.localStorage來(lái)進(jìn)行實(shí)現(xiàn)，同時(shí)做了一場(chǎng)處理，最后是通過(guò)localStorage接口進(jìn)行賦值給外部調(diào)用。下面是實(shí)際使用方法：

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

四、實(shí)際項(xiàng)目中處理重連機(jī)制

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

解析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("斷線重連刷新過(guò)來(lái)的");
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];
}

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

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

最后的總結(jié)

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

我們有一個(gè)項(xiàng)目是有遇到過(guò)其中的一個(gè)問(wèn)題，因?yàn)橐婚_(kāi)始沒(méi)有考慮自動(dòng)重連的問(wèn)題，在客戶端和服務(wù)器都沒(méi)這里的考慮。所以沒(méi)辦法做到不刷新游戲來(lái)進(jìn)行重連（主要是成本太大，又是arpg游戲），最終是選擇了游戲自己刷新來(lái)實(shí)現(xiàn)的機(jī)制的。當(dāng)然也會(huì)遇到一些坑，比如接入一些平臺(tái)，只能刷新自己的html，無(wú)法刷新平臺(tái)的html（游戲內(nèi)嵌），導(dǎo)致平臺(tái)的sdk的問(wèn)題（影響充值、關(guān)注等等）。不過(guò)最終都是有通過(guò)變通之類(lèi)的進(jìn)行解決了。

以上是“如何使用JavaScript實(shí)現(xiàn)HTML5游戲斷線自動(dòng)重連”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：如何使用JavaScript實(shí)現(xiàn)HTML5游戲斷線自動(dòng)重連
本文鏈接：http://www.chinadenli.net/article6/iigoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)