Skip to content

Instantly share code, notes, and snippets.

@albatrosary

albatrosary/Web_Training_3_Sockets.md

Last active April 20, 2016 23:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save albatrosary/91c0cf5f2611fc6acb573e7077d8fba4 to your computer and use it in GitHub Desktop.
Save albatrosary/91c0cf5f2611fc6acb573e7077d8fba4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Web_Training_3_Sockets.md

WebSocket, WebRTC and Angular1

Angular

AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケーションを開発していく上で必要とされる機能が一通り揃っています。 Backbone.jsなどの場合は、最低限の機能しかしないため、不足する機能については、サードパーティ製のプラグインやライブラリと組み合わせて開発していくのが定石です。 一方、AngularJSでは、機能的な面でサードパーティ製のプラグインを導入することはほとんどありません。標準で用意されている機能だけでも充分な役割を果たしてくれます。 また、スクリーンショットにHTML enhanced(HTML拡張 ) とあるように、HTMLのような記述方法を採用しているのも大きな特徴です。

AngularJSの標準機能を挙げてみます。

  • 双方向データバインディング
  • シンプルなルーティング機能
  • HTML ベースのテンプレート機能
  • 非同期通信のサポート
  • 数多くのビルトインディレクティブ
  • フィルタ機能
  • Dependency Injectionによるモジュール管理
  • セキュリティ対策
  • テスト

などなど

他のフルスタックといわれるフレームワークでも、ここまで幅広く包括的に用意されているものはなかなかありません。 それゆえに、他のフレームワークに比べると、学習コストが高いとされています。 また、どんなフレームワークにも得意／不得意があります。フルスタックとはいえAngularJSも例に漏れません。 AngularJSが得意とすることは、CRUD系のアプリケーションや、ルーティング機能を活かしてのSPA(Single Page Application)などです。 CRUD系のアプリケーションというのは、Webサイトの管理画面、マイページなどが該当します。 他にもエンタープライズ向けのシステムもCRUD系アプリケーションの典型と言えるでしょう。 SPAで代表的なものは、ハイブリッドアプリ、Chrome Extension、Firefox OSアプリなどが該当します。 ただし、SPAの中でも、ゲームで用いるような派手なエフェクトや、canvasを利用してのグラフィック処理などは得意ではありません。 このようなケースで AngularJSを採用するのは控えた方がよいでしょう。

Angular1を触ってみる

https://github.com/albatrosary/Angular1Study

モダンWebを実現するために必要な通信技術

SPAのメリットのひとつに「サーバサイドとクライアントサイドをより疎結合にできる」ということが挙げられます。 通信技術の役割としては、非同期通信を活用することで疎結合が可能になります。

具体的には

  • AjaxやCometを利用した非同期通信
  • WebSocketを利用した非同期通信

が挙げられます。 現時点では、我々がアプリケーション開発を行う場合、HTTP1.1上でAjaxを使用するというのが一般的と言えます。 そしてクライアント同士のサーバレス通信、つまりブラウザ同士のリアルタイム通信（WebRTC：Web Real time Communication）も実現可能となっています。 また、次世代通信プロトコル(HTTP2.0)を業務アプリケーションに使用することで、システムのレスポンス向上が期待できます。

HTTP2.0の特徴は、以下が挙げられます。

  • HTTPヘッダーの圧縮
  • １つのTCコネクションで複数のストリームを扱える
  • TLSの拡張仕様であるNext Protocol Negotiationを利用
  • サーバプッシュ機能で通信効率化
  • ストリームには優先度をつけることが可能
  • 対応するためにWebコンテンツへの変更が不要
  • 採用実績が豊富
  • 効果が発揮できないサイトも有る

HTTP2.0はドメイン毎にコネクションを張るため、複数のドメインから画像などのリソースを取得する場合は、HTTP2.0を使ってコネクションをまとめても、処理速度が上がらないということもあり得ます。 また、効果的にチューニングできるように設定・設置する必要があります。

双方向通信実現のためにWebSocketを使用します。 WebScocketの場合は、プログラマブルにpushすることができることや、一つのコネクションで複数のコネクションをはるオーバヘッドをなくすことができます。

WebSocketの特徴は以下です。

  • クライアント側、サーバ側での実装が必要
  • TLSにてメッセージを暗号化するWSSが利用可能
  • WebSocket対応のサーバモジュールはSocket.IO、Apache Tomcat 7、Apache-websocket、GlassFish 3.1、Jetty 7、cowboyなどが存在します。

WebRTCはPeer Connectionを行う通信アーキテクチャです。 一対一でクライアント同士が通信を行う場合、事前にお互いのIPとポート番号が必要となりますので、シグナリングと呼ばれる仲介サーバが必要になります。

WebRTCの特徴は以下です。

  • Signaling
  • MediaChannel
  • DataChannel
  • NAT越え（ICE/STUN/TURN）

SPAをうまく構築するための技術要素の根幹は、HTML5です。 なので、HTML5をはじめとした新しい技術を活用する必要性が必然に出てきます。 HTML5の技術進歩に伴い、通信技術もかなりの速度で進歩しています。

Angular1 and Firebase を触っている

https://github.com/albatrosary/angular-firebase

WebRTC を触ってみる

入門編

https://github.com/albatrosary/skyway

応用編

https://github.com/albatrosary/webrtc_handson

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment