これは「コードを書いていて困ったときに、suinがチャットで質問に答えたり相談に乗るsuinのプログラミング相談室(仮)」で頂いた質問と僕の回答の要約です。
質問
フロントエンドとバックエンドのリアルタイム通信の選択肢を教えて下さい。その長所短所も知りたいです。
僕の回答
こんにちは。
フロントエンドとバックエンドのリアルタイム通信の選択肢についての質問ですね。
通信方法の選択肢についてご回答します。
1. AJAXポーリング
この方式は、GETリクエストなどをAJAXで数秒間隔などでバックエンドに投げ、もしレスポンスのデータに変化があったら、それをフロントエンドに反映するという手法です。
ポーリングの長所は、AJAXが分かれば他に学ぶことがないという点です。実装もかんたんです。また、バックエンドのサーバやプログラミング言語の選択肢も広いです。
短所は、無駄な通信が発生しうるということです。更新があろうが無かろうがリクエストを投げ続けるからです。また、リアルタイム性を上げれば上げるほど通信頻度が増すので、ユーザ数が多い場合はサーバへの負荷が大きくなります。
2. WebSocket
この方式は、WebSocketという双方向リアルタイム通信を可能にするための一般的な方式です。チャットアプリやオンラインゲームなど、リアルタイム性が極めて重要なところに向いています。
長所は、リアルタイム性です。ひとたびフロントエンドとサーバサイドでWebSocketが接続されてしまえば、サーバが能動的にブラウザにデータを送信できます。また、多数のユーザ接続に対してもサーバへの負荷が少なくスケールしやすいです。
短所は、WebSocketの学習コストがあることです。WebSocketの開発経験がない場合、実装方法や認証方法、セキュリティなどを一から学ぶ必要があります。また、WebSocketに対応しているサーバやプログラミング言語を選ぶ必要があります。Apache+PHPではWebSocketはできず、Node.jsやJavaなどは対応しています。
3. Server-sent events(SSE)
この方式は、サーバからブラウザへデータをストリーミング配信する一方通行の通信方式です。WebSocketと同じくらいリアルタイム性があります。
長所は、リアルタイム性と実装のしやすさのバランスにあると思います。
学習コストはポーリングより高いですが、WebSocketよりは低いです。
SSEはWebSocketのように全く新しい概念ではなく、馴染み深いHTTP GETリクエストを利用して実装できるので、学びは最低限で済みます。
大抵のプログラミング言語で実装できます。サーバの選択肢もAJAX同様に広めです。
短所は、スケーラビリティです。HTTPコネクションを1つ以上専有することになりますが、ブラウザが同一ドメインに対して同時に保持できるコネクション数は数個と意外と少なく、SSEのコネクションを張りすぎると、ブラウザがサーバに一切リクエストが送れなくなるという問題が起きます。これを避けるためにSSE専用のサブドメインを作るといった解決策はあります。
また、短所として、SSEのライブラリがWebSocketと比べて少ないという点もあります。
以前に関連した記事を書いたことがあるのでご参考までにご覧ください:
サーバサイドpush技術としてのWebsocketとServer-sent eventsの特徴比較 - Qiita
・・・
いずれも一長一短なので、自分やチームのレベルに合ったものはどれか、プロダクトの要件として適合するのはどれか、という観点でサンプルコードを書いてみて検討してみることをおすすめします。
最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローお願いします
→Twitter@suin