关于jquery：使用PHP和AJAX不刷新页面的新事件通知

New event notification without refreshing a page using PHP and AJAX

每次将新事件添加到我的数据库时，我都会向我的用户显示通知。我的首页上有一个小图标，还有一个红色方块来显示添加的新事件的数量。现在我只想知道在不刷新页面的情况下显示新事件的最佳方法是什么。

notification element screenshot

这是我的代码

1
2
3
4
5
6
7

我的PHP查询基本上是事件总数>0的时候，显示一个和里面的总数，但是这只在页面刷新或者加载的时候显示。

我正在查看一个类似于下面的 AJAX 请求，它将 PHP 查询结果显示到内部 html 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1
2
3
4
5
6

但是，每次将新事件添加到我的数据库时，我如何调用该函数而不刷新或加载页面？我认为使用设置的时间间隔或延迟会因为频繁的服务器查询而减慢我的页面，所以我正在寻找其他选项。

相关讨论

php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

public function index()
{
if (!$_GET['timed']) exit();
if (!$_GET['uid']) exit();
date_default_timezone_set("PRC");
set_time_limit(0);
$uid = $_GET['uid'];
while (true) {
sleep(3);
$lastReadTime = M('readtime')->where(array('uid'=>$uid))->field('lasttime')->select();
$result = M('message')->where(array('send_time'=>array('gt',$lastReadTime),'touid'=>$uid))->count();
if($result){
$data = array(
'message' => $result,
);
echo json_encode($data);
exit();
} else {
usleep(1000);
exit();
//return;
}
}
session_write_close();
}

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var cometURL ="{:U(GROUP_NAME.'/Comet/index')}"
$(function () {
(function longPolling() {
//alert(Date.parse(new Date())/1000);
$.ajax({
url: cometURL,
data: {"timed": Date.parse(new Date())/1000,"uid":$("#uid-hidden").val()},
dataType:"json",
timeout: 5000,
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus =="timeout") {
longPolling();
} else {
longPolling();
}
},
success: function (data, textStatus) {
if(data.message != 0){
$(document.body).append("");
$("#messagenum").html('message('+data.message+')');
}
if(data.image != 0){
$(document.body).append("");
$("#imagenum").html('New Image('+data.image+')');
}
if (textStatus =="success") {
longPolling();
}
}
});
})();
});

我正在使用 THINKPHP 和 Jquery，你可以将其更改为你的方式。(AJAX LONG PULLING)。或者如果你的工作区在 linux 中，你可以使用 swoole 或 workerman 或 websocket 来制作。