php - Angular 聊天室 Web 应用程序

Question

我是 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 表(连接到 session 表以使确保他们已登录)

当消息或用户表发生变化时(以后可能会有更多)，它通过 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 都存储为键:值对象，以便稍后引用它们。

因为这是我的第一个合适的 Angular 应用程序，所以我确信我可以做得更好。我想知道的一件事是在服务器发送数据更改时接收数据更改的更好方法。我最初是向服务器发出多个长轮询请求(一个用于消息，一个用于用户)但现在它只是一个可以减少流量和服务器负载的请求，这也意味着我目前无法使用 Angular 的 $resource 功能据我所知？

您能告诉我哪些地方可以改进，哪些地方被认为是好的做法/坏的做法？

谢谢

Answer 1

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

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