Chrome DevTools MCP経由でWebSocketを試してみる！

はじめに

Chrome DevTools MCPでWebSocketを試してみました。

クライアント側のログ(Claude Code)

> chrome-devtoolsを開始して下さい。 

⏺ Chrome DevToolsを開始するには、まずブラウザのページ一覧を確認します。
  ⎿  # list_pages response                                                                                  
     ## Pages
     0: about:blank [selected]

⏺ Chrome DevToolsが起動しました。現在、about:blankページが開いています。特定のURLに移動する場合は、navigate_p
  ageを使用できます。

> `ws://localhost:8080`宛に「こんにちは」を送信して下さい。 

⏺ WebSocketへの接続と送信には、JavaScriptを実行する必要があります。まずページでWebSocketスクリプトを評価しま
  す。

⏺ chrome-devtools - evaluate_script (MCP)(function: "async () => {\n  const ws = new
                                         WebSocket('ws://localhost:8080');\n  \n  return new Promise((resolve,
                                         reject) => {\n    ws.onopen = () => {\n      ws.send('こんにちは');\n
                                            resolve({ success: true, message: 'メッセージを送信しました' });\n
                                          };\n    \n    ws.onerror = (error) => {\n      reject({ success: false,
                                          message: 'WebSocket接続エラー' });\n    };\n    \n    ws.onmessage =
                                         (event) => {\n      console.log('受信:', event.data);\n    };\n    \n
                                          setTimeout(() => {\n      reject({ success: false, message:
                                         'タイムアウト' });\n    }, 5000);\n  });\n}")
  ⎿  # evaluate_script response                                                                             
     Script ran on page and returned:
     ```json
     … +5 lines (ctrl+o to expand)

⏺ ws://localhost:8080に「こんにちは」を送信しました。

サーバー側のログ

WebSocket server is running on ws://localhost:8080
Client connected
Received: こんにちは

サーバー側のコード

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket server is running on ws://localhost:8080');

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log('Received:', message.toString());
    // Echo the message back to the client
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });

  // Send a welcome message
  ws.send('Welcome to WebSocket Server!');
});