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>