如何让所有连接的浏览器重新加载由服务器端事件启动 [英] How to make all connected browsers reload initiated by a server-side event
问题描述
假设有一个包含动态生成内容的网页——比如说一个包含当前连接浏览器数量的 div.当服务器上的计数发生变化时，我希望所有连接的浏览器重新加载计数，以便每个人都能看到增量/减量.
Suppose there is a webpage with dynamically generated content -- say a div containing the current number of connected browsers. When the count changes on the server I want all connected browsers to reload the count so that everyone sees the increment/decrement.
实现这一目标的最佳方法是什么?
What's the best way to accomplish this?
关键词:ajax、广播、浏览器、div、jquery
Keywords: ajax, broadcast, browser, div, jquery
推荐答案
这里介绍如何使用 ajax 长轮询进行服务器推送.浏览器发出 ajax 请求，启动服务器端自轮询.ajax 请求保持打开状态，等待响应，直到文件更改，一旦得到响应，它就会发出新的长轮询请求.
Here's how to do server-push using ajax long-polling. The browser makes an ajax request which initiates server-side self-polling. The ajax request remains open, waiting for a response until the file changes, and as soon as it gets a response, it makes a new long-polling request.
这是使用 jQuery 和 php 的样子，在显示的 html 中实现实时更新 div 的示例当前连接的客户端数量:
Here's what it looks like with jQuery and php, implementing the example of live-updating a div in the html showing the number of clients currently connected:
index.html:
index.html:
<html>
<head>
<title>Comet Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="longpolling.js"></script>
</head>
<body>
Number of connected users: <div id="total">0</div>
</body>
</html>
longpolling.js:
longpolling.js:
$(document).ready(function() { connectToServer(1); });
function connectToServer( incp ) {
$.get("LongPolling.php",
{ inc: incp },
function(resp) {
$('#total').html(resp);
connectToServer(0);
}
);
}
LongPolling.php:
LongPolling.php:
<?php
# (over)write file with contents, locking the file while doing so.
# just barf and die if there's an error.
function update($file, $contents)
{
$f = fopen($file, 'w');
if(!$f) { echo "ERROR1"; exit; } # couldn't open file for writing.
if(!flock($f, LOCK_EX)) { echo "ERROR2"; exit; } # couldn't get lock.
fwrite($f, $contents);
fclose($f); # this also releases the lock.
return $contents;
}
# fetch the contents of the given file.
# if the file doesn't exist, create it with contents "0"
function fetch($file)
{
if(file_exists($file)) {
if(!is_readable($file)) { echo "ERROR3"; exit; }
$x = file_get_contents($file);
} else {
$x = 0;
update($file, $x);
}
return $x;
}
$fc = 'connx.txt'; # file that stores the number of connections.
if ( $_REQUEST['inc'] == 1 ) { # someone just connected.
echo update($fc, fetch($fc)+1);
} else { # someone is reconnecting (also happens immediately after connect).
$last = filemtime($fc);
do { # wait until some other instance causes $fc to change...
sleep(1);
clearstatcache(); # otherwise filemtime() results are cached!
} while(filemtime($fc) == $last);
echo fetch($fc);
}
?>
注意:这不会跟踪断开连接，因此它更像是实时跟踪总浏览量.请参阅在浏览器关闭时运行服务器端功能跟踪浏览器断开连接的信息，即客户端断开连接时的服务器端操作.
NOTE: This does not track disconnects, so it's more like live-tracking the total number of pageviews. See Running server-side function as browser closes for info on keeping track of browser disconnects, ie, server-side action on client disconnect.
这篇关于如何让所有连接的浏览器重新加载由服务器端事件启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
