JavaScript realisiert die automatische Wiederherstellung der Verbindung nach der Trennung von HTML5-Spielen

Anforderungen für das Trennen und erneute Verbinden 1. Prinzip des Trennens und erneuten Verbindens 2. Automatisches erneutes Verbinden im Spiel ohne Aktualisierung 3. Aktualisieren des Spiels, automatisches erneutes Verbinden und erneutes Verbinden von Daten, Standortersetzen, Zurücksetzen der URL und erneutes Verbinden 4. Die abschließende Zusammenfassung des tatsächlichen Wiederverbindungsmechanismus Projekte Die Notwendigkeit einer erneuten Verbindung der Leitung, insbesondere bei Mobiltelefonen, kann dazu führen, dass die Socket-Verbindung des Benutzers aufgrund von Netzwerkinstabilität oder aus anderen Gründen getrennt wird. Wenn der Spieler zu diesem Zeitpunkt direkt aufgefordert wird, das Spiel zu verlassen und sich erneut anzumelden, wird dies zweifellos große Auswirkungen auf das Benutzererlebnis haben. Daher besteht entsprechend dieser Nachfrage ein Bedarf an Programmen, die die Technologie der automatischen Wiederherstellung der Verbindung nach dem Trennen der Verbindung realisieren, damit Benutzer das Spiel schnell starten und erneut kämpfen können.

1. Prinzip der Trennung und Wiederverbindung

Es stellt sich heraus, dass es sehr einfach ist, die Verbindung zu trennen, je nach Klick des Benutzers (einige Zeit ist knapp, es besteht keine Notwendigkeit). Klicken Sie darauf, die Standardeinstellung ist die automatische Wiederherstellung der Verbindung) ), erkennt das Programm automatisch, ob das Spiel aktualisiert und erneut betreten werden soll oder ob es dem Benutzer helfen soll, die Verbindung automatisch wiederherzustellen. Der Client erledigt automatisch Dinge für den Benutzer, basierend auf der automatischen Wiederverbindungsmarkierung. Melden Sie sich beispielsweise automatisch an, wählen Sie einen Charakter aus, geben Sie eine Szene ein, fordern Sie die Synchronisierung von Hintergrunddaten an usw.

Je nach Implementierungsmechanismus kann er grob in zwei Implementierungsmethoden unterteilt werden. Die wichtigsten sind die automatische Wiederverbindung im Spiel (ohne Aktualisierung) und die automatische Wiederverbindung nach der Aktualisierung des Spiels. Die beiden Implementierungsmechanismen sowie die damit verbundenen Vor- und Nachteile werden später ausführlich besprochen.

2. Automatische Wiederverbindung im Spiel (ohne Aktualisierung)

Dies ist schwieriger, denn wenn Sie das Spiel nicht aktualisieren, wird die Verbindung für einen bestimmten Zeitraum unterbrochen, was dazu führt, dass das Spiel nicht aktualisiert wird Clientdaten gehen verloren. Serverdaten sind nicht synchron. Zum Beispiel der Standort von Monstern, erhaltene Belohnungen, Fortschritt usw. Diese müssen von Anfang an entworfen werden, wenn der Planer dies zu einem späteren Zeitpunkt verlangt, wird dies fast unmöglich sein, da die Änderungen zu groß sein werden. Unter der Annahme, dass es so viele gibt, ähnelt es wahrscheinlich der folgenden Methode. (Wenn Sie wirklich Details wünschen, werde ich einen neuen Blog schreiben:)

1 Der Client und der Server haben vereinbart, welche Daten vom Client selbst synchronisiert werden müssen

2 Dauert es, die Verbindung zu trennen? Automatische Wiederverbindung (Planung und technische Umsetzung, um sich gegenseitig auszuwerten)

3. Der Server stellt ein automatisches Wiederverbindungsprotokoll bereit, und gleichzeitig sollten die relevanten Daten nicht zerstört werden Der Benutzer trennt die Verbindung (dies ist komplizierter, z. B. ob der automatische Kampf immer auf dem Server hängen bleiben soll und einige andere damit verbundene Vorgänge)

4. Der Client aktualisiert das Spiel nicht, sondern verwendet die neue Benutzeroberfläche um die Verbindung zum Server wiederherzustellen und die entsprechenden Daten automatisch zu aktualisieren und zu synchronisieren (z. B. den Standort von Monstern oder anderen Charakterpositionen usw. zu synchronisieren).

