<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Chat</title>
</head>
<body>
<h1 id="header1">WebSocket Chat</h1>
<div>
<label for="message">Message: </label>
<input type="text" id="message" placeholder="Enter a message" onsubmit="sendMessage()">
<button onclick="sendMessage()">Send</button>
</div>
<div id="output"></div>
<script>
let wshost = 'localhost'; // WebSocketサーバのホスト名またはIPアドレス
let portNum = 8887; // WebSocketサーバのポート番号
const ws = new WebSocket('ws://'+wshost+':' + portNum); // WebSocketクライアントの作成 例えば ws://localhost:8887
let isComposing = false; // IMEの入力中(日本語変換中)かどうか。変換中のEnterキーでは送信しないようにするため
ws.onopen = function () {
logMessage('Connected to the WebSocket server');
};
ws.onmessage = function (event) {
const now = new Date();
const timestamp = now.toLocaleString();
logMessage('[' + timestamp + ']: ' + event.data);
console.log(event);
};
ws.onclose = function () {
logMessage('Disconnected from the WebSocket server');
};
ws.onerror = function (error) {
logMessage('Error: ' + error.message);
};
document.getElementById('message').addEventListener('keydown', function (event) {
if (event.key === 'Enter' && !isComposing) {
sendMessage();
}
});
document.getElementById('message').addEventListener('compositionstart', function () {
isComposing = true;
});
document.getElementById('message').addEventListener('compositionend', function () {
isComposing = false;
});
function sendMessage() {
const message = document.getElementById('message').value;
ws.send(message);
logMessage('Sent: ' + message);
}
function logMessage(message) {
const output = document.getElementById('output');
const messageElement = document.createElement('div');
messageElement.textContent = message;
output.appendChild(messageElement);
}
window.onload = function () {
document.getElementById('message').focus();
const header = document.getElementById('header1');
header.textContent = header.textContent + ' (websocket port = ' + portNum + ')';
};
</script>
</body>
</html>
