<!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);
}
};