Yuri’s Tech Note

技術系アウトプット

WebSocketを使ってリアルタイムチャットアプリを作った

 Reactの勉強の一環としてWebSocketを用いたリアルタイムチャットアプリを作った。

 

使用ライブラリ

Express

Socket.IO

リアルタイムな双方向通信を可能にするNode.jsライブラリとブラウザ用ライブラリのセット

 

WebSocket

サーバーとクライアントの双方向通信を可能にする技術。

ウェブ ブラウザとサーバー間に「ソケット」接続を確立する API を定義してあり、クライアントとサーバーの間に持続的接続が存在するためどちらの側からでもいつでもデータの送信を開始できる。

主にHTMLで書かれた文書を転送するためのプロトコルであるHTTPでは双方向の通信ができなかったために生み出された。

この時、一定間隔でサーバに問い合わせをし続けるポーリングやサーバで発生したイベントをクライアントからの要請なしにクライアントに送信することができる技術であるCometなどを使ってどうにかHTTPでクライアントとサーバ間の双方向通信を実現しようという動きもあった。

 

WebSocket通信の確立

HTTP通信によりハンドシェイクを行うことで通信を確立させる。

リクエス

HTTPのUpgradeヘッダを使用し、プロトコルの変更を行う。

レスポンス

ステータスコード101「Switching Protocols」が返る。
これによりハンドシェイクによってコネクションが確立し、これ以降はHTTPではなくWebSocketのプロトコルで通信が行われることになる。

 

github.com