<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Test WebSockets Server</title>
<style>
body { font-family: 'Maven Pro', sans-serif;
}
</style>
</head>
<body>
<div class="container mt-4">
<h2 class="text-center my-4">Test WebSockets Server</h2>
<div class="row">
<div class="row col-md-4">
<div class="col-md-8">
<button id="test" class="btn btn-light border">Connect test WebSocket</button>
</div>
<div class="col-md-8 mt-2">
<button id="close_test" class="btn btn-light border">Close WebSocket</button>
</div>
</div>
<div class="row col-md-8">
<div class="col-md-8">
<div class="form-floating mb-3">
<input class="form-control" id="send_text" placeholder="Send message WebSocket" disabled>
<label for="send_text">Send message WebSocket</label>
</div>
</div>
<div class="col-md-2">
<div class="row">
<div class="col">
<button id="send_button" class="btn btn-success" disabled>send</button>
</div>
<div class="col mt-2">
<a href="https://www.piesocket.com/websocket-tester" rel="noopener" target="_blank">html test</a>
</div>
</div>
</div>
</div>
<div class="col-md-12" id="log"></div>
</div>
</div>
<script>
const url = 'wss://demo.piesocket.com/v3/channel_123?api_key=VCXCEuvhGcBDP7XhiJJUDvR1e1D3eiVjgZ9VRiaV¬ify_self';
let ws, console = '';
test.addEventListener('click', () => { TestWebSocket(url);
});
close_test.addEventListener('click', () => { ws.close();
console += '* WebSocket client disconnected<br>';
log.innerHTML = console;
send_text.disabled = true;
send_button.disabled = true;
});
send_button.addEventListener('click', () => { if (send_text.value != '') { console += '* Send -> ' + send_text.value + '<br>';
log.innerHTML = console;
ws.send(send_text.value);
send_text.value = '';
} else { send_text.focus();
}
});
const TestWebSocket = (url) => { ws = new WebSocket(url);
ws.onopen = function() { console += '* WebSocket client connected and listening<br>';
log.innerHTML = console;
send_text.disabled = false;
send_button.disabled = false;
send_text.focus();
};
ws.onmessage = (e) => { console += '* Receive -> ' + e.data + '<br>';
log.innerHTML = console;
};
ws.onerror = (e) => { console += '* ' + e.data + '<br>';
log.innerHTML = console;
};
};
</script>
</body>
</html>
