48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>WebSocket Test</title>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Create WebSocket connection.
|
|
const socket = new WebSocket('ws://localhost:9000');
|
|
|
|
// Connection opened
|
|
socket.addEventListener('open', function (event) {
|
|
console.log("Connected to WebSocket server");
|
|
});
|
|
|
|
// Listen for messages
|
|
socket.addEventListener('message', function (event) {
|
|
console.log('Message from server', event.data);
|
|
let messages = document.getElementById('messages');
|
|
let message = document.createElement('li');
|
|
message.textContent = "Received: " + event.data;
|
|
messages.appendChild(message);
|
|
});
|
|
|
|
// Send a message to the server
|
|
function sendMessage() {
|
|
let message = document.getElementById('messageInput').value;
|
|
socket.send(message);
|
|
console.log('Message sent', message);
|
|
}
|
|
|
|
// Bind send message function to button click
|
|
document.getElementById('sendMessage').addEventListener('click', sendMessage);
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>WebSocket Test</h2>
|
|
<textarea rows="4" cols="50" id="messageInput" placeholder="Type a message..."> </textarea>
|
|
<button id="sendMessage">Send Message</button>
|
|
<p>Example JSON</p>
|
|
<p>{ "type": "cable_map", "call": "request", "data": { } }</p>
|
|
<p>Messages/Logs</p>
|
|
<ul id="messages"></ul>
|
|
</body>
|
|
|
|
</html> |