<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.fill_all {
width: 100%;
height: calc(100vh);
font-size: 10vh;
}
</style>
<body>
<div class="fill_all" style="display: flex;justify-content: center; align-items: center;"></div>
</body>
<script type="text/javascript">
window.onload = () => {
let sec = 1;
setInterval(() => { sec += 1; }, 1000)
const socket = new WebSocket('ws://127.0.0.1:8765');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
let divs = document.getElementsByTagName("div");
divs[0].innerHTML = "websocket 很快啊, clock" + "<br/>" + event.data + "<br/>" + sec + "s内";
console.log('Message from server ', event.data);
});
};
</script>
</html>