web-dev-qa-db-ja.com

AngularJSとWebSocketを超えて

私はこれを読んだだけです post 、そして私は違いが何であるかを理解しています。しかし、私の頭の中にはまだ疑問があります。同じアプリ/ウェブサイトで使用できますか？ AngularJsにコンテンツを取得してページを更新させ、REST apiとそのすべてのものに接続します。しかし、それに加えてリアルタイムチャット、またはイベントをトリガーしたいとも考えます更新またはメッセージが受信されたときに他のクライアントで。

Angularはそれをサポートしますか？または、これらのイベントをトリガーするためにSocket.ioのようなものを使用する必要がありますか？両方を使用する意味がありますか？両方を一緒に使用する目的がある場合。

私が十分に明確であることを願っています。助けてくれてありがとう。

javascriptangularjswebsocketsocket.io
22
Diogo Barroso

JavascriptはWebSocketをサポートしているため、使用するために追加のクライアント側フレームワークは必要ありません。これをご覧ください $ connection service これで宣言されています WebSocketベースのAngularJSアプリケーション 。

基本的にメッセージを聞くことができます：

   $connection.listen(function (msg) { return msg.type == "CreatedTerminalEvent"; }, 
        function (msg) {
            addTerminal(msg);
            $scope.$$phase || $scope.$apply();
   });

一度聞く（要求/応答に最適）：

    $connection.listenOnce(function (data) {
        return data.correlationId && data.correlationId == crrId;
    }).then(function (data) {
        $rootScope.addAlert({ msg: "Console " + data.terminalType + " created", type: "success" });
    });

メッセージを送信します。

    $connection.send({
        type: "TerminalInputRequest",
        input: cmd,
        terminalId: $scope.terminalId,
        correlationId: $connection.nextCorrelationId()
    });

通常、WebSocket接続は双方向であり、 適切なサポートがあります であるため、要求/応答モデルでサーバーからデータを取得するためにも使用できます。次の2つのモデルを使用できます。

  • Publisher/Subscriber：クライアントがいくつかのトピックへの関心を宣言し、そのトピックを含むメッセージのハンドラーを設定し、サーバーがメッセージをパブリッシュ（またはプッシュ）する場所それが合うと思うときはいつでも。

  • リクエスト/レスポンス：クライアントがrequestID（またはcorrelationId）でメッセージを送信し、そのrequestIdに対する単一のレスポンスをリッスンします。

それでも、必要に応じて両方を持つことができ、データの取得にはRESTを、更新の取得にはWebSocketを使用します。

サーバー側では、WebSocketをサポートするバックエンドを使用するには、Socket.ioまたはサーバー側のフレームワークを使用する必要があります。

16
vtortola

リンクされた投稿の answer に記載されているように、Angularは現在Websocketsの組み込みサポートを備えていません。したがって、Websockets APIを直接使用する必要があります。または、Socket.ioのような追加のライブラリを使用します。

ただし、単一のREST=アプリケーションでAngular apiとWebsocketsの両方を使用する必要があるかどうかの質問に答えるために、アプリケーションのさまざまな部分に含まれる特定の機能のために、$ httpまたはBreezeJSなどの別のデータ層ライブラリを使用して、REST apiと対話するための標準XmlHttpRequestリクエストと、例：リアルタイムチャット）。

Angularは、このタイプのシナリオの処理を支援するように設計されています。典型的な解決策は、アプリケーションの機能を処理し、ページを更新する1つ以上のコントローラーを作成し、各データエンドポイントのデータ管理をカプセル化する個別のサービスまたはファクトリーを作成することです（つまりREST apiおよびリアルタイムチャットサーバー）、これらはコントローラーに挿入されます。

angularデータ接続を管理するためのサービス/ファクトリーの使用に関する多くの情報があります。Angularアプリケーションとデータサービスが適合する場所については、John-Papaの AngularJS Styleguide を確認することをお勧めします。これには Data Services のセクションが含まれます。

工場とサービスの詳細については、 AngularJS：ファクトリーの代わりにサービスを使用する場合 をチェックアウトできます。

7
JeremyE