title: JavaScript之web通信 categories:
</blockquote>
<p>长连接与短连接的不同主要在于client和server采取的关闭策略不同。短连接在建立连接以后只进行一次数据传输就关闭连接，而长连接在建立连接以后会进行多次数据数据传输直至关闭连接（长连接中关闭连接通过Connection：closed头部字段）。</p> <h3>二、web 通信</h3> <p>首先要搞清楚，xhr 的 readystate 各种状态。</p> <table> <thead> <tr><th>属性 </th><th> 描述</th> </tr> </thead> <tbody> <tr> <td>onreadystatechange </td> <td> 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> </tr> <tr> <td>readyState </td> <td> 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收3: 请求处理中 4: 请求已完成，且响应已就绪</td> </tr> <tr> <td>status </td> <td> 200: "OK" 404: 未找到页面</td> </tr> </tbody> </table> <h4> </h4> <h4>1.轮询</h4> <p>轮询是一种\拉"取信息的工作模式。设置一个定时器，定时询问服务器是否有信息，每次建立连接传输数据之后，链接会关闭。</p> <p>前端实现：</p>var polling = function(url, type, data){
var xhr = new XMLHttpRequest(),
type = type || "GET",
data = data || null;
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
receive(xhr.responseText);
xhr.onreadystatechange = null;
}
};
xhr.open(type, url, true);
//IE的ActiveXObject("Microsoft.XMLHTTP")支持GET方法发送数据，
//其它浏览器不支持，已测试验证
xhr.send(type == "GET" ? null : data);
};
var timer = setInterval(function(){
polling();
}, 1000);
var longPoll = function(type, url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 状态为 4，数据传输完毕，重新连接
if(xhr.readyState == 4) {
receive(xhr.responseText);
xhr.onreadystatechange = null;
longPoll(type, url);
}
};
xhr.open(type, url, true);
xhr.send();
}
var dataStream = function(type, url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 状态为 3，数据接收中
if(xhr.readyState == 3) {
var i, l, s;
s = xhr.response; //读取数据
l = s.length; //获取数据长度
//从游标位置开始获取数据，并用分割数据
s = s.slice(p, l - 1).split(splitChar);
//循环并操作数据
for(i in s) if(s[i]) deal(s[i]);
p = l; //更新游标位置
}
// 状态为 4，数据传输完毕，重新连接
if(xhr.readyState == 4) {
xhr.onreadystatechange = null;
dataStream(type, url);
}
};
xhr.open(type, url, true);
xhr.send();
};
if(isIE){
var dataStream = function(url){
var ifr = document.createElement("iframe"), doc, timer;
ifr.src = url;
document.body.appendChild(ifr);
doc = ifr.contentWindow.document;
timer = setInterval(function(){
if(ifr.readyState == "interactive"){
// 处理数据，同上
}
// 重新建立链接
if(ifr.readyState == "complete"){
clearInterval(timer);
dataStream(url);
}
}, 16);
};
};
if(isIE){
var dataStream = function(url){
var doc = new ActiveXObject("HTMLFile"),
ifr = doc.createElement("iframe"),
timer, d;
doc.write("<body>");
ifr.src = url;
doc.body.appendChild(ifr);
d = ifr.contentWindow.document;
timer = setInterval(function(){
if(d.readyState == "interactive"){
// 处理数据，同上
}
// 重新建立链接
if(d.readyState == "complete"){
clearInterval(timer);
dataStream(url);
}
}, 16);
};
};
</body>
<h4>4.websocket</h4>
<p>websocket是前端一个神器，ajax用了这么久了，相关技术也是很成熟，不过要实现个数据的拉取确实十分不易，从上面的代码中也看到了，各种兼容性问题，各种细节处理问题，自从有了websocket，哈哈，一口气上五楼...</p>var ws = new WebSocket("ws://www.example.com:8888");
ws.onopen = function(evt){};
ws.onmessage = function(evt){
deal(evt.data);
};
ws.onclose = function(evt){};
//ws.close();
new EventSource("test.php").onmessage=function(evt){
console.log(evt.data);
};
var conns = new Array();
var ws = require("websocket-server");
var server = ws.createServer();
server.addListener("connection", function(connection){
console.log("Connection request on Websocket-Server");
conns.push(connection);
connection.addListener('message',function(msg){
console.log(msg);
for(var i=0; i<conns.length; i++){
if(conns[i]!=connection){
conns[i].send(msg);
}
}
});
});
server.listen(8888);
header('Content-Type:text/html; charset=utf-8');
while(1){
echo date('Y-m-d H:i:s');
flush();
sleep(1);
};
<h3>四、web 通信方式利弊分析</h3>
<ul> <li>轮询，这种方式应该是最没技术含量的，操作起来最方便，不过是及时性不强，把定时器的间隔时间设置的短一些可以稍微得到缓和。</li> <li>长轮询，算是比较不错的一个web通讯方式，不过每次断开连接，比较耗服务器资源，客户端到无所谓。</li> <li>数据流，他和长轮询不同之处是接受数据的时间不一样，数据流是readystate为3的时候接受，低版本IE不太兼容，处理起来略麻烦，而且还要自己设计数据传输协议。不过他对资源的消耗比上面几种都可观。</li> <li>websocket和EventSource，两个利器，不过，没几个浏览器支持，这是比较让人伤心~</li> <li>ActionScript和Java Applet，两者都是需要在客户端安装插件的，一个是Flash插件，一个是Java插件，而且搞前端的人一般对这东西不太熟悉，如果没有封装比较好的库可以使用，那建议还是别用了。</li> </ul> <h3>五、参考资料</h3> <ul> <li><a href="http://www.ibm.com/developerworks/cn/web/wa-lo-comet/" target="_blank">http://www.ibm.com/developerworks/cn/web/wa-lo-comet/</a> Comet：基于 HTTP 长连接的\服务器推"技术</li> <li><a href="http://blog.csdn.net/yankai0219/article/details/8208776" target="_blank">http://blog.csdn.net/yankai0219/article/details/8208776</a> HTTP协议中长连接、短连接</li> <li><a href="http://www.web-tinker.com/" target="_blank">http://www.web-tinker.com/</a> comet系列文章 <strong>推荐<a href="http://www.web-tinker.com/rss.xml" target="_blank">订阅</a></strong></li> </ul>