JavaScript implémente la reconnexion automatique des jeux HTML5 après déconnexion

Conditions requises pour la déconnexion et la reconnexion 1. Principe de déconnexion et de reconnexion 2. Reconnexion automatique dans le jeu sans actualisation 3. Actualisation du jeu reconnexion et reconnexion automatique des données Emplacement, remplacement de l'URL de réinitialisation et reconnexion 4. Le résumé final du mécanisme de reconnexion en cours projets La nécessité de reconnecter la ligne, en particulier sur les téléphones mobiles, peut entraîner la déconnexion de la liaison socket de l'utilisateur en raison de l'instabilité du réseau ou d'autres raisons. À l'heure actuelle, si le joueur est directement invité à quitter le jeu et à se reconnecter, cela affectera sans aucun doute grandement l'expérience utilisateur. Par conséquent, selon cette demande, il est nécessaire que les programmes mettent en œuvre la technologie de reconnexion automatique après déconnexion, afin que les utilisateurs puissent rapidement démarrer le jeu et se battre à nouveau.

1. Principe de déconnexion et de reconnexion

Il s'avère que c'est très simple lorsque la connexion est déconnectée, selon le clic de l'utilisateur (un certain temps est court, il n'est pas nécessaire de le faire). cliquez, la valeur par défaut est de se reconnecter automatiquement) ), le programme identifie automatiquement s'il doit actualiser et réintégrer le jeu ou aider l'utilisateur à se reconnecter automatiquement. Le client fera automatiquement les choses pour l'utilisateur en fonction de la marque de reconnexion automatique. Par exemple, connectez-vous automatiquement, sélectionnez un personnage, entrez dans une scène, demandez la synchronisation des données d'arrière-plan, etc.

Selon le mécanisme de mise en œuvre, il peut être grossièrement divisé en deux méthodes de mise en œuvre. Les principaux sont la reconnexion automatique dans le jeu (sans rafraîchissement) et la reconnexion automatique après rafraîchissement du jeu. Les deux mécanismes de mise en œuvre seront abordés en détail plus tard, ainsi que les avantages et les inconvénients associés.

2. Reconnexion automatique dans le jeu (sans rafraîchissement)

C'est plus difficile car si vous ne rafraîchissez pas le jeu, le jeu sera déconnecté pendant un certain temps, provoquant le les données du client sont perdues. Les données du serveur sont désynchronisées. Par exemple, la localisation des monstres, les récompenses obtenues, la progression, etc. Ceux-ci doivent être conçus dès le début. Si le planificateur exige de les ajouter ultérieurement, cela sera presque impossible à réaliser car les changements seront trop importants. Donc, en supposant qu’il y en ait autant, cela ressemble probablement à la méthode suivante. (Si vous voulez vraiment des détails, j'écrirai un nouveau blog :)

1 Le client et le serveur se sont mis d'accord sur les données qui doivent être synchronisées par le client lui-même

2. faut-il se déconnecter ? Reconnexion automatique (planification et mise en œuvre technique pour s'évaluer mutuellement)

3. Le serveur fournit un protocole de reconnexion automatique, et en même temps, les données pertinentes ne doivent pas être détruites dès que possible. l'utilisateur se déconnecte (c'est plus compliqué, par exemple, si la bataille automatique doit toujours être suspendue sur le serveur, et certaines autres opérations associées)

4. Le client ne rafraîchit pas le jeu, utilise la nouvelle interface pour se reconnecter au serveur, et met à jour et synchronise automatiquement les données correspondantes (telles que la synchronisation de la position des monstres ou d'autres positions des personnages, etc.)

Cette technologie est généralement utilisée dans les jeux au tour par tour et n'implique généralement pas un système de combat. Si arpg est utilisé, il ne peut se reconnecter automatiquement que dans un court laps de temps, sinon les variables seront trop importantes. Ou certaines variantes doivent être apportées, comme le rafraîchissement des monstres dans des scènes simples, mais un traitement spécial tel que le rechargement des scènes comme les boss du monde.

3. Actualisez le jeu et reconnectez-vous automatiquement

Je pense personnellement que c'est une méthode simple, grossière et pratique. La plupart des jeux peuvent être utilisés. Tant que vous actualisez, les données du jeu seront perdues et tout recommencera. Le client n'aura qu'à effectuer quelques opérations automatisées basées sur les marques, ce qui est beaucoup plus simple. , et en même temps, le serveur n'a pas besoin d'être modifié, et il est stable et sujet aux erreurs. Le seul inconvénient est que l'expérience utilisateur sera légèrement pire.

Données de reconnexion

Données de chaîne :

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

Identifiant de reconnexion :

reload //String

Remarque : L'actualisation ne peut que actualiser sa propre page. (Par exemple, à l'intérieur d'une iframe)

Location.replace réinitialiser l'url et se reconnecter

C'est relativement simple et il n'y aura aucun problème de compatibilité. Autrement dit, lors de la reconnexion, enregistrez l'adresse de l'utilisateur et du serveur précédemment connecté

Ajoutez des paramètres via l'URL, et enfin analysez-les en utilisation réelle, et jugez si les attributs sont surchargés,

La méthode replace() de l'objet Location : remplace le document courant par un nouveau document.

En passant une nouvelle url (en fait l'url d'origine + les données de reconnexion jointes)

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

L'url doit être utilisée, et elle doit également être compatible avec les paramètres d'origine. Dans le jeu, il peut s'agir d'une URL comme celle-ci :

Débogage local 1

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

Un cookie est une variable stockée sur l'ordinateur du visiteur. Ce cookie est envoyé chaque fois que le même ordinateur demande une page via un navigateur. Vous pouvez utiliser JavaScript pour créer et récupérer des valeurs de cookies.

Il est également plus pratique d'utiliser la fonction de stockage local des cookies, mais certains navigateurs mobiles peuvent ne pas pouvoir la lire.

document.cookie = "reload#" + reload;

1. Utilisez l'attribut window.localStorage

localStorage de Html5 qui vous permet d'accéder à un objet de stockage local. localStorage est similaire à sessionStorage. La différence est que les données stockées dans localStorage n'ont pas de délai d'expiration, tandis que les données stockées dans sessionStorage seront effacées à la fin de la session du navigateur (session de navigation), c'est-à-dire à la fermeture du navigateur.

Il convient de noter que les données enregistrées dans localStorage ou sessionStorage sont limitées au protocole de la page.

Comme il s'agit d'un jeu H5, bien sûr, l'accent est mis sur son utilisation. Jetons d'abord un coup d'œil à l'API localStorage
.

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

Lire :

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

1. Utilisez Egret pour enregistrer localement

Il sera plus pratique d'utiliser Egret Il est encapsulé, H5 et emballé localement. . Tout peut être pris en charge. 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!