梁剑的Blog » Web http://icomes.net 做有趣的事，做有用的人 Wed, 23 Jun 2010 16:04:55 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Web实现服务器推的三种技术 http://icomes.net/2009/10/24/web%e5%ae%9e%e7%8e%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%8e%a8%e7%9a%84%e4%b8%89%e7%a7%8d%e6%8a%80%e6%9c%af/ http://icomes.net/2009/10/24/web%e5%ae%9e%e7%8e%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%8e%a8%e7%9a%84%e4%b8%89%e7%a7%8d%e6%8a%80%e6%9c%af/#comments Sat, 24 Oct 2009 07:07:00 +0000 梁剑 http://icomes.net/?p=468 1. Hidden iframe

将iframe的src指向一个url，server收到请求后，Keep-Alive。
数据直接以script的方式下发到Browser，Browser收到数据后直接执行。
只要不超时，链接会一直保留。

优：感觉这是真正的长连接，对stream也有完整的支持。
劣：Browser状态栏会一直处于“连接中”，ESC会导致链接断开，会有跨域问题

2. Script Tag

用JS创建一个script对象，将该对象的src指向一个url，Keep-Alive。
在一定时间内（超时前），如果sever有数据下发，则用script的方式发送到Browser。
Browser收到数据后直接执行，此时需要重建script对象，建立另一个链接。

优：没有Hidden iframe的缺点，也比较轻量
劣：不是真正的长链接，每收到一个新的下发数据，都需要重新建立链接

3 AJAX

用JS创建一个XHR对象，将该对象的src指向一个url，Keep-Alive。
在一定时间内（超时前），如果sever有数据下发，则通过已建立的链接发送到Browser。
Browser收到数据后直接执行，此时需要重建XHR对象，建立另一个链接。

优：没有Hidden iframe的缺点
劣：存在跨域问题，不是真正的长链接，每收到一个新的下发数据，都需要重新建立链接

2 和 3也可以叫做Long Polling

除了这三种方法，还可以用Flash，由Flash和Server通信，页面用过JS和Flash通信。
这可以实现真正的下发，甚至不需要维护长链接。
但也可能存在被防火墙屏蔽的问题。

三种方法都用php模拟了一下：

Hidden Iframe

<html>
<head>
<script>
function callback(data)
{
	document.getElementById("t").value = data + "\n" + document.getElementById("t").value;
}
 
callback("abc");
</script>
</head>
<body>
hello
<textarea id="t"></textarea>
<iframe src="/hiddeniframe.php" width="0" height="0"></iframe>
</body>
</html>
<?php
	ob_end_flush();
	echo "<script>";
	echo "domain=serverpush";
	echo "</script>";
	for( ; ; )
	{
		$t = time();
		echo "<script>";
		echo "parent.callback($t);";
		echo "</script>";
		flush();
		sleep(1);
	}
?>

Script Tag

<html>
<head>
<script>
function callback(data)
{
	document.getElementById("t").value = data + "\n" + document.getElementById("t").value;
}
 
function connect()
{
    var _script = document.createElement("script");
    _script.setAttribute("type", "text/javascript");
    _script.setAttribute("src", "script.php");
    document.getElementsByTagName("head")[0].appendChild(_script);	
}
 
connect();
</script>
</head>
<body>
<textarea id="t"></textarea>
</body>
</html>
<?php
	sleep(10);
	$r = time();
	echo "callback($r);";
	echo "setTimeout(connect, 1000)";
?>

AJAX

<html>
<head>
<script>
function callback(data)
{
	document.getElementById("t").value = data + "\n" + document.getElementById("t").value;
}
 
function connect()
{
	var ajax = new XMLHttpRequest;
	ajax.open("POST", "ajax.php");
	ajax.onreadystatechange = function()
	{       
		if (ajax.readyState == 4)
		{       
			if (ajax.status == 200) 
			{       
				callback(ajax.responseText);	
				setTimeout(connect, 1000);
			}       
		}       
	}
	ajax.send();
}
 
connect();
 
</script>
</head>
<body>
<textarea id="t"></textarea>
</body>
</html>
<?php
	sleep(10);
	echo time();
?>
]]> http://icomes.net/2009/10/24/web%e5%ae%9e%e7%8e%b0%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%8e%a8%e7%9a%84%e4%b8%89%e7%a7%8d%e6%8a%80%e6%9c%af/feed/ 0 浏览器战争 http://icomes.net/2009/01/13/%e6%b5%8f%e8%a7%88%e5%99%a8%e6%88%98%e4%ba%89/ http://icomes.net/2009/01/13/%e6%b5%8f%e8%a7%88%e5%99%a8%e6%88%98%e4%ba%89/#comments Tue, 13 Jan 2009 02:18:13 +0000 梁剑 http://icomes.net/?p=256 还是挺形象的，不过名字叫浏览器战争史会贴切一点
浏览器战争

浏览器战争

]]> http://icomes.net/2009/01/13/%e6%b5%8f%e8%a7%88%e5%99%a8%e6%88%98%e4%ba%89/feed/ 0