Angular Chatroom Web應用程序

我是Angular的初學者，正在嘗試構建聊天室應用程序，作爲教我自己如何在框架中開發的一種方式。Angular Chatroom Web應用程序

我使用PHP和Yii作爲後端將REST風格的數據發送回角度應用程序。我知道我可以使用NodeJS，但沒有足夠的經驗並希望首先學習角度。

在我的申請的ChatCtrl有一個名爲longPoll（）方法，該方法使得以像這樣的服務器的請求：

$scope.longPoll = function (opts) { 
    opts = opts || { 
     lastMessageTime: '', 
     lastSessionTime: '' 
    }; 

    var params = '?lastMessageTime=' + opts.lastMessageTime + 
     '&lastSessionTime=' + opts.lastSessionTime; 

    // start up polling 
    $http.get('/chat/poll' + params).success(function (res) { 

     var user = res.items.user, 
      message = res.items.message; 

     // check session updates ========================================= 
     if (user) { 
      if (user.totalCount > 0) { 
       $(user.items).each(function() { 
        $scope.users[this.user_id] = this; 
       }); 
      } 
      opts.lastSessionTime = user.lastTime; 
     } 
     // ================================================================ 

     // check message updates ========================================= 
     if (message) { 
      opts.lastMessageTime = message.lastTime; 
      if (message.totalCount > 0) { 
       $(message.items).each(function() { 
        $scope.messages[this.message_id] = this; 
       }); 
      } 
      opts.lastMessageTime = message.lastTime; 
     } 
     // ================================================================ 

     // loop again 
     $timeout(function() { $scope.longPoll(opts); }, 1000); 
    }); 
}

服務器執行無限循環，每次檢查，如果有變化，以該日期date_updated兩個message表和user表（加入到會話表，以確保他們登錄）

當發生變化的消息或用戶表（也有可能會更晚），它通過記錄下來通過JSON，然後將它們添加到$ scope.messages和$ scope.users，以便它們可以b E在HTML瀏覽：

<div ng-init="longPoll()" ng-controller="ChatCtrl"> 
    <ul id="nicklist" ng-cloak> 
     <li id="nicklist-header">Users Online</li> 
     <li ng-repeat="user in getArray(users)" ng-cloak> 
      <a> 
       <i class="icon-user"></i> {{user.username}} 
      </a> 
     </li> 
    </ul> 
    <ul id="messages"> 
     <li ng-repeat="msg in getArray(messages)" ng-model="msg" ng-cloak> 
      <a class="message"> 
       <span class="date">[{{msg.date_added}}]</span> 
       <span class="user">{{msg.username}}:</span> 
       <span class="msg" ng-bind-html-unsafe="msg.message"></span> 
      </a> 
     </li> 
    </ul> 
</div>

在「的getArray（）」功能只是將數據轉換成一個數組，因爲我存儲兩個$ scope.messages和$ scope.users作爲鍵：值對象，因此我可以稍後參考它們。

因爲這是我第一次正確的Angular應用程序，我相信我可以做得更好。我想知道的一件事是在服務器發送數據時更好地接收數據更改。我原來是在向服務器發送多個長輪詢請求（一個用於消息，一個用於用戶），但現在它只是一個減少流量和服務器負載的輪詢請求，這也意味着我不能使用Angular的$ resource功能我所知？

你能告訴我什麼可以改進嗎，這裏被認爲是好的做法/不好的做法？

謝謝

來源

2013-02-05 simon

您可能希望將輪詢邏輯移動到服務並將事件廣播到控制器。

你可以簡單地通過使用Node.js + socket.io

來源

2013-02-05 23:09:07

Angular Chatroom Web應用程序

回答

相關問題