Archon-First Note

まだ始めたばっかり。自分の頭の中身を外部に吐き出す場所。

リアルタイムWEBアプリの実現方法をざっくりと（AjaxやWebSoketなど）

JavaScript-中級編-

リアルタイムWEBアプリ（Ajax）

GetとPost、FormをSubmitボタンで画面遷移...Webページを作る時の基本だが、 これだけの知識ではチャットアプリやチャート表示のようなリアルタイムなWEBアプリは作成できん。 なんらかの方法で、サーバPushで双方向通信を実現する必要がある。

以上の課題について、 「ググることができるようになれば良い。」という観点からまとめるぞい！

フツーのHTTPプロトコル通信

クライアントがサーバに対しRequestを送ると、サーバはResponseを返す。 上記手順の完了または、タイムアウトが発生した場合、接続を閉じる。 TCPの80番ポートを使う。

Ajax

Ajax（Asynchronous JavaScript + XML ）は、非同期通信を行いながら画面構築を行うアプローチのこと。 つまり、ポーリングなどのこと全般を示す。 ユーザから見たらポーリングでもSSEでもあんまり変わらんよね。ってこと。 XMLHttpRequest (XHR)というJavaScriptのオブジェクトを使って、受信データをXML形式としてサーバにRequestを送る。

Comet

Ajax + ロングポーリングの合わせ技。 Ajaxはクライアントの都合でシームレスに画面を書き換えることが主旨だった。 CometはサーバーからのPush通知という機能も付けようぜ！っていう感じ。 でも、俺の周囲のエンジニアは、Ajaxって言葉に含めちゃっている感ある。

ポーリング

ちょくちょくサーバを見に行くスタイル。もっとも原始的だが、まだ広く使われる技。 例えば3秒ごとにRequest/Response通信をする。 Clientは定期的にServerに接続する。 通信負荷が激増する。

ロングポーリング

すぐにResponseせず、タイムアウトしないくらいの長さでサーバで待機しておくスタイル。 例えば原則10秒ごとにResponseを返す。しかし、DB変更があれば即時にResponseを返すという感じ。 弱点は、Response処理中にもう一個ResponseしたいEventが発生した時に対応できず、 次のタイミングまで待つことになること。

Server-sent events(SSE)

HTTP/1.1のChunked形式の通信機能を使って、少しずつ送信し続けるスタイル。 ポーリングと違って、Content-Lengthもない、サーバから通信が切断されない。再接続コストがかからない。 定期的に何かのデータを送らないと、ブラウザやリバースプロキシが通信を切断したり、Herokuがタイムアウトする。

WebSoket

上記までのお話は、HTTPプロトコルというものを使っていたが、 こちらはWebSocketプロトコルという新しい通信方式を使う。（2011年頃できた） 「サーバからのPush通信を行う」ために新しく作られた、 サーバからも通信要求可能という仕様。

まったく新しい概念なので設計・プログラミングが変わってしまう。 ちゃんとした正規のテンプレソースを見つけて全体を流用しよう。適当なブログやQitaを鵜呑みにするのは危険。 探せ！！ベストプラクティス。

例えば、コネクションを張り続けているため、切断時に終了処理を記述する必要ありとか 欠損やサーバで処理される順序の入れ替わりが起こった場合に影響を与えないコーディングとか。

インフラ回りにも影響を与える。 HTTPと同じ80番ポートを使用した場合、動作が不安定になるので443番ポート（wss://）で接続することが推奨。 セキュリティ面については、Same-origin policyが無いため、Content-Security-Policyヘッダなどを使い、クロスサイトスクリプティングの対策とする。 この辺はあまり詳しくないし、まだ成長中なので、「WebSoket 注意　落とし穴　失敗例　デメリット」などで検索するべし。

参考（サンプルソース）

リアルタイムWeb時代がやってくる！作ってわかったWebSocketとSSEの違い https://www.webprofessional.jp/real-time-apps-websockets-server-sent-events/

リアルタイムなwebアプリを実現する方法(ポーリング、Comet、Server Sent Events、WebSocket) http://kimulla.hatenablog.com/entry/2016/01/17/%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AAweb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%28%E3%83%9D%E3%83%BC%E3%83%AA%E3%83%B3