Angular聊天室Web应用程序


Angular Chatroom Web App

我是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