add new page. Page in websocketClient connection

2 years ago · f6627d3d26
parent c95a7e4c58
commit f6627d3d26
1 changed files with 92 additions and 0 deletions
--- a/demo/templates/index_2.html
+++ b/demo/templates/index_2.html
@ -0,0 +1,92 @@
+<!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>