### 0、前言
我们先来想一个场景，我们进入`index.php`客户端页面这时候是正常上线了，也与服务端握手成功。
突然，外面网线被人挖断了，3分钟后恢复网络，这时候我们的页面没有刷新，也没有接收到服务端的断开提示。
这时候该怎么办？我们是需要刷新页面重新登录吗？
答案当然是否，在产品思维里，每个客户端的用户都是大熊猫，都是懒的，所以你要他刷新页面，他宁愿不再使用这个程序。
这时候我们需要在程序上想办法解决，先辈们已经帮我们得出了无数种解决方案，我们今天要讲的就是其中最常用的方案之一：心跳重连。

### 1、什么是心跳重连
心跳与重连是两个词，顾名思义，就是让重连的操作像心跳一样，定时执行。

在使用WebSocket过程中, 可能会出现网络断开的情况, 比如信号不好, 或者网络临时性关闭;
这时候WebSocket的连接已经断开, 而浏览器不会执行webSocket的onclose方法, 我们无法知道是否断开连接, 也就无法进行重连操作。
如果当前发送WebSocket数据到后端, 一旦请求超时, onclose便会执行, 这时候便可进行绑定好的重连操作。
因此WebSocket心跳重连就应运而生了。

### 2、客户端心跳重连
修改`index.php`代码为如下代码，依照案例四的demo。
```
<?php
// +----------------------------------------------------------------------
// 小黄牛blog - websocket
// +----------------------------------------------------------------------
// Copyright (c) 2018 https://xiuxian.junphp.com All rights reserved.
// +----------------------------------------------------------------------
// Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// Author: 小黄牛 <1731223728@qq.com>
// +----------------------------------------------------------------------
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Swoole+Websocket案例 - 小黄牛</title>
<script src="./js/jquery.min.js"></script>
<style>
html,body{margin:0;padding:0;font-size:13px}
.left{width: 20%;height: 600px;border: 1px solid #ddd;float: left;}
.right{width: 79.7%;height: 400px;border: 1px solid #ddd;border-left: 0px;float: left;overflow: auto;}
.bottom{width: 79.7%;height: 199px;border: 1px solid #ddd;border-left: 0px;border-top: 0px;float: left;}
#content{width: 99.5%;height: 165px;}
.blue{color:blue}
.red{color:red}
.div_left{width:100%;float:left}
.div_right{width:100%;float:left;text-align: right;}
.div_centent{width:100%;float:left;text-align: center;}
</style>
</head>

</ul>
</div>
<div class="right">

</div>
<div class="bottom">
	<textarea id="content"></textarea>
	<button type="button" id="submit">发送消息</button>
</div>

<h3>使用方法：</h3>
<p>①：CD进您的server.php文件目录</p>
<p>②：如果您是调试阶段，可以直接php server.php，激活程序，这样的话在运行过程中出错，能在cmd界面查看报错内容</p>
<p>③：如果您是部署阶段，可以使用nohup server.php >>/dev/null 2>&1 &命令，后台守护进程运行。</p>
</body>
</html>

var lockReconnect = false; // 正常情况下我们是关闭心跳重连的
var wsServer = 'ws://47.106.187.208:9502';
var websocket;
var time;
createWebSocket();

// ①开启WebSocket
function createWebSocket() {
	try {
		websocket = new WebSocket(wsServer);
		init();
	} catch(e) {
		reconnect(wsUrl);
	}
}

// ②初始化WebSocket，并设置心跳检测
function init() {
	// 接收Socket断开时的消息通知
	websocket.onclose = function(evt) {
		$('#error').append('<p class="red">Socket断开了...正在试图重新连接...</p>');
		reconnect(wsServer);
	};
	// 接收Socket连接失败时的异常通知
	websocket.onerror = function(e){
		$('#error').append('<p class="red">Socket断开了...正在试图重新连接...</p>');
		reconnect(wsServer);
	};
	// 连接成功
	websocket.onopen = function (evt) {
		$('#error').append('<p class="blue">握手成功，打开socket连接了。。。</p>');
		var data = {
			'code':1, // 我们假设code为1时，是绑定登录请求
			'user_id':USER_ID
		};
		// 前端发送json前，必须先转义成字符串
		data = JSON.stringify(data);
		websocket.send(data);
		// 心跳检测重置
		heartCheck.start();
	};

开启两个浏览器标签分别访问`index.php`，然后把网络断开1分钟，观察页面提示，然后再将网络连上。

完整的案例DEMO，可以直接到我的开源栏目中进行下载：[Swoole聊天室Demo之二](https://blog.junphp.com/open_source.jsp "Swoole聊天室Demo之二")

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