Heim > Backend-Entwicklung > PHP-Tutorial > 基于jQuery与PHP实现Ajax长轮询(LongPoll)_PHP教程

基于jQuery与PHP实现Ajax长轮询(LongPoll)_PHP教程

WBOY
Freigeben: 2016-07-20 10:56:44
Original
1052 Leute haben es durchsucht

传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求。

反转AJAX,就是所谓的长轮询或者COMET。服务器与客服端需要保持一条长时间的请求,它使得服务器在有数据时可以返回消息给客户端。

XHTML

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"msg"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span>     </span></span></span></li>
<li><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"测试"</span><span> </span><span class="tag">/></span><span>    </span></span></li>
</ol>
Nach dem Login kopieren

jQuery

这里使用AJAX请求data.php页面获得‘success’的值,请求的时间达到80秒。在这80秒中若没有从服务端返回‘success’则一直保持连接状态,直到有数据返回或‘success’的值为0才关闭连接。在关闭连接后在继续下一次的请求。

<ol class="dp-c">
<li class="alt"><span><span>$(</span><span class="keyword">function</span><span>(){   </span></span></li>
<li>
<span>    $(</span><span class="string">"#btn"</span><span>).bind(</span><span class="string">"click"</span><span>,{btn:$(</span><span class="string">"#btn"</span><span>)},</span><span class="keyword">function</span><span>(evdata){      </span>
</li>
<li class="alt"><span>         $.ajax({      </span></li>
<li>
<span>                type:</span><span class="string">"POST"</span><span>,      </span>
</li>
<li class="alt">
<span>                dataType:</span><span class="string">"json"</span><span>,      </span>
</li>
<li>
<span>                url:</span><span class="string">"data.php"</span><span>,      </span>
</li>
<li class="alt">
<span>                timeout:80000,     </span><span class="comment">//ajax请求超时时间80秒     </span><span> </span>
</li>
<li>
<span>                data:{time:</span><span class="string">"80"</span><span>}, </span><span class="comment">//40秒后无论结果服务器都返回数据     </span><span> </span>
</li>
<li class="alt">
<span>                success:</span><span class="keyword">function</span><span>(data,textStatus){      </span>
</li>
<li>
<span>                    </span><span class="comment">//从服务器得到数据,显示数据并继续查询     </span><span> </span>
</li>
<li class="alt">
<span>                    </span><span class="keyword">if</span><span>(data.success==</span><span class="string">"1"</span><span>){      </span>
</li>
<li>
<span>                     $(</span><span class="string">"#msg"</span><span>).append(</span><span class="string">"<br>[有数据]"</span><span>+data.text);      </span>
</li>
<li class="alt"><span>                     evdata.data.btn.click();      </span></li>
<li><span>                    }      </span></li>
<li class="alt">
<span>                 </span><span class="comment">//未从服务器得到数据,继续查询     </span><span> </span>
</li>
<li>
<span>                    </span><span class="keyword">if</span><span>(data.success==</span><span class="string">"0"</span><span>){      </span>
</li>
<li class="alt">
<span>                    $(</span><span class="string">"#msg"</span><span>).append(</span><span class="string">"<br>[无数据]"</span><span>);      </span>
</li>
<li><span>                    evdata.data.btn.click();      </span></li>
<li class="alt"><span>                    }      </span></li>
<li><span>                },      </span></li>
<li class="alt">
<span>             </span><span class="comment">//Ajax请求超时,继续查询     </span><span> </span>
</li>
<li>
<span>             error:</span><span class="keyword">function</span><span>(XMLHttpRequest,textStatus,errorThrown){      </span>
</li>
<li class="alt">
<span>                     </span><span class="keyword">if</span><span>(textStatus==</span><span class="string">"timeout"</span><span>){      </span>
</li>
<li>
<span>                         $(</span><span class="string">"#msg"</span><span>).append(</span><span class="string">"<br>[超时]"</span><span>);      </span>
</li>
<li class="alt"><span>                         evdata.data.btn.click();      </span></li>
<li><span>                     }      </span></li>
<li class="alt"><span>             }      </span></li>
<li><span>                      </span></li>
<li class="alt"><span>            });      </span></li>
<li><span>    });      </span></li>
<li class="alt"><span>          </span></li>
<li><span>});    </span></li>
</ol>
Nach dem Login kopieren

