Add chat component

client/src/App.vue

@@ -5,12 +5,14 @@ import Signup from './components/Signup.vue'
 import Login from './components/Login.vue'
 import Clicker from './components/Clicker.vue'
 import ThemeToggle from './components/ThemeToggle.vue'
+import Chat from './components/Chat.vue'
 
 const routes = {
-  '/': Clicker,
+  '/': Chat,
   '/signup': Signup,
   '/login': Login,
   '/button': Clicker,
+  '/chat': Chat,
 }
 
 const currentPath = ref(window.location.hash)

client/src/components/Chat.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const input = ref('')
+const msgs = ref(['Server: Welcome to chat app', 'Server: This is an example message'])
+let ws;
+
+async function sendMsg(ev) {
+  ev.preventDefault()
+
+  let msg = input.value
+  input.value = ''
+
+  console.log(ws)
+  console.log(msg)
+
+  ws.send(msg)
+}
+
+onMounted(async () => {
+  let proto = window.location.protocol == 'https:' ? 'wss://' : 'ws://'
+  let host = window.location.host
+  ws = new WebSocket(proto + host + "/api/ws")
+
+  ws.onerror = function (event) {
+    console.log('WebSocket connection failed:', event);
+    //alert("Not logged in!")
+    window.location.hash = "/login"
+  };
+
+  ws.onmessage = function (event) {
+    msgs.value.push(event.data)
+  };
+
+  console.log(ws)
+})
+</script>
+
+<template>
+  <main>
+    <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>
+