WebSocketとは何か、そしてその仕組み

WebSocketは、クライアントとサーバー間の双方向通信を可能にするリアルタイム通信プロトコルであり、低遅延かつ高頻度のデータ更新が必要なアプリケーションに適しています。

WebSocketはどのように機能しますか？

WebSocketは、単一のTCP接続上での全二重通信のためのプロトコルです。クライアントとサーバー間に持続的な接続を確立し、双方向のリアルタイム通信を可能にします。WebSocketはHTTPプロトコルを使用してハンドシェイクを開始し、その後WebSocket接続にアップグレードされ、両者が直接データを送信できるようになります。この持続的な接続により、通信オーバーヘッドが削減され、サーバーはクライアントに対して積極的にデータをプッシュできるようになり、頻繁なクライアント主導のリクエストが不要になります。

WebSocketとHTTPの違い

オーバーヘッドの削減：WebSocketは従来のHTTP接続に比べてオーバーヘッドが少なく、各通信ごとに接続を繰り返し確立および切断する必要がないため、遅延を削減し、ネットワークリソースを節約します。
双方向通信：WebSocketはクライアントとサーバー間の同時双方向通信を可能にし、特にリアルタイムアプリケーションにおいて迅速なデータ転送と応答時間を実現します。
効率的なデータ交換：WebSocketはバイナリデータ転送をサポートしており、より効率的でコンパクトなデータ交換が可能で、マルチメディアストリーミング、ゲーム、および高速データ伝送を必要とするその他のアプリケーションに有益です。
低遅延：持続的な接続を維持することにより、各データ交換のために新しい接続を確立する際の遅延が削減され、より迅速で応答性の高い通信が実現されます。
サーバープッシュ機能：WebSocketは、クライアントがサーバーに対して継続的にポーリングする必要なく、サーバーがクライアントにデータをプッシュできるため、ネットワークリソースのより効率的な利用を促進し、不必要なデータ転送を削減します。

全体として、WebSocketのネットワークリソースの効率的な利用、遅延の削減、リアルタイムの双方向通信のサポートにより、さまざまなウェブベースのアプリケーションにおけるネットワーク最適化のための貴重なツールとなっています。

なぜWebSocketを使用するのか？

WebSocketは、低遅延かつ高頻度のデータ更新が必要なリアルタイムアプリケーションやサービスに使用されます。特に、リアルタイムチャット、オンラインゲーム、ライブスポーツ更新、金融取引プラットフォーム、共同編集ツールなどのアプリケーションに役立ちます。WebSocketは、従来のHTTPに比べてクライアントとサーバー間のより迅速かつ効率的な双方向通信を可能にし、これらのタイプのユースケースに特に適しています。

WebSocketサーバー（Node.js + ws）

const WebSocket = require('ws');
  
const wsk = new WebSocket.Server({ port: 8080 });
  
wsk.on('connection', ws => {
  ws.on('message', message => {
    console.log('クライアントから受信したメッセージ: %s', message);
      
    // クライアントメッセージに返信  
    ws.send(`私はサーバーで、あなたから受け取ったメッセージは: ${message} です`);  
  });  
  
  ws.on('close', () => {  
    console.log('クライアントが切断されました');  
  });

クライアント（JavaScript）

// WebSocket接続を作成  
var socket = new WebSocket("ws://localhost:8080");  
  
// 接続が開かれたときに行うこと  
socket.onopen = function(event) {  
  console.log("接続が開かれました");  
  // 初期化メッセージを送信
  socket.send("私はクライアントで接続しました！");  
};  
  
// サーバーデータを受信したときに行うこと  
socket.onmessage = function(event) {  
  console.log("サーバーから受信したデータ: " + event.data);  
};  
  
// 接続が閉じられたときに行うこと 
socket.onclose = function(event) {  
  console.log("接続が閉じられました");  
};  
  
// 接続エラーを処理する方法  
socket.onerror = function(error) {  
  console.log("エラーが発生しました: " + error);  
}

JavaScriptを使用したフロントエンド開発に加えて、Java、C++、Go、Python、PHP、Rustなどのプログラミング言語プラットフォームでもWebSocketを使用できます。

WebSocketリクエストの例

以下は、典型的なWebSocketハンドシェイクリクエストの例です：

GET /chat HTTP/1.1         // /chatエンドポイントへのGETリクエスト。
Host: example.com:8000     // WebSocketサーバーのドメインとポート。
Upgrade: websocket         // クライアントがアップグレードしたいプロトコル。
Connection: Upgrade        // クライアントが既存の接続を使用するのではなく、新しい接続を確立したいことをサーバーに伝える。
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==       // サーバーがこの要求を受け取ったことを証明するために、サーバーがデコードし、ハッシュ化して送り返すBase64エンコードされたランダム値。
Origin: http://example.com                        // クライアントリクエストの起源。
Sec-WebSocket-Protocol: chat, superchat           // 接続を作成するアプリケーションによって使用されるサブプロトコルを指定。
Sec-WebSocket-Version: 13                         // クライアントが使用したいWebSocketプロトコルのバージョン。

ハンドシェイクリクエストに対するサーバーの応答は以下の通りです：

HTTP/1.1 101 Switching Protocols    // リクエスト通りプロトコルが切り替えられることを示す。
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=     // 初期ハンドシェイクで送信されたSec-WebSocket-Keyを特定のGUIDと組み合わせてハッシュ化したもの。クライアントはこれを使用してサーバーがハンドシェイクを受け取ったことを確認できます。

結論