前面说了长轮询的方式实现web实时通讯的原理,这里说另一个小弟知道的实现实时通讯的方式,SSE。
SSE即Server Sent Event,服务端发送事件,我说说自己对其原理的理解吧:ajax通过xmlhttprequest对象进行,而该对象在和服务端交互过程中会触发多次回调,对应readystate属性的几个值,我们一般只使用readystate=4的那次回调,表示已接收完所有数据。但实际在readystate=3时已经接收了部分数据,如果服务端将请求阻塞,一段时间后发送一个,发送了继续阻塞,再发送,再阻塞,这样readystate将不能达到4的完成状态,保持为3,浏览器会不断接收数据,当接收到特定字符(空行)时,浏览器触发服务端发送事件,并传递接收到的数据。
注:SSE不能在ie下实现,以下代码在ie下会出错。
客户端代码:
<div id="time"> </div>
<script type="text/javascript" src="js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var source= new EventSource("time.aspx");
source.onmessage = function(event){
$('#time').html(event.data);
}
</script>
服务端代码:
Response.ContentType = "text/event-stream";//实现SSE必须设置contenttype为该值
while (true) //将请求永久阻塞
{
Response.Write("data: "+DateTime.Now.ToString());
Response.Write("\n\r");//输出一个空行,告诉客户端触发onmessage
Response.Flush();//立即发送输出缓冲中的数据
System.Threading.Thread.Sleep(5000);
}
以上代码为演示代码,每5秒发送一次服务器时间,实际应用中应保持阻塞直至某个事件发生以将新信息发送给客户端
SSE的好处是只使用一个连接,并且连接中断后会自动重连,容错性较高。缺点是不兼容,要兼容实现实时通讯,请使用ajax长连接。
未知数 2014-2-21