HTML5ゲーム切断時の自動再接続をJavaScriptで実現-jsチュートリアル-php.cn

切断と再接続の要件 1. 切断と再接続の原則 2. 更新せずにゲーム内で自動的に再接続 3. ゲームを更新すると自動的に再接続とデータの再接続 Locationreplace リセット URL と再接続 4. 実際のプロジェクトでの再接続メカニズムの処理切断と再接続の最終的なまとめ再接続特に携帯電話での接続要求により、ネットワークの不安定またはその他の理由により、ユーザーのソケットリンクが切断される可能性があります。このとき、プレイヤーにゲームを終了して再度ログインするよう直接求められると、ユーザーエクスペリエンスに大きな影響を与えることは間違いありません。したがって、この要求に応じて、ユーザーが迅速にゲームを開始して再び戦闘できるように、切断後に自動的に再接続する技術を実現するプログラムが必要とされています。

1. 切断と再接続の原理

接続が切断されるときは、ユーザーのクリックに応じて (時間が短いため、クリックする必要がなく、デフォルトでは自動的に再接続します)。ゲームを更新して再入力すると、ユーザーは自動的に再接続します。クライアントは、自動再接続マークに基づいて、ユーザーに代わって自動的に処理を実行します。たとえば、自動的にログインし、キャラクターを選択し、シーンに入り、背景データの同期を要求するなどです。

実装の仕組みによれば、大きく2つの実装方法に分けられます。主なものは、ゲーム内の自動再接続 (リフレッシュなし) とゲームのリフレッシュ後の自動再接続であり、これら 2 つの実装メカニズムと、関連する長所と短所については後で詳しく説明します。

2. ゲーム内の自動再接続 (更新なし)

ゲームを更新しないと、ゲームがしばらく切断されるため、クライアントデータがサーバーデータと同期されなくなるため、これはより困難です。期間。例えば、モンスターの位置、獲得報酬、進捗状況などです。これらは最初から設計する必要があり、プランナーが後の段階でこれを追加する必要がある場合、変更が大きすぎるため、それを実現することはほとんど不可能になります。これだけたくさんあると仮定すると、おそらく次のような方法になると思います。 (本当に詳細が必要な場合は、新しいブログを書きます:)

1. クライアントとサーバーは、クライアント自身がどのデータを同期する必要があるかについて合意しました

2.自動的に再接続される (計画および技術的側面で相互に評価するための実装)

3. サーバーは自動再接続プロトコルを提供すると同時に、ユーザーが切断するとすぐに関連データが破棄されるべきではありません (ここではさらに複雑になります)。

4. クライアントはゲームを更新せず、新しいインターフェイスを使用してサーバーに再接続し、対応するインターフェイスを自動的に更新して同期します。データ (モンスターや他のキャラクターの位置の同期など)

このテクノロジーは一般的に使用されます。ターンベースゲームなどのゲームには、通常、戦闘システムが含まれません。 arpg を使用する場合、自動的に再接続できるのは短時間内だけであり、そうでない場合は変数が大きくなりすぎます。または、単純なシーンではモンスターを更新しますが、ワールドボスなどのシーンをリロードするなどの特殊な処理を行うなど、いくつかのバリエーションを作成する必要があります。

3. ゲームを更新し、自動的に再接続します

これは個人的にはシンプルで大雑把で実用的な方法だと思います。ほとんどのゲームは、更新するとゲームデータが失われ、クライアントはマークに基づいていくつかの自動操作を実行するだけで済みます。これは非常に簡単です。、同時に、サーバーを変更する必要がなく、安定していてエラーが発生しやすくなります。唯一の欠点は、ユーザーエクスペリエンスが若干悪くなるということです。

再接続データ

文字列データ:

//ip + 用户标识 + 服id + 服名字 （数据根据自己项目情况）
var reload:string = ip + "#" + token + "#" + serverId + "#" +serverName;
//后面的reload字符串都是这里的内容

ログイン後にコピー

再接続識別:

reload //String

注: 更新はそれ自体のページのみを更新できます。 (例: iframe 内の場合)

Location.replace リセット URL と再接続

これは比較的簡単で、互換性の問題はありません。つまり、再接続するときに、以前にログインしていたユーザーとサーバーのアドレスを記録します

URL を通じてパラメーターを追加し、最終的に実際の使用時にそれらを解析して、属性がオーバーロードされているかどうかを判断します。

場所オブジェクト : 現在のドキュメントを新しいドキュメントに置き換えます。

新しい URL (実際には元の URL + 添付された再接続データ) を渡すことにより、

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

ログイン後にコピー

はその URL を使用する必要があり、元のパラメーターと互換性がある必要もあります。ゲームでは、次のような URL になる可能性があります:

Debug 1

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

cookie訪問者のコンピュータに保存される変数です。この Cookie は、同じコンピュータがブラウザを通じてページを要求するたびに送信されます。 JavaScript を使用して Cookie 値を作成および取得できます。

Cookieのローカルストレージ機能を利用するのも便利ですが、一部のモバイルブラウザではCookieを読み取れない場合があります。

document.cookie = "reload#" + reload;

ログイン後にコピー

1. Html5 の window.localStorage

localStorage プロパティを使用すると、ローカル Storage オブジェクトにアクセスできます。 localStorage は sessionStorage に似ています。違いは、localStorage に保存されたデータには有効期限がないのに対し、sessionStorage に保存されたデータはブラウザセッション (ブラウジングセッション) の終了時、つまりブラウザが閉じられたときにクリアされることです。

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