异步长连接遇阻塞，探索，以及解决

最新推荐文章于 2021-08-11 09:23:05 发布

小米饭团

最新推荐文章于 2021-08-11 09:23:05 发布

阅读量1.2k

点赞数

分类专栏： php 后端技术文章标签： javascript function session mysql iframe query

后端技术同时被 2 个专栏收录

30 篇文章

订阅专栏

php

16 篇文章

订阅专栏

在试验聊天程序的时候，利用AJAX保持着一个长连接监听新的聊天信息，之后又调用了另外一个AJAX来发言，于是就发生了一个AJAX线程被阻塞的问题。

在未监听到新的聊天信息的之前，发言用的AJAX就无法发出。

于是发现，这种时候，用AJAX来做聊天并不是一个合适的选择。

拍一下脑袋，想到了直接用appendChild()的方法来远程调用一个php所编译的js文件

 
   view plain 
  
 <!DOCTYPE html>  
 <head>  
 <meta charset="utf-8" />  
 </head>  
 <body>  
 <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="aa(); return false;">执行a，AJAX延时</a>  
 <br />  
 <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="bb(); return false;">执行b，AJAX不延时</a>  
 <br />  
 <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="cc(); return false;">执行c，append延时</a>  
 <br />  
 <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="dd(); return false;">执行d，append不延时</a>  
 <script type="text/javascript">  
 function getxmlhttp(){  
     var a;  
     try{a=new ActiveXObject("Msxml2.XMLHTTP");}  
     catch(e){  
         try{a=new ActiveXObject("Microsoft.XMLHTTP");}  
         catch(E){a=false;}  
     }  
     if(!a&&typeof XMLHttpRequest!=undefined)a=new XMLHttpRequest();  
     return a;  
 }  
   
 function aa(){  
     var aj = getxmlhttp();  
     aj.open("GET","a.php",true); // 调用a.php，被设置了延时响应  
     aj.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');  
     aj.onreadystatechange=function(){  
         if(aj.readyState==4&&aj.status==200){  
             alert(aj.responseText); // 返回信息  
         }  
     };  
     aj.send(null);  
 }  
   
   
 function bb(){  
     var aj = getxmlhttp();  
     aj.open("GET","b.php",true); // 调用b.php，没有设置延时  
     aj.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');  
     aj.onreadystatechange=function(){  
         if(aj.readyState==4&&aj.status==200){  
             alert(aj.responseText); // 返回信息  
         }  
     };  
     aj.send(null);  
 }  
   
   
 function cc(){  
     var head = document.getElementsByTagName("head")[0];  
     var creater = document.createElement("script");  
     creater.src = "c.php?ram="+Math.round(Math.random()*10000); // 加入随机数防止被缓存，调用的是c.php，设置了延时响应  
     head.appendChild(creater); // 将script添加进<head />中，里面的JS将会被执行  
     creatercreater.onload = creater.onreadystatechange=function(){if(!creater.readyState || creater.readyState=="loaded"){head.removeChild(creater);}}; // 载入JS后移除，防止以后head里东西太多。不过IE直接调用removeChild会造成代码不运行。故等载入完成再移除  
 }  
   
 function dd(){  
     var head = document.getElementsByTagName("head")[0];  
     var creater = document.createElement("script");  
     creater.src = "d.php?ram="+Math.round(Math.random()*10000); // 调用的是d.php，没有设置延时  
     head.appendChild(creater);  
     creatercreater.onload = creater.onreadystatechange=function(){if(!creater.readyState || creater.readyState=="loaded"){head.removeChild(creater);}};  
 }  
 </script>  
 </body>  
 </html>  

 
   view plain 
  
 <?php  
 // a.php内容  
   
 sleep(5);  
 echo '这是a.php';  
 ?>  

 
   view plain 
  
 <?php  
 // b.php内容  
   
 echo '这是b.php';  
 ?>  

 
   view plain 
  
 <?php  
 // c.php内容  
   
 sleep(5);  
 echo 'alert("这是c.php");';  
 ?>  

 
   view plain 
  
 <?php  
 // d.php内容  
   
 echo 'alert("这是d.php");';  
 ?>  

