Zenn
📚

【イラスト付き】WebSocket【利用方法】

2024/09/04に公開
JavaScript
WebSocket
tech

はじめに

皆さんこんにちは。
今回はWebSocketをご紹介します。

WebSocketはリアルタイム通信が可能なプロトコルです。今回はWebSocketの基本的な使い方について扱います。

こんな人にオススメ

  • WebSocketの概要が知りたい
  • WebSocketの書き方が知りたい

初めて学習する方にも分かるように、要点を絞って丁寧に解説していきます。

😋 WebSocketの全体像をご紹介します♪

WebSocketとは

まずポイントをチェック

  • リアルタイム通信が可能
  • クライアントとサーバーの永続的接続
  • クライアントとサーバーの双方向通信

WebSocketはリアルタイム通信を可能とするプロトコルです。クライアントとサーバー間を永続的に接続し、双方向での通信を可能とします。URLの形式は「ws://」です。「wss://」はhttpsのように暗号化された接続です。

WebSocketはHTTPのようにクライアントからリクエストすることなく、サーバー主導でクライアントにデータを送信することができます。これによりWebSocketサーバーに接続した複数のクライアントに対して同時にデータを送信することができます。リアルタイムなやり取りが重要な場合に便利です。

🍕 例えば、チャットアプリケーションでクライアントAが「Hello」と送ればクライアントBCDそれぞれに「Hello」が一斉に送信されます。この時クライアントBCDはサーバーにリクエストすることなく、サーバーからデータが送信されます。

😋 WebSocketはリアルタイム通信が可能です♪

クライアントのコード例

まずポイントをチェック

  • 【接続】WebSocketコンストラクタ
  • 【送信】sendメソッド
  • 【受信】messageイベント

WebSocket利用のコード例をご紹介します。

【接続】WebSocketコンストラクタ

まずはWebSocketサーバーと接続をします。接続はWebSocketコンストラクタで行います。引数で接続先URLを指定します。戻り値はWebSocketオブジェクトです。

const webSocket = new WebSocket('ws://localhost:3000');

接続は非同期で行われます。接続が確立するとWebSocketオブジェクトでopenイベントが発生します。失敗するとerrorイベントが発生します。

webSocket.addEventListener('open', () => {
    console.log('接続成功');
});

【送信】sendメソッド

データの送信はsendメソッドを使います。引数に送信するデータを指定します。送信可能なデータは文字列、 Blob、 ArrayBufferのいずれかです。

webSocket.send('{"message":"send data"}');

【受信】messageイベント

データを受信するとmessageイベントが発生します。eventオブジェクトのdataプロパティにデータが格納されています。

webSocket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    alert(data.message);
});
サンプルコード全体像（websocket-sample/01.websocket-simple/public/javascripts/app.js）

const webSocket = new WebSocket('ws://localhost:3000');

webSocket.addEventListener('open', () => {
    console.log('接続成功');
    webSocket.send('{"message":"send data"}');
});

webSocket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    alert(data.message);
});

webSocket.addEventListener('error', (event) => {
    console.log('error');
});

webSocket.addEventListener('close', (event) => {
    console.log('close');
});

😋 WebSocketオブジェクトを通して操作します♪

チャットの例

まずポイントをチェック

  • ユーザー名とメッセージをWebSocketで送信
  • 受信したユーザー名とメッセージを画面表示

簡単なチャット例をご紹介します。

アプリ起動時にWebSocketサーバーに接続しています。送信ボタン押下でメッセージを送信しています。データ受信時はmessageイベントのイベントリスナーで、受け取ったメッセージを画面表示しています。複数のタブで確認をするとチャットをイメージしやすくなっています。

サンプルコード全体像（websocket-sample/02.websocket-chat/public/javascripts/app.js）

const webSocket = new WebSocket('ws://localhost:3000');

webSocket.addEventListener('message', (event) => {
    const chatArea = document.getElementById('chat-area');
    const data = JSON.parse(event.data);
    chatArea.innerHTML += `<h3>${data.user}:${data.message}</h3>`;
});

const sendBtn = document.getElementById('send-btn');
sendBtn.addEventListener('click', () => {
    const user = document.getElementById('user').value;
    const message = document.getElementById('message').value;
    webSocket.send(JSON.stringify({ user, message }));
});

😋 複数クライアントから接続するとわかりやすいです♪

【おまけ】サーバーサイドのコード例

まずポイントをチェック

  • Node.jsを利用
  • wsパッケージを利用

まずはwsパッケージをインストールします。

npm i ws

WebSocket部分の抜粋（websocket-sample/02.websocket-chat/bin/www）

// WebSocket関連のクラスや関数をwsオブジェクトとして取得
const ws = require('ws');
// ws"モジュールからWebSocketServerクラスを取得
const WebSocketServer = ws.WebSocketServer;

// WebSocketServerのインスタンスを作成
// noServerオプション：この時点ではまだWebSocketサーバーは立ち上がっておらず、
// 別途サーバーオブジェクトとの結びつけを行う
const wsServer = new WebSocketServer({ noServer: true });

// WebSocketクライアントが接続してきた時にこのコールバックが実行される
wsServer.on('connection', function (websocket) {
  // WebSocketクライアントからメッセージを受信した時の処理を定義
  websocket.on('message', message => {
    // 受信したメッセージをJSオブジェクトとして取得
    const receivedData = JSON.parse(message.toString('utf-8'));
    // 接続中の全てのクライアントに対して送信（送信元クライアントも含む）
    wsServer.clients.forEach(client => {
      if (client.readyState === ws.OPEN) {
        client.send(JSON.stringify(receivedData));
      }
    });
  });
  // エラー時の処理
  websocket.on('error', error => {
    console.error(error);
  });
});

// WebSocketのアップグレード処理
server.on('upgrade', function upgrade(request, socket, head) {
  wsServer.handleUpgrade(request, socket, head, function done(ws) {
    wsServer.emit('connection', ws, request);
  });
});

😋 サーバー側もWebSocketに対応する必要があります♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

WebSocketについて確認をしていただきました。
HTTPとは異なりサーバー主導でデータの送信が可能です。
チャットのようなリアルタイム性が重要な場合に便利ですので、必要に応じて思い出せるように知っておきましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

WebSocket：https://developer.mozilla.org/ja/docs/Web/API/WebSocket
WebSocket API (WebSockets)：https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API
WebSocket クライアントアプリケーションの記述：https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
WebSocket サーバーの記述：https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
プロトコルのアップグレードメカニズム：https://developer.mozilla.org/ja/docs/Web/HTTP/Protocol_upgrade_mechanism

参考リンク集（web.dev のリンク）

Introducing WebSockets – Bringing Sockets to the Web：https://web.dev/websockets-basics/
Case Study – Real-time Updates in Stream Congress：https://web.dev/sunlight-streamcongress/

参考リンク集（その他 のリンク）

WebSocket：https://ja.javascript.info/websocket
WebSockets Living Standard：https://websockets.spec.whatwg.org/
websockets/ws：https://github.com/websockets/ws

参考リンク集（サンプルコード）

websocket-sample（GitHub）：https://github.com/ChanCode-Sample/JavaScript-API/tree/main/websocket-sample

Discussion