95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
#output {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
min-height: 150px;
|
|
}
|
|
#sendMessage {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>WebSocket Test</h2>
|
|
<div>
|
|
<label for="messageInput">Enter Message:</label>
|
|
<input type="text" id="messageInput" placeholder="Type your message here">
|
|
<button id="sendBtn">Send Message</button>
|
|
</div>
|
|
|
|
<div id="output">
|
|
<h3>Messages:</h3>
|
|
<div id="messages"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Create a new WebSocket connection
|
|
const socket = new WebSocket('ws://192.168.1.137:8086/app/ws');
|
|
|
|
// Get HTML elements
|
|
const sendButton = document.getElementById('sendBtn');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const messagesDiv = document.getElementById('messages');
|
|
|
|
// WebSocket onopen event: Fired when WebSocket connection is established
|
|
socket.onopen = function(event) {
|
|
console.log("Connected to WebSocket server!");
|
|
displayMessage("Connected to WebSocket server!");
|
|
};
|
|
|
|
// WebSocket onmessage event: Fired when a message is received from the server
|
|
socket.onmessage = function(event) {
|
|
console.log("Received message from server: " + event.data);
|
|
displayMessage("Server: " + event.data);
|
|
};
|
|
|
|
// WebSocket onerror event: Fired when there's an error with the WebSocket
|
|
socket.onerror = function(error) {
|
|
console.log(error)
|
|
console.error("WebSocket Error: " + error);
|
|
displayMessage("WebSocket Error: " + error);
|
|
};
|
|
|
|
// WebSocket onclose event: Fired when the connection is closed
|
|
socket.onclose = function(event) {
|
|
console.log("WebSocket connection closed");
|
|
displayMessage("WebSocket connection closed");
|
|
};
|
|
|
|
// Function to display messages on the page
|
|
function displayMessage(message) {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.textContent = message;
|
|
messagesDiv.appendChild(messageElement);
|
|
}
|
|
|
|
// Button to send the message
|
|
sendButton.onclick = function() {
|
|
const message = messageInput.value;
|
|
if (message) {
|
|
console.log("Sending message: " + message);
|
|
socket.send(message);
|
|
displayMessage("You: " + message);
|
|
messageInput.value = ''; // Clear the input field
|
|
} else {
|
|
alert("Please enter a message!");
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|