PHP

在这里是无限的循环,循环的结束条件就是获取到了返回结果返回Json数据。

并且接受$_POST['time']参数来限制循环的超时时间,避免资源的过度浪费。(浏览器关闭不会发消息给服务器,使用可能一直循环下去)

<ol class="dp-c">
<li class="alt"><span><span class="keyword">if</span><span>(</span><span class="func">empty</span><span class="keyword">empty</span><span>(</span><span class="vars">$_POST</span><span>[</span><span class="string">'time'</span><span>]))</span><span class="func">exit</span><span>();      </span></span></li>
<li>
<span>set_time_limit(0);</span><span class="comment">//无限请求超时时间     </span><span> </span>
</li>
<li class="alt">
<span class="vars">$i</span><span>=0;      </span>
</li>
<li>
<span class="keyword">while</span><span> (true){      </span>
</li>
<li class="alt">
<span>    </span><span class="comment">//sleep(1);     </span><span> </span>
</li>
<li>
<span>    usleep(500000);</span><span class="comment">//0.5秒     </span><span> </span>
</li>
<li class="alt">
<span>    </span><span class="vars">$i</span><span>++;      </span>
</li>
<li><span>          </span></li>
<li class="alt">
<span>    </span><span class="comment">//若得到数据则马上返回数据给客服端,并结束本次请求     </span><span> </span>
</li>
<li>
<span>    </span><span class="vars">$rand</span><span>=rand(1,999);      </span>
</li>
<li class="alt">
<span>    </span><span class="keyword">if</span><span>(</span><span class="vars">$rand</span><span></span>
</li>
<li>
<span>        </span><span class="vars">$arr</span><span>=</span><span class="keyword">array</span><span>(</span><span class="string">'success'</span><span>=></span><span class="string">"1"</span><span>,</span><span class="string">'name'</span><span>=></span><span class="string">'xiaocai'</span><span>,</span><span class="string">'text'</span><span>=></span><span class="vars">$rand</span><span>);      </span>
</li>
<li class="alt">
<span>        </span><span class="func">echo</span><span> json_encode(</span><span class="vars">$arr</span><span>);      </span>
</li>
<li>
<span>        </span><span class="func">exit</span><span>();      </span>
</li>
<li class="alt"><span>    }      </span></li>
<li><span>          </span></li>
<li class="alt">
<span>    </span><span class="comment">//服务器($_POST['time']*0.5)秒后告诉客服端无数据     </span><span> </span>
</li>
<li>
<span>    </span><span class="keyword">if</span><span>(</span><span class="vars">$i</span><span>==</span><span class="vars">$_POST</span><span>[</span><span class="string">'time'</span><span>]){      </span>
</li>
<li class="alt">
<span>        </span><span class="vars">$arr</span><span>=</span><span class="keyword">array</span><span>(</span><span class="string">'success'</span><span>=></span><span class="string">"0"</span><span>,</span><span class="string">'name'</span><span>=></span><span class="string">'xiaocai'</span><span>,</span><span class="string">'text'</span><span>=></span><span class="vars">$rand</span><span>);      </span>
</li>
<li>
<span>        </span><span class="func">echo</span><span> json_encode(</span><span class="vars">$arr</span><span>);      </span>
</li>
<li class="alt">
<span>        </span><span class="func">exit</span><span>();      </span>
</li>
<li><span>    }      </span></li>
<li class="alt"><span>}   </span></li>
</ol>
Nach dem Login kopieren

运行效果:在图中可以看到无数据的请求时间达到了40S,在40S的请求中若获得数据则请求关闭。


www.bkjia.comtruehttp://www.bkjia.com/PHPjc/445814.htmlTechArticle传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的...
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage