jquery — уведомление о новом событии без обновления страницы с использованием PHP и AJAX

Я показываю уведомление своим пользователям каждый раз, когда новое событие добавляется в мою базу данных. У меня есть маленькая иконка на моей верхней странице и красный квадрат, чтобы показать количество новых событий, которые были добавлены. Теперь я просто хочу узнать, как лучше всего отображать новые события без обновления страницы.

скриншот элемента уведомления

Вот мой код

<li><i class="fa fa-warning  fa-2x"></i>
<?php if ($totalRows_event > 0) { ?>
<span class="label label-danger blink"><?php echo $totalRows_event ?></span>
<?php } ?>
</li>

Мой PHP-запрос в основном, когда общее количество событий> 0, отображать <span> и общее количество внутри, но это показывает только когда страница обновляется или загружается.

Я смотрел на AJAX-запрос, подобный приведенному ниже, который отображает результат PHP-запроса во внутреннем html.

function testAjax() {
var result = "";
$.ajax({
url: "data.php",
async: false,
success: function (data, textStatus) {
$("#preview").html(data);
},
error: function () {
alert('Not OKay');
}
});
return result;
}
<li>
<i class="fa fa-warning fa-2x"></i>
<span class="label label-danger blink" id="preview"></span>
</li>

Но как мне вызывать функцию каждый раз, когда новое событие добавляется в мою базу данных без обновления или загрузки страницы? Я думаю, что использование установленного интервала или задержки замедлит мою страницу из-за частых запросов к серверу, поэтому я ищу другие варианты.

0

Решение

PHP:

 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();
}

ЯШ:

 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("<i class='iconfont'style='position: fixed;top: 28px;right: 30px;color: #2fa8ec;font-size: 20px'>&#xe61f;</i>");
$("#messagenum").html('message('+data.message+')');
}
if(data.image != 0){
$(document.body).append("<i class='iconfont'style='position: fixed;top: 28px;right: 30px;color: #2fa8ec;font-size: 20px'>&#xe61f;</i>");
$("#imagenum").html('New Image('+data.image+')');
}
if (textStatus == "success") {
longPolling();
}
}
});
})();
});

Я использую THINKPHP и Jquery, вы можете изменить его по своему усмотрению. (AJAX LONG PULLING). Или если ваше рабочее пространство находится в Linux, вы можете использовать swoole или же workerman или websocket, чтобы сделать это.

1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector