WebSocketでリアルタイム通信を実装！Node.jsを使ったWebサーバーの構築方法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptとNode.jsの基本的な知識があるWeb開発者を対象にしています。特にリアルタイム通信を実現したいと考えている方、WebSocket技術に興味がある方に向けています。本記事を読むことで、Node.jsを使ったWebSocketサーバーの構築方法、基本的なクライアント側の実装、そして簡単なチャットアプリケーションの作成方法がわかるようになります。また、セキュリティ対策やパフォーマンスチューニングといった実践的なテクニックも学べます。WebSocketを活用したWebアプリケーション開発の第一歩として、ぜひご活用ください。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識（変数、関数、イベントハンドリングなど） - Node.jsの基本的な理解（npmの使用、基本的なモジュールの利用） - HTTP通信の基本的な概念 - 非同期処理に関する知識（Promiseやasync/await）

WebSocketの基本概念とその重要性

WebSocketは、単一のTCP接続上で全二重通信を可能にする通信プロトコルです。従来のHTTP通信がリクエスト・レスポンス型の半二重通信であるのに対し、WebSocketはサーバーとクライアント間に持続的な接続を維持し、どちらからでもデータを送受信できます。この特性により、リアルタイムチャット、オンラインゲーム、株価表示、通知システムなど、即時性が求められる多くのWebアプリケーションで活用されています。

WebSocketの接続確立には、まずクライアントからHTTPリクエストを送信し、サーバー側でこれをWebSocketプロトコルへのアップグレードを許可するレスポンスを返す「ハンドシェイク」プロセスが行われます。この接続が確立されると、クライアントとサーバーは自由にメッセージを交換できるようになります。Node.js環境では、WebSocketを扱うための優れたライブラリが多数存在し、手軽にリアルタイム通信を実現できます。

Node.jsを使ったWebSocketサーバーの構築

Node.jsは、非同期I/Oを得意とするイベント駆動型のJavaScriptランタイムであり、WebSocketのようなリアルタイム通信アプリケーションに非常に適しています。ここでは、Node.jsとWebSocketライブラリ「ws」を使って、基本的なWebSocketサーバーを構築する方法をステップバイステップで解説します。

ステップ1：開発環境の準備

まず、Node.jsとnpmがインストールされていることを確認します。インストールされていない場合は、公式サイトからインストールしてください。

次に、プロジェクト用のディレクトリを作成し、npmを初期化します。

mkdir websocket-server
cd websocket-server
npm init -y

WebSocketライブラリ「ws」をインストールします。

npm install ws

ステップ2：基本的なWebSocketサーバーの実装

以下のコードで基本的なWebSocketサーバーを実装します。

Javascript

const WebSocket = require('ws');

// WebSocketサーバーの作成（ポート3000で待機）
const wss = new WebSocket.Server({ port: 3000 });

// クライアント接続時の処理
wss.on('connection', (ws) => {
  console.log('クライアントが接続しました');

  // クライアントからメッセージを受信した時の処理
  ws.on('message', (message) => {
    console.log(`クライアントから受信: ${message}`);

    // クライアントにメッセージを返信
    ws.send(`サーバーからの返信: ${message}`);
  });

  // クライアントが切断した時の処理
  ws.on('close', () => {
    console.log('クライアントが切断しました');
  });
});

console.log('WebSocketサーバーがポート3000で起動しました');

このコードを実行するには、ファイルを保存（例：server.js）し、以下のコマンドを実行します。

node server.js

これで、ポート3000でWebSocketサーバーが起動します。

ステップ3：クライアント側の実装

次に、WebSocketサーバーと通信するためのクライアント側のHTMLファイルを作成します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocketクライアント</title>
</head>
<body>
  <h1>WebSocketクライアント</h1>
  <input type="text" id="messageInput" placeholder="メッセージを入力">
  <button id="sendButton">送信</button>
  <div id="messageArea"></div>

  <script>
    // WebSocketサーバーに接続
    const ws = new WebSocket('ws://localhost:3000');

    // 接続時の処理
    ws.onopen = () => {
      console.log('サーバーに接続しました');
      showMessage('サーバーに接続しました');
    };

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

    // エラー発生時の処理
    ws.onerror = (error) => {
      console.error(`WebSocketエラー: ${error}`);
      showMessage('エラーが発生しました');
    };

    // 接続切断時の処理
    ws.onclose = () => {
      console.log('サーバーから切断しました');
      showMessage('サーバーから切断しました');
    };

    // メッセージ送信処理
    document.getElementById('sendButton').addEventListener('click', () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;

      if (message) {
        ws.send(message);
        messageInput.value = '';
      }
    });

    // メッセージ表示処理
    function showMessage(message) {
      const messageArea = document.getElementById('messageArea');
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      messageArea.appendChild(messageElement);
      messageArea.scrollTop = messageArea.scrollHeight;
    }
  </script>
</body>
</html>

このHTMLファイルをブラウザで開き、テキストボックスにメッセージを入力して「送信」ボタンをクリックすると、サーバーとクライアント間でメッセージのやり取りができます。

ステップ4：複数クライアント対応とブロードキャスト機能

次に、接続している全クライアントにメッセージを送信するブロードキャスト機能を実装します。server.jsを以下のように修正します。

Javascript

const WebSocket = require('ws');

// WebSocketサーバーの作成（ポート3000で待機）
const wss = new WebSocket.Server({ port: 3000 });

// 接続している全クライアントの配列
const clients = [];

// クライアント接続時の処理
wss.on('connection', (ws) => {
  console.log('クライアントが接続しました');

  // クライアントを配列に追加
  clients.push(ws);

  // クライアントからメッセージを受信した時の処理
  ws.on('message', (message) => {
    console.log(`クライアントから受信: ${message}`);

    // 接続している全クライアントにメッセージをブロードキャスト
    clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`全員に送信: ${message}`);
      }
    });
  });

  // クライアントが切断した時の処理
  ws.on('close', () => {
    console.log('クライアントが切断しました');

    // クライアントを配列から削除
    const index = clients.indexOf(ws);
    if (index !== -1) {
      clients.splice(index, 1);
    }
  });
});

console.log('WebSocketサーバーがポート3000で起動しました');

この修正により、どのクライアントからメッセージが送られても、そのメッセージが接続している全クライアントに送信されるようになります。

ステップ5：ルーティング機能の実装

より実践的なアプリケーションでは、メッセージの種類によって処理を分けるルーティング機能が必要になります。以下に、メッセージにタイプを付けて処理を分ける例を示します。

Javascript

const WebSocket = require('ws');

// WebSocketサーバーの作成（ポート3000で待機）
const wss = new WebSocket.Server({ port: 3000 });

// 接続している全クライアントの配列
const clients = [];

// クライアント接続時の処理
wss.on('connection', (ws) => {
  console.log('クライアントが接続しました');

  // クライアントに一意のIDを割り当て
  const clientId = Date.now();
  ws.clientId = clientId;

  // クライアントを配列に追加
  clients.push(ws);

  // クライアントにIDを通知
  ws.send(JSON.stringify({
    type: 'id',
    data: clientId
  }));

  // 接続しているクライアント一覧を全クライアントに送信
  sendClientList();

  // クライアントからメッセージを受信した時の処理
  ws.on('message', (message) => {
    try {
      const parsedMessage = JSON.parse(message);

      switch (parsedMessage.type) {
        case 'chat':
          // チャットメッセージを全クライアントにブロードキャスト
          clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
              client.send(JSON.stringify({
                type: 'chat',
                from: clientId,
                data: parsedMessage.data
              }));
            }
          });
          break;

        case 'private':
          // プライベートメッセージを特定のクライアントに送信
          const targetId = parsedMessage.to;
          clients.forEach(client => {
            if (client.clientId === targetId && client.readyState === WebSocket.OPEN) {
              client.send(JSON.stringify({
                type: 'private',
                from: clientId,
                data: parsedMessage.data
              }));
            }
          });
          break;

        default:
          console.log(`不明なメッセージタイプ: ${parsedMessage.type}`);
      }
    } catch (error) {
      console.error('メッセージ解析エラー:', error);
    }
  });

  // クライアントが切断した時の処理
  ws.on('close', () => {
    console.log(`クライアント(${clientId})が切断しました`);

    // クライアントを配列から削除
    const index = clients.findIndex(client => client.clientId === clientId);
    if (index !== -1) {
      clients.splice(index, 1);
    }

    // 接続しているクライアント一覧を全クライアントに送信
    sendClientList();
  });
});

