javascript - 从服务器拉取消息并在客户端渲染

Question

$scope.receivefb = function receivefb(){
    var url ="js/db.php";
    $http.post(url).success(
      function(data){
        console.log(data);
        if(data.msg!=""){
  document.getElementById('messages').innerHTML += '<div class="row message-body"><div class="col-sm-12 message-main-receiver"><div class="receiver"><div class="message-text" name="messaggio" id='+data.id+'>'+data.msg+'</div><span class="message-time pull-right">Sun</span></div></div></div>';

            }
            $timeout($scope.receivefb, 2000);

      })


}

我正在使用这个javascript函数每2秒调用一个php脚本，该脚本从数据库获取最后一条消息，然后打印它。我不使用这个超时的东西，相反，我想使用一种总是在监听并在每次检测到新消息时触发我的javascript的脚本。 这个概念很简单，但我不知道如何解决这个问题。

Answer 1

事实上，如果您不向服务器发出请求，或者服务器通过某种网络套接字或“类似网络套接字”技术通知客户端，您将无法检测到是否有新消息。

至少有两种解决方案:

1) 使用socket.io开发服务器端Web-socket应用程序，绑定(bind)到一些消息事件并将新消息放入$scope.messages数组，将渲染逻辑委托(delegate)给Angular。优点是它基于事件工作并且具有“实时性”，缺点是你必须学习nodejs并拥有nodejs服务器(简单的廉价灯服务器托管可能没有nodejs支持)。

2) 或者只是每 2 秒轮询一次消息，与渲染逻辑分开，并将新消息放入 $scope.messages，将渲染逻辑委托(delegate)给 Angular(观看 ng-repeat tutorials ):

JS 部分(MessagesController 内部):

$scope.messages = [];
function receivefb(scope) {
  var url ="js/db.php";
  $http
    .post(url)
    .success(function(data) {
      if(response.msg != '') {
        scope.messages.push(data);
      }
    })
    .finally(function() {
      (function(method, scope) {
        setTimeout(function(){
          method(scope);
        }, 2000)
      )(receivefb, scope);
    });
}
receivefb($scope);

HTML 部分:

<div ng-controller="MessagesController">

  <div ng-repeat="message in messages" class="row message-body">
    <div class="col-sm-12 message-main-receiver">
      <div class="receiver">
        <div class="message-text" name="messaggio" id="{{message.id}}">
          {{message.msg}}
        </div>
        <span class="message-time pull-right">Sun</span>
      </div>
    </div>
  </div>

</div>