2

我是 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 功能我所知？

你能告诉我有什么可以改进的吗？什么是好的做法/坏的做法？

谢谢

4

1 回答 1

0

您可能希望将轮询逻辑移动到服务并将事件广播到控制器。

您可以通过使用 Node.js + socket.io 来显着简化这一点

于 2013-02-05T23:09:07.583 回答