// 接続しているクライアント一覧を送信する関数
function sendClientList() {
  const clientIds = clients.map(client => client.clientId);
  clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({
        type: 'clientList',
        data: clientIds
      }));
    }
  });
}

console.log('WebSocketサーバーがポート3000で起動しました');

ハマった点やエラー解決

WebSocketサーバーを構築する際によく遭遇する問題とその解決方法を以下に示します。

CORS（クロスオリジンリソースシェアリング）問題 ブラウザのセキュリティポリシーにより、異なるオリジン（ドメイン、ポート、プロトコルが異なる）からのWebSocket接続が制限されることがあります。

エラーメッセージ例: Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss'. 'http' is not allowed.

解決策: クライアント側で接続URLを正しい形式（ws://またはwss://）に修正します。 ```javascript // 間違い const ws = new WebSocket('http://localhost:3000');

// 正しい const ws = new WebSocket('ws://localhost:3000'); ```

接続が確立しない問題 ファイアウォールやプロキシサーバーがWebSocket接続をブロックしている場合があります。

解決策: - サーバー側で適切なポートが開放されているか確認 - 必要に応じて、プロキシサーバーの設定を変更 - wss（WebSocket Secure）を使用して、セキュアな接続を試みる

メッセージの文字化け メッセージを文字列として送信する場合、エンコーディングの問題で文字化けが発生することがあります。

解決策: メッセージを送受信する際に、必ずUTF-8エンコーディングを明示します。 ```javascript // サーバー側 ws.send(message, { 'encoding': 'utf8' });

// クライアント側 ws.send(message, { 'encoding': 'utf8' }); ```

メモリリーク クライアントが切断した際に、接続情報を適切に解放しないとメモリリークが発生します。

解決策: クライアントの切断イベントを正しく処理し、接続情報をクリーンアップします。 javascript ws.on('close', () => { // 接続情報を解放する処理 cleanupConnection(ws); });

解決策

上記の問題を解決するためのベストプラクティスを以下に示します。

接続管理の強化 接続しているクライアントの情報を適切に管理し、接続が切断された際にリソースを解放する仕組みを実装します。
エラーハンドリングの実装 各イベントハンドラ内で適切なエラーハンドリングを実装し、予期せぬエラーによるサーバー停止を防ぎます。
ログの記録 接続、切断、メッセージの送受信などのイベントをログに記録し、問題発生時のデバッグを容易にします。
セキュリティ対策 - クライアント認証の実装 - メッセージのバリデーション - WSS（WebSocket Secure）の使用
負荷分散 高負荷が予想される場合は、Node.jsクラスタリングや、Socket.IOのようなライブラリを使用したロードバランシングを検討します。

まとめ

本記事では、Node.jsとWebSocketライブラリ「ws」を使ったリアルタイム通信サーバーの構築方法について解説しました。基本的なWebSocketサーバーの実装から、複数クライアント対応、ルーティング機能までステップバイステップで説明し、さらに実装中によく遭遇する問題とその解決策も紹介しました。WebSocketを活用することで、チャットアプリケーション、リアルタイムダッシュボード、オンラインゲームなど、即時性が求められるWebアプリケーションを簡単に実装できます。次のステップとして、認証機能の追加や、Socket.IOのような高機能ライブラリの利用など、さらに高度な機能の実装に挑戦してみてください。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

WebSocketでリアルタイム通信を実装！Node.jsを使ったWebサーバーの構築方法💬