JavaScript는 HTML5 게임 연결 끊김의 자동 재접속을 실현합니다.

연결 끊김 및 재연결 요구 사항 1. 연결 끊김 및 재연결 원리 2. 새로 고침 없이 게임 내 자동 재연결 3. 게임 자동 새로 고침 데이터 재연결 및 재연결 Locationreplace 재설정 URL 및 재연결 4. 실제 프로젝트에서 재연결 메커니즘 처리 연결 끊김 및 재연결 최종 요약 재연결 특히 휴대폰에서 연결 요구로 인해 네트워크 불안정이나 기타 이유로 인해 사용자의 소켓 링크 연결이 끊어질 수 있습니다. 이때 플레이어에게 게임을 종료하고 다시 로그인하라는 메시지가 직접적으로 표시되면 의심할 여지 없이 사용자 경험에 큰 영향을 미칠 것입니다. 따라서 이러한 요구에 따라 연결이 끊긴 후 자동으로 다시 연결되는 기술을 구현하여 사용자가 빠르게 게임을 시작하고 다시 싸울 수 있도록 하는 프로그램이 필요합니다.

1. 연결 끊김 및 재연결 원리

사용자의 클릭에 따라 연결이 끊어지는 경우는 실제로 매우 간단합니다. (일부 시간은 짧으며 클릭할 필요가 없으며 기본값은 자동으로 다시 연결됨) 게임을 새로 고치고 다시 시작하면 사용자가 자동으로 다시 연결하는 데 도움이 됩니다. 클라이언트는 자동 재연결 표시를 기반으로 사용자를 위해 자동으로 작업을 수행합니다. 예를 들어 자동 로그인, 캐릭터 선택, 장면 입력, 배경 데이터 동기화 요청 등이 가능합니다.

구현 메커니즘에 따라 크게 두 가지 구현 방법으로 나눌 수 있습니다. 주요한 것은 게임 내 자동 재접속(새로 고침 없이)과 게임 새로 고침 후 자동 재접속입니다. 두 가지 구현 메커니즘은 관련 장단점과 함께 나중에 자세히 설명하겠습니다.

2. 게임 내 자동 재접속(새로 고침 없음)

게임을 새로 고치지 않으면 게임 연결이 한동안 끊어져 클라이언트 데이터가 서버 데이터와 동기화되지 않기 때문에 이것이 더 어렵습니다. 기간. 예를 들어, 몬스터의 위치, 획득한 보상, 진행 상황 등이 있습니다. 이는 처음부터 설계해야 하며, 나중에 계획자가 추가해야 하는 경우 변경 사항이 너무 크기 때문에 달성하기가 거의 불가능합니다. 그래서 이렇게 많다고 가정하면 아마도 다음 방법과 비슷할 것입니다. (자세한 내용을 원하시면 새 블로그를 작성하겠습니다 :)

1. 클라이언트 자체에서 어떤 데이터를 동기화해야 하는지에 대해 클라이언트와 서버가 합의했습니다

2. 자동으로 다시 연결됩니다(서로를 평가하기 위한 계획 및 기술 측면 구현)

3. 서버는 자동 다시 연결 프로토콜을 제공합니다. 동시에 사용자가 연결을 끊는 즉시 관련 데이터가 삭제되어서는 안 됩니다. (여기서는 더 복잡합니다.) , 자동 전투를 항상 서버에서 중단해야 하는지 여부 및 기타 관련 작업)

4. 클라이언트는 게임을 새로 고치지 않고 새 인터페이스를 사용하여 서버에 다시 연결하고 해당 항목을 자동으로 업데이트하고 동기화합니다. 데이터(예: 몬스터나 다른 캐릭터의 위치 동기화 등)

이 기술은 일반적으로 사용됩니다. 턴제 게임과 같은 게임에는 일반적으로 전투 시스템이 포함되지 않습니다. arpg를 사용하는 경우 짧은 시간 내에만 자동으로 다시 연결할 수 있습니다. 그렇지 않으면 변수가 너무 커집니다. 또는 단순한 장면에서 몬스터를 상쾌하게 만드는 등 약간의 변형이 필요하지만 월드 보스와 같은 장면을 다시 로드하는 등 특별한 처리가 필요합니다.

3. 게임을 새로고침하고 자동으로 다시 연결

개인적으로는 이것이 간단하고 투박하며 실용적인 방법이라고 생각합니다. 대부분의 게임은 사용하기에 적합합니다. 새로 고치면 게임 데이터가 손실되고 모든 것이 다시 시작됩니다. 클라이언트는 표시를 기반으로 몇 가지 자동화된 작업만 수행하면 됩니다. , 동시에 서버를 변경할 필요가 없으며 안정적이고 오류가 발생하기 쉽습니다. 유일한 나쁜 점은 사용자 경험이 약간 더 나빠질 것이라는 것입니다.

재연결 데이터

문자열 데이터:

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

재연결 식별:

reload //문자열

참고: 새로 고침은 자체 페이지만 새로 고칠 수 있습니다. (예를 들어 iframe 내부의 경우)

Location.replace URL 재설정 후 다시 연결

이는 비교적 간단하며 호환성 문제가 없습니다. 재접속 시 이전에 로그인한 사용자와 서버 주소를 기록해두세요

URL을 통해 매개변수를 추가하고 최종적으로 실제 사용 시 파싱하여 속성이 오버로드되었는지 확인합니다.

Location 객체의 replacement() 메소드: 현재 문서를 새 문서로 바꿉니다.

새 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 방문자의 컴퓨터에 저장된 변수입니다. 이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송됩니다. JavaScript를 사용하여 쿠키 값을 생성하고 검색할 수 있습니다.

쿠키의 로컬 저장 기능을 사용하는 것이 더 편리하지만, 일부 모바일 브라우저에서는 쿠키를 읽지 못할 수도 있습니다.

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

相关推荐：

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

위 내용은 JavaScript는 HTML5 게임 연결 끊김의 자동 재접속을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!