运行html文件，点击第一个链接，访问了a.php，在其未返回内容的时候，点击第二个链接访问b.php将会被阻塞。

而点第三个链接，利用append的方法访问了c.php，在其未返回内容的时候，点击第四个链接访问d.php也会正常返回信息。

页面代码

 
   view plain 
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 </head>  
 <body>  
 <a href="javascript:void(0);" mce_href="javascript:void(0);" id="aaa">aaa</a>   
 <a href="javascript:void(0);" mce_href="javascript:void(0);" id="bbb">bbb</a>   
 <a href="javascript:void(0);" mce_href="javascript:void(0);" id="ccc">ccc</a>  
 <input type="text" id="ddd" />  
 <mce:script type="text/javascript"><!--  
 function test(a){  
     this.classname = a;  
 }  
   
 test.prototype.load_js = function(url){ // 在当前页面head里加载js  
     var head = document.getElementsByTagName("head")[0];  
     var creater = document.createElement("script");  
     creater.src = url;  
     head.appendChild(creater);  
     creatercreater.onload = creater.onreadystatechange = function(){  
         if(!(creater.readyState) || creater.readyState == "loaded"){  
             head.removeChild(creater);  
         }  
     };  
 }  
   
 test.prototype.frame_load_js = function(url){ // 在iframe的head里加载js  
     var head = this.iframe.contentDocument ? this.iframe.contentDocument.getElementsByTagName("head")[0] : this.iframe.document.getElementsByTagName("head")[0];  
     var creater = document.createElement("script");  
     creater.src = url;  
     head.appendChild(creater);  
     creatercreater.onload = creater.onreadystatechange = function(){  
         if(!(creater.readyState) || creater.readyState == "loaded"){  
             head.removeChild(creater);  
         }  
     };  
 }  
   
 test.prototype.listen = function(){ // 长连接  
     var url = "b.php?classname="+this.classname+"&ram="+Math.round(Math.random()*10000);  
     this.frame_load_js(url);  
 }  
 test.prototype.get_alert = function(res){ // 长连接返回的结果  
     this.save_result = res;  
     alert(res["words"]);  
 }  
   
 test.prototype.speak = function(){ // 发送消息的连接  
     var words = document.getElementById("ddd").value;  
     var url = "c.php?words="+encodeURIComponent(words)+"&classname="+this.classname+"&ram="+Math.round(Math.random()*10000);  
     this.frame_load_js(url);  
 }  
   
 test.prototype.init = function(){ // 初始化  
     var _this = this;  
     // 创建一个iframe，用iframe  
     this.iframe = document.createElement("iframe");  
     this.iframe.style.display = "none";  
     document.getElementsByTagName("body")[0].appendChild(this.iframe);  
     document.getElementById("aaa").onclick = function(){ _this.listen();};  
     document.getElementById("bbb").onclick = function(){ _this.speak();};  
 }  
   
 var zz = new test("zz");  
 zz.init();  
 // --></mce:script>  
 </body>  
 </html>  

数据库结构

CREATE TABLE IF NOT EXISTS `tester` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`words` varchar(255) NOT NULL,
`saytime` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

b.php，长连接的程序

 
   view plain 
  
 <?php  
 $host        = '127.0.0.1';  
 $user        = 'root';  
 $pwd        = '123456';  
 $db        = 'chatter';  
 $charset    = 'utf8';  
 $conn        = mysql_connect($host, $user, $pwd) or die('Cannot connect database!');  
 mysql_set_charset($charset);  
 mysql_select_db($db);  
 session_start();  
 $data = array();  
 while (emptyempty($data)){  
     $time_flag = !emptyempty($_SESSION['time_flag']) ? $_SESSION['time_flag'] : 0;  
     $sql = 'SELECT * FROM tester WHERE saytime >= '.$time_flag;  
     $query = mysql_query($sql);  
     $rows = mysql_num_rows($query);  
     if (!emptyempty($rows)){  
         $rs = mysql_fetch_assoc($query);  
         $data = $rs;  
         if (!emptyempty($data)){  
             echo 'parent.'.$_GET['classname'].'.get_alert('.json_encode($data).');';  
               
             $_SESSION['time_flag'] = time();  
             exit();  
         }  
     }  
     $_SESSION['time_flag'] = time();  
     sleep(2);  
 }  
   
 ?>  