Diese Technologie wird im Allgemeinen in rundenbasierten Spielen verwendet und umfasst im Allgemeinen keine Kampfsystem. Wenn Arpg verwendet wird, kann die Verbindung nur innerhalb kurzer Zeit automatisch wiederhergestellt werden, da sonst die Variablen zu groß werden. Oder es müssen einige Variationen vorgenommen werden, z. B. das Auffrischen von Monstern in einfachen Szenen, aber spezielle Verarbeitungen wie das Nachladen von Szenen wie Weltbossen.

3. Aktualisieren Sie das Spiel und stellen Sie die Verbindung automatisch wieder her

Ich persönlich denke, dass dies eine einfache, grobe und praktische Methode ist. Die meisten Spiele sind für die Verwendung geeignet, solange Sie sie aktualisieren, gehen die Spieldaten verloren und alles beginnt erneut. Der Client muss nur einige automatisierte Vorgänge basierend auf den Markierungen ausführen, was viel einfacher ist. Gleichzeitig muss der Server nicht geändert werden und ist stabil und fehleranfällig. Das einzig Schlechte ist, dass die Benutzererfahrung etwas schlechter sein wird.

Wiederverbindungsdaten

String-Daten:

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

Wiederverbindungskennung:

reload //String

Hinweis: Nur Aktualisieren möglich seine eigene Seite aktualisieren. (Zum Beispiel innerhalb eines Iframes)

Location.replace URL zurücksetzen und erneut verbinden

Dies ist relativ einfach und es treten keine Kompatibilitätsprobleme auf. Das heißt, zeichnen Sie beim erneuten Herstellen der Verbindung den zuvor angemeldeten Benutzer und die Serveradresse auf

Fügen Sie Parameter über die URL hinzu und analysieren Sie sie schließlich bei der tatsächlichen Verwendung und beurteilen Sie, ob die Attribute überlastet sind,

Die Methode replace() des Location-Objekts: Ersetzt das aktuelle Dokument durch ein neues Dokument.

Durch Übergabe einer neuen URL (eigentlich die ursprüngliche URL + angehängte Wiederverbindungsdaten)

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

Die URL muss verwendet werden und außerdem mit den ursprünglichen Parametern kompatibel sein. Im Spiel kann es sich um eine URL wie diese handeln:

Lokales Debuggen 1

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

Ein Cookie ist eine Variable, die auf dem Computer des Besuchers gespeichert wird. Dieses Cookie wird jedes Mal gesendet, wenn derselbe Computer eine Seite über einen Browser anfordert. Sie können JavaScript verwenden, um Cookie-Werte zu erstellen und abzurufen.

Es ist auch bequemer, die lokale Speicherfunktion von Cookies zu verwenden, aber einige mobile Browser können diese möglicherweise nicht lesen.

document.cookie = "reload#" + reload;

1. Mit dem window.localStorage

localStorage-Attribut von Html5 können Sie auf ein lokales Speicherobjekt zugreifen. localStorage ähnelt sessionStorage. Der Unterschied besteht darin, dass die in localStorage gespeicherten Daten keine Ablaufzeit haben, während die in sessionStorage gespeicherten Daten am Ende der Browsersitzung (Browsersitzung), also beim Schließen des Browsers, gelöscht werden.

Es ist zu beachten, dass die in localStorage oder sessionStorage gespeicherten Daten auf das Protokoll der Seite beschränkt sind.

Da es sich um ein H5-Spiel handelt, liegt der Fokus natürlich auf der Verwendung. Werfen wir zunächst einen Blick auf die localStorage-API
.

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

Lesen Sie:

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

1. Verwenden Sie Egret, um lokal zu speichern

Es ist bequemer, Egret zu verwenden, H5 und lokal verpackt . Alle können unterstützt werden. 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的问题（影响充值、关注等等）。不过最终都是有通过变通之类的进行解决了。

相关推荐：

PHP连接MySql闪断自动重连的方法_MySQL

Das obige ist der detaillierte Inhalt vonJavaScript realisiert die automatische Wiederherstellung der Verbindung nach der Trennung von HTML5-Spielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!