非常好的web前端技术

http://www.zendstudio.net/category/js-div-css/

 

 

 

 

 

 

: 幸福 

web socket 心跳包的实现方案05/30/2010

现在网络环境错综复杂，socket心跳包是获得健康强壮的连接的有效解决方案，今天，我们就在web socket中实现心跳包方案，是的，尽管我们只是做一个简单的聊天室，但我们让他稳定可靠一些一点也没有错。

我的心跳包方案很是简单，原理就是间隔发送心跳包数据给服务器，服务器在一定时间内发回心跳包响应，对比超时限定，如果超过设定的超时时间，则认为当前与服务器的websocket连接已经断开，关闭当前web socket连接，善后处理，例如重新连接，或者弹出提示……

比较有用的核心代码是这样子的：

function keepalive( ws ){
	var time = new Date();
	if( last_health != -1 && ( time.getTime() - last_health > health_timeout ) ){
			//此时即可以认为连接断开，可设置重连或者关闭连接
			$("#keeplive_box").html( "服务器没有响应." ).css({"color":"red"});
			//ws.close();
	}
	else{
		$("#keeplive_box").html( "连接正常" ).css({"color":"green"});
		if( ws.bufferedAmount == 0 ){
			ws.send( '~H#C~' );
		}
	}
}

这就是心跳函数，发送心跳包和检测心跳健康度。我们将其植入到websocket的onopen事件中，来开启心跳检测。像这样：

var ws = new WebSocket( to_url );
  ws.onopen=function(){
		$("#statustxt").html("connected.");
		$("#send_btn").attr("disabled", false);
		heartbeat_timer = setInterval( function(){keepalive(ws)}, 1000 );
	}

是的，这样子就可以实现web socket的心跳包，这里有些类似于多线程的发送方式，在发送心跳包的同时，并不影响正常的数据通信，我们的例子还是以上次的websocket聊天室来改进，我们可以发现，心跳包运行过程中，并不会干扰到我们的正常聊天。服务端我也进行了一些修改，原理类似，在超过一定时间内都没有收到客户端发来的心跳包，则认为该客户端已经掉线，关闭连接，收回资源。

Demo在这里：http://www.zendstudio.net/libs/websocket/chat/demo2.html

现在，有一个新的问题出现，如果我们要用php socket来模拟心跳包技术，该怎么实现？各位路过的朋友请多指教，感恩戴德。

1,449位童鞋围观 | 3条评论分类： web前端编程,互联网2.0,网络通信协议 标签: html、html5、websocket