JavaScript实现HTML5游戏断线自动重连的方法

断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求

尤其是手机上，会因为网络的不稳定或者其他原因，导致用户的socket链接断开。这个时候如果直接让玩家退出游戏，重新登录，无疑是非常影响用户体验的事情。所以根据这个需求，就有需要程序来实现断线后自动重连回去的技术，是用户能够再次快速开始游戏进行战斗。

一、断线重连原理

原来其实很简单，就是在断线的时候，根据用户的点击（有些时间短的就不用点击，默认是自动重连回来），程序自动识别，是要刷新重新进入游戏还是帮用户自动重连。客户端会根据自动重连标记，帮用户自动做事情。比如自动登陆、选角色、进入场景、请求同步后台数据等等。

根据实现机制，大致可以分两种实现方法。主要是游戏内自动重连（不刷新）和刷新游戏自动重连，后面会详细讲两种实现机制，以及相关的利弊。

二、游戏内自动重连（不刷新）

这种是比较难的，因为不刷新游戏，那么会因为一段时间的断开游戏，导致客户端数据跟服务器数据不同步了。比如怪物的位置、获得的奖励、进度等等。这些需要一开始就设计好，如果策划在后期要求加这个，那几乎是无法实现的，改动太大了。所以假设要这么多，大概是类似下面的做法。（如果真要详细，得一篇新的Blog了:）

1. 客户端和服务端协定好那些数据需要客户端自己同步

2. 断线多久内可以自动重连（策划以及技术上的实现来互相评估）

3. 服务端提供自动重连的协议，同时用户断线第一时间不应该就销毁掉相关数据(这里比较复杂，比如自动战斗是否要一直在服务器挂着，以及其他的一些关联操作)

4. 客户端不刷新游戏，使用新接口重新连接服务器，自动更新和同步相应的数据（比如同步怪物位置或者其他人物位置等等）

这种技术一般用于回合制之类的游戏，一般不涉及战斗系统。如果arpg的话，只能短暂的时间内可以自动重连，不然的话变数太大。或者需要做一些变种，比如单纯场景的怪物之类的刷新下，但是世界boss之类的场景就得重新载入之类的特殊处理。

三、刷新游戏自动重连

我个人感觉这个是简单粗暴又实用的做法。大部分游戏都适合使用，只要一刷新，游戏的数据都没了，全部重新开始，客户端只需要根据标记来做一些自动化的操作，容易很多。，同时服务器也不用更改，稳定也不容易出错。唯一不好的就是用户体验会稍微差一些。

重连数据

字符串数据：

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