【JS応用｜豆知識】リアルタイム通信の要！WebSocket.prototype.sendを正しく使いこなす

導入

Webアプリケーションでリアルタイムなやり取りを実現するために欠かせないのがWebSocketです。その中でも「WebSocket.prototype.send」は、クライアントからサーバーへデータを送信するための最も重要なメソッドです。このメソッドを理解することで、チャットアプリやリアルタイム通知、株価ボードのような低遅延なアプリケーションを構築する際のデータ送信の課題を解決できます。

基礎知識

WebSocketとは、一度接続を確立すれば双方向の通信が可能になるプロトコルです。HTTPとは異なり、サーバーからプッシュ通知を送ることも容易です。
WebSocket.prototype.sendメソッドは、確立されたコネクションを通じてデータを送信します。送信できるデータ型は「文字列（String）」だけでなく、「バイナリデータ（BlobやArrayBuffer）」もサポートしており、効率的なデータ転送が可能です。注意点として、接続が完了する前にsendを呼び出すとエラーになるため、readyStateの状態確認が不可欠です。

実装/解決策

実装の基本は、まずWebSocketオブジェクトをインスタンス化し、onopenイベントで接続を確認してからsendを呼び出すという流れです。
また、送信データの形式をJSONにすることで、複雑な構造のデータもやり取りしやすくなります。サーバー側で適切に解析できるよう、送受信のフォーマットを事前に決めておくのが現場での定石です。

サンプルプログラム

以下のコードは、WebSocketで接続を確立し、JSONデータを送信する基本的な実装例です。

// WebSocketの接続先URL
const socket = new WebSocket('ws://example.com/socket');

// 接続が確立された時に実行されるイベント
socket.onopen = (event) => {
  console.log('接続成功');

  // 送信するデータオブジェクト
  const messageData = {
    type: 'chat',
    content: 'こんにちは、サーバーさん！',
    timestamp: Date.now()
  };

  // JSON形式に変換して送信
  // WebSocket.prototype.sendは文字列またはバイナリを受け取ります
  socket.send(JSON.stringify(messageData));
};

// メッセージ受信時の処理
socket.onmessage = (event) => {
  console.log('サーバーからのメッセージ:', event.data);
};

// エラーハンドリング
socket.onerror = (error) => {
  console.error('WebSocketエラー:', error);
};

応用・注意点

現場でよくある失敗は、ネットワークの瞬断による接続切れを考慮していないことです。接続が切れた状態でsendを実行すると例外が発生するため、再接続（Reconnection）ロジックを組み込むことが重要です。
また、一度に巨大なバイナリデータを送信するとメインスレッドがブロックされる可能性があるため、大きなファイル送信時は分割して送るか、Blobオブジェクトを活用することをお勧めします。常にreadyStateを確認し、接続状態がOPENであるかをチェックする防御的なコードを心がけましょう。