<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <div>
        <label for="message">Message:</label>
        <input type="text" id="message" name="message">
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <script>
        var ws = new WebSocket("ws://127.0.0.1:8000");
        function sendMessage() {
            var message = document.getElementById("message").value;
            ws.send(message);
        }
        ws.onmessage = function(event) {
            var messages = document.getElementById("messages");
            messages.innerHTML += "<p>" + event.data + "</p>";
        };
    </script>
</body>
</html>

// WebSocket オブジェクトを作成
var ws = new WebSocket("ws://example.com");

// WebSocket が接続されたときのイベントハンドラ
ws.onopen = function(event) {
  // サーバーに接続したことを表示
  console.log("Connected to server");
};

// WebSocket からメッセージを受信したときのイベントハンドラ
ws.onmessage = function(event) {
  // サーバーから受信したデータを取得
  var data = event.data;

  // データのタイプを判別する
  if (data instanceof Blob) {
    // データが画像の場合
    // 画像を表示するための canvas 要素を作成
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    // 画像を読み込むための Image オブジェクトを作成
    var image = new Image();
    image.onload = function() {
      // canvas のサイズを画像のサイズに合わせる
      canvas.width = image.width;
      canvas.height = image.height;

      // canvas に画像を描画する
      context.drawImage(image, 0, 0);

      // canvas を HTML ドキュメントに追加する
      document.body.appendChild(canvas);
    };
    // 画像のバイナリデータを URL に変換する
    image.src = URL.createObjectURL(data);
  } else {
    // データがテキストの場合
    // テキストを表示するための p 要素を作成
    var p = document.createElement("p");
    p.textContent = data;

    // p 要素を HTML ドキュメントに追加する
    document.body.appendChild(p);
  }
};