2

私はAngularの初心者で、フレームワークでの開発方法を独学する方法としてチャットルームアプリケーションを構築しようとしています.

バックエンドに PHP と Yii を使用して、RESTful データを角度付きアプリケーションに送り返しています。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);
    });
}

messageサーバーは、date_updatedテーブルとテーブルの両方に変更があるかどうかを確認するたびに無限ループを実行しuserます (セッション テーブルに参加して、ログインしていることを確認します)。

メッセージまたはユーザー テーブルに変更が発生すると (後で追加される可能性があります)、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>

$scope.messages と $scope.users の両方を key: value オブジェクトとして格納しているため、後で参照できるように、「getArray()」関数はデータを配列に変換するだけです。

これは私の最初の適切な Angular アプリケーションであるため、もっとうまくできることがあると確信しています。私が疑問に思っていることの 1 つは、サーバーがデータの変更を送信したときにデータの変更を受け取るためのより良い方法です。私は元々、サーバーに対して複数の長いポーリング リクエスト (メッセージ用とユーザー用) を作成していましたが、現在はトラフィックとサーバーの負荷を軽減する 1 つのリクエストにすぎません。これは、Angular の $resource 機能を今のところ使用できないことも意味します。私の知る限り？

何が改善できるか教えていただけますか?ここで良いプラクティス/悪いプラクティスと見なされるものは何ですか?

ありがとう

4

1 に答える 1

0

ポーリング ロジックをサービスに移動し、イベントをコントローラーにブロードキャストすることができます。

Node.js + socket.io を使用することで、これを大幅に簡素化できます。

于 2013-02-05T23:09:07.583 に答える