c.php 用于接收发言信息的程序

 
   view plain 
  
 <?php  
 $host        = '127.0.0.1';  
 $user        = 'root';  
 $pwd        = '123456';  
 $db        = 'chatter';  
 $charset    = 'utf8';  
 $conn        = mysql_connect($host, $user, $pwd) or die('Cannot connect database!');  
 mysql_set_charset($charset);  
 mysql_select_db($db);  
 session_start();  
 $words = trim($_GET['words']);  
 $sql = 'INSERT INTO tester (words, saytime) VALUES ("'.$words.'", "'.time().'")';  
 $query = mysql_query($sql);  
 echo 'alert(1);';  
 ?>  

先点击了aaa链接之后，开始保持长连接，此时点击bbb链接进行发言，则被阻塞，发言失败。

经过无数次的试验……

发现问题所在。原来并不是JS出的问题，问题在于PHP的程序上。

因为session的出现，导致了无法正常工作。

试验着将b.php里的相关session操作都删掉……改为cookie

 
   view plain 
  
 <?php  
 $host        = '127.0.0.1';  
 $user        = 'root';  
 $pwd        = '123456';  
 $db            = 'chatter';  
 $charset    = 'utf8';  
 $conn        = mysql_connect($host, $user, $pwd) or die('Cannot connect database!');  
 mysql_set_charset($charset);  
 mysql_select_db($db);  
   
 $data = array();  
 while (emptyempty($data)){  
     $time_flag = !emptyempty($_COOKIE['time_flag']) ? $_COOKIE['time_flag'] : 0;  
     $sql = 'SELECT * FROM tester WHERE saytime >= '.$time_flag;  
     $query = mysql_query($sql);  
     $rows = mysql_num_rows($query);  
     if (!emptyempty($rows)){  
         $rs = mysql_fetch_assoc($query);  
         $data = $rs;  
         if (!emptyempty($data)){  
             setcookie("time_flag", time(), time()+3600);  
             echo 'parent.'.$_GET['classname'].'.get_alert('.json_encode($data).');';  
             exit();  
         }  
     }  
     sleep(2);  
 }  
 ?>  

于是长连接就不阻塞……至于为何session会引发此问题，尚未得知……

另外，至于IE6下，绑定的两个<a />连接点击会引起后续内容中止的问题，答案在http://blog.youkuaiyun.com/guoerwei/archive/2011/06/10/6535412.aspx

将

 
   view plain 
  
 test.prototype.init = function(){ // 初始化  
     var _this = this;  
     // 创建一个iframe，用iframe  
     this.iframe = document.createElement("iframe");  
     this.iframe.style.display = "none";  
     document.getElementsByTagName("body")[0].appendChild(this.iframe);  
     document.getElementById("aaa").onclick = function(){ _this.listen();};  
     document.getElementById("bbb").onclick = function(){ _this.speak();};  
 }  

改为

 
   view plain 
  
 test.prototype.init = function(){ // 初始化  
     var _this = this;  
     // 创建一个iframe，用iframe  
     this.iframe = document.createElement("iframe");  
     this.iframe.style.display = "none";  
     document.getElementsByTagName("body")[0].appendChild(this.iframe);  
     document.getElementById("aaa").onclick = function(){ _this.listen(); return false;};  
     document.getElementById("bbb").onclick = function(){ _this.speak(); return false;};  
 }  