使用PHP和AJAX刷新页面时的新事件通知

时间:2017-05-06 00:37:49

标签: php jquery ajax

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

notification element screenshot

这是我的代码

<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查询基本上是在事件总数为&gt; 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>

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

1 个答案:

答案 0 :(得分:1)

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

JS:

 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中,您可以使用swooleworkerman或websocket来做这个。