我是Angular的初学者,正在尝试构建一个聊天室应用程序,以此来自学如何在框架中进行开发。
我使用PHP和Yii作为后端,将RESTful数据发送回angular应用程序。我知道我可以使用NodeJS,但没有足够的经验,希望先学习angular。
在我的应用程序的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);
});
}
服务器每次都会进行无限循环,检查message
表和user
表(加入会话表以确保它们已登录)的date_updated 是否有更改
当消息或用户表发生更改时(稍后可能会有更多更改),它会通过JSON传递记录,然后将它们添加到$scope.messages和$scope.users中,以便在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存储为key:value对象,以便以后可以引用它们。
由于这是我的第一个正确的Angular应用程序,我相信有些事情我可以做得更好。我想知道的一件事是,当服务器发送数据更改时,有一种更好的方法可以接收这些更改。我最初向服务器发出多个长轮询请求(一个用于消息,一个用于用户),但现在只有一个请求可以减少流量和服务器负载,这也意味着据我所知,我不能使用Angular的$resource功能?
你能告诉我哪些地方可以改进吗?这里什么是好的做法/坏的做法?
感谢
您可能希望将轮询逻辑移动到服务并将事件广播到控制器。
使用Node.js+socket.io