2017-05-06 115 views
0

每次将新事件添加到我的数据库时,我都会向用户显示通知。我在首页和一个红色正方形上有一个小图标,显示已添加的新事件的数量。现在我只想知道什么是最好的方式来显示新的事件,而不刷新页面。使用PHP和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查询基本上是在总的事件是> 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

你可以看看http://stackoverflow.com/questions/14112676/how-can-i-check-for-live-updates-without-using-setinterval-timeout和http://stackoverflow.com /问题/ 7202978 /获取服务器响应,而无需-使用-的setInterval换聊天的一个应用-PHP-的jQuery –

回答

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拉动)。或者,如果您的工作空间在不在。 linux,你可以使用swooleworkerman或websocket来做到这一点。