|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>Знакомство с aiohttp</title>
|
|
|
<style>
|
|
|
html {
|
|
|
font-family: Verdana, "sans-serif";
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
min-height: 100vh;
|
|
|
background: linear-gradient(
|
|
|
90deg,
|
|
|
rgba(2, 0, 36, 1) 0%,
|
|
|
rgba(9, 9, 121, 1) 35%,
|
|
|
rgba(0, 212, 255, 1) 100%
|
|
|
);
|
|
|
}
|
|
|
h1,
|
|
|
p {
|
|
|
color: white;
|
|
|
}
|
|
|
.time_block,
|
|
|
.output_block {
|
|
|
border: 2px solid white;
|
|
|
border-radius: 5px;
|
|
|
margin: 10px;
|
|
|
padding: 10px;
|
|
|
height: 50px;
|
|
|
width: 300px;
|
|
|
}
|
|
|
.message_form {
|
|
|
margin: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<header>
|
|
|
<h1>Дата и время</h1>
|
|
|
</header>
|
|
|
<main>
|
|
|
<div class="time_block">
|
|
|
<p id="time"></p>
|
|
|
</div>
|
|
|
<div class="message_form">
|
|
|
<form id="myForm2">
|
|
|
<input
|
|
|
type="text"
|
|
|
name="message_text_user"
|
|
|
placeholder="Введите текст"
|
|
|
/>
|
|
|
<input type="button" name="submit_message" value="Отправить" />
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="output_block">
|
|
|
<p id="output_message" class="output"></p>
|
|
|
</div>
|
|
|
</main>
|
|
|
<script>
|
|
|
const messageTime = document.getElementById("time");
|
|
|
const messageInput = document.querySelector("[name=message_text_user]");
|
|
|
const messageOtput = document.getElementById("output_message");
|
|
|
const sendMessage = document.querySelector("[name=submit_message]");
|
|
|
let websocketClient = new WebSocket("ws://127.0.0.1:8080/ws");
|
|
|
websocketClient.onopen = () => {
|
|
|
console.log("Client connected!");
|
|
|
sendMessage.onclick = () => {
|
|
|
console.log("1");
|
|
|
websocketClient.send(messageInput.value);
|
|
|
messageInput.value = "";
|
|
|
};
|
|
|
};
|
|
|
|
|
|
websocketClient.onmessage = (message) => {
|
|
|
if (message.data.includes("Время: ")) {
|
|
|
if (typeof messageTime.textContent !== "undefined") {
|
|
|
messageTime.textContent = message.data;
|
|
|
} else {
|
|
|
messageTime.innerText = message.data;
|
|
|
}
|
|
|
} else {
|
|
|
if (typeof messageOtput.textContent !== "undefined") {
|
|
|
messageOtput.textContent = message.data;
|
|
|
} else {
|
|
|
messageOtput.innerText = message.data;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
