client/src/components/Chat.vue

@@ -11,6 +11,9 @@ async function sendMsg(ev) {
   let msg = input.value
   input.value = ''
 
+  console.log(ws)
+  console.log(msg)
+
   ws.send(msg)
 }
 
@@ -26,7 +29,6 @@ onMounted(async () => {
   };
 
   ws.onmessage = function (event) {
-    console.log(event)
     msgs.value.push(event.data)
   };
 
@@ -36,24 +38,33 @@ onMounted(async () => {
 
 <template>
   <main>
-    <div class="overflow-auto position-relative pb-5">
-      <div v-for="msg in msgs" class="card m-3 text-bg-secondary">
-        <div class="card-body">{{ msg }}</div>
-      </div>
-      <!--
-      <div v-for="msg in msgs" class="input-group">
-        <div class="alert alert-primary">User</div>
-        <div class="alert alert-secondary">{{ msg }}</div>
-      </div>
-        -->
-      <form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">
-        <div class="input-group">
-          <input v-model="input" type="text" class="form-control text-bg-secondary" placeholder="Type message here"
-            aria-label="Chat message" aria-describedby="button-submit">
-          <button @click="sendMsg" class="btn btn-primary" id="button-submit">Send</button>
+    <div class="container d-flex flex-column">
+      <div class="overflow-auto flex-1">
+        <div v-for="msg in msgs" class="card m-3 text-bg-primary">
+          <div class="card-body">{{ msg }}</div>
         </div>
+      </div>
+      <form onsubmit="event.preventDefault();" class="input-group m-3">
+        <input v-model="input" type="text" class="form-control" placeholder="Type message here" aria-label="Chat message"
+          aria-describedby="button-submit">
+        <button @click="sendMsg" class="btn btn-outline-secondary" id="button-submit">Send</button>
       </form>
     </div>
   </main>
 </template>
 
+<style scoped>
+.container {
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.overflow-auto {
+  flex: 1;
+  overflow-y: auto;
+}
+</style>
+

src/main.rs

@@ -2,10 +2,14 @@ use futures_util::{SinkExt, StreamExt};
 use poem::{
     endpoint::StaticFilesEndpoint,
     error::ResponseError,
+    get, handler,
     http::StatusCode,
     listener::TcpListener,
     session::{CookieConfig, MemoryStorage, ServerSession, Session},
-    web::websocket::{BoxWebSocketUpgraded, Message, WebSocket},
+    web::{
+        websocket::{BoxWebSocketUpgraded, Message, WebSocket},
+        Html,
+    },
     EndpointExt, Result, Route, Server,
 };
 use poem_openapi::{