はじめに
今回サーバサイドはrails、フロントエンドはvue.jsでリアルタイム双方向通信を扱ったものを作る機会があり、websocket,Socket.ioについて再学習したので、忘備録兼、僕と同じようにWebSocket、Socket.ioを知りたい方へ情報のシェアをするために投稿させてもらいます。
実は前にも趣味でwebsocket、Socket.ioに触れて簡単にコーディングした機会もあったんですが、当時の理解が浅い＋すっかり内容を忘れていたので、今回は復習です。
当方浅学なため、もし間違っていたりしたら、ご指摘お待ちしております。
リアルタイム双方向通信
基本的にwebアプリケーションというのは、http通信でクライアントとサーバー間でリクエストとレスポンスによって情報をやりとりしています。つまり、クライアント側からサーバー側にアクセスして情報を読み込むしかなく、例えばチャットやネットワークゲーム等のリアルタイム性、双方向性が必要なものは実現に工夫が必要でした。
###ポーリング
大昔はリアルタイム双方向通信を実現させるためにはポーリングという技術を使っていました。
例えば、Ajax等でms単位で定期的にサーバーにアクセスして情報を引っ張ってくるなど手法がポーリングになります。
しかし、サーバーに変化がなくとも強制的かつ頻繁にアクセスを繰り返すため、ネットワーク帯域とサーバリソースを無駄に消費してしまい、また同時にアクセスしているユーザー数が多くなると、サーバーが負荷に対応できずパンクしてしまう、という問題が発生してしまいます。
###websocket
上記のようにHTTP通信だけだとリアルタイム双方向通信はしんどいよね、という事で登場したのがWebSocketというJavaScriptからサーバーとの双方向通信を行うためのプロトコルです。
実現にはTCP通信を使っています（最初のハンドシェイクのみHTTP通信）。
具体的には以下の流れで実現しています
- HTTP 通信でクライアントからサーバーにリクエストを送ってコネクションを確立する。（ハンドシェイクと表現される）
- それ以降はサーバーとクライントを接続しっぱなしにして、TCP により双方向通信。
サーバから情報のプッシュができるため通信コストが低くリアルタイム性が高いこと、またTCPを使っているため軽量なことが特徴なプロトコルです。
railsにおいてはActionCableというWebSocketとRailsのその他の部分をシームレスに統合するためのものが用意されており、これを使って実現します。
https://railsguides.jp/action_cable_overview.html
###socket.io
以上のようにリアルタイム双方向通信を実現する技術は（他にもロングポーリング, ストリーミング等)色々あるのですが、これら「複雑なリアルタイムWeb技術の実装方式を隠蔽し、すべてのブラウザ・モバイルデバイスでリアルタイム通信を可能とすること」を目的に開発されているnode.js用サーバー側ライブラリとブラウザ用JavaScriptライブラリのセットがsocket.ioです。
ブラウザの種類やユーザーのPC環境などの違いを吸収して、データの双方向通信の開発を強力にサポートしてくれるも、と表現して良いかと思います。
以上がwebscoket,socket.ioの大まかな概要です。