JavaScript/WebSocket

WebSocketオブジェクトは、JavaScriptでリアルタイム通信を実現するために使用されるオブジェクトです。WebSocketプロトコルを利用して、ブラウザとサーバー間で双方向かつ低遅延の通信を行うことができます。

基本構文

WebSocketオブジェクトを使用するには、以下の基本構文を利用します。

const socket = new WebSocket(url, [protocols]);

パラメータ

  • url - 接続先のWebSocketサーバーのURL（例: ws://example.com/socket または wss://example.com/socket）。
  • protocols - （省略可能）1つまたは複数のサブプロトコルを指定する文字列または配列。

例

// WebSocketサーバーに接続
const socket = new WebSocket("ws://localhost:8080");

// 接続が開かれたときのイベント
socket.onopen = _ => {
    console.log("接続が確立されました");
    socket.send("Hello, Server!");
};

// メッセージを受信したときのイベント
socket.onmessage = event => {
    console.log("サーバーからのメッセージ:", event.data);
};

// 接続が閉じられたときのイベント
socket.onclose = event => {
    console.log("接続が閉じられました:", event.code, event.reason);
};

// エラーが発生したときのイベント
socket.onerror = error => {
    console.error("エラーが発生しました:", error);
};

プロパティ

WebSocketオブジェクトには、接続の状態や設定に関する以下のプロパティがあります。

  • socket.readyState - 接続の現在の状態を示します。
    • 0 - CONNECTING（接続中）
    • 1 - OPEN（接続済み）
    • 2 - CLOSING（接続終了中）
    • 3 - CLOSED（接続終了）
  • socket.protocol - 使用されているサブプロトコル。
  • socket.url - WebSocket接続に使用されているURL。
  • socket.bufferedAmount - 送信が保留されているバイト数。

例: 接続状態の確認

if (socket.readyState === WebSocket.OPEN) {
    console.log("接続は開かれています");
} else if (socket.readyState === WebSocket.CONNECTING) {
    console.log("接続中です");
} else {
    console.log("接続は閉じられています");
}

メソッド

WebSocketオブジェクトで使用できる主要なメソッドは以下の通りです。

send()

サーバーにデータを送信します。

socket.send("メッセージを送信します");

close()

WebSocket接続を閉じます。必要に応じて、終了コードと理由を指定できます。

socket.close(1000, "正常終了");

イベントハンドラ

WebSocketオブジェクトには、接続の状態や通信内容に応じて動作するイベントハンドラがあります。

onopen

接続が確立されたときに呼び出されます。

socket.onopen = _ => {
    console.log("接続が確立しました");
};

onmessage

サーバーからメッセージを受信したときに呼び出されます。

socket.onmessage = event => {
    console.log("受信メッセージ:", event.data);
};

onclose

接続が閉じられたときに呼び出されます。

socket.onclose = event => {
    console.log("接続が閉じられました:", event.code, event.reason);
};

onerror

エラーが発生したときに呼び出されます。

socket.onerror = error => {
    console.error("エラーが発生しました:", error);
};

使用例

以下は、WebSocketオブジェクトを使用したシンプルなチャットクライアントの例です。

const socket = new WebSocket("ws://localhost:8080");

// 接続時の処理
socket.onopen = _ => {
    console.log("チャットサーバーに接続しました");
    socket.send("こんにちは！");
};

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

// 接続終了時の処理
socket.onclose = _ => {
    console.log("接続が終了しました");
};

セキュリティの注意点

WebSocketを安全に使用するためには、以下の点に注意してください。

  • WSSを使用する: 暗号化された通信を行うためにwss://を使用します。
  • 認証の実施: サーバーとの通信前にユーザー認証を行うことで、不正アクセスを防ぎます。
  • 入力データの検証: クライアントから送信されたデータをサーバーで検証します。

まとめ

WebSocketオブジェクトを使用することで、リアルタイム性の高い双方向通信を簡単に実現できます。本記事を参考に、さまざまなアプリケーションでWebSocketの利点を活用してください。

カテゴリ:JavaScript カテゴリ:Web API カテゴリ:ネットワーキング カテゴリ:WebSocket
カテゴリ:JavaScript カテゴリ:WebSocket カテゴリ:Web API カテゴリ:ネットワーキング