fix gitignore and env

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.env
 dist
 dist-ssr
 *.local

package.json

@@ -10,15 +10,17 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@tauri-apps/api": "^1.4.0",
     "vue": "^3.2.45",
-    "@tauri-apps/api": "^1.4.0"
+    "ws": "^8.14.2"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.4.0",
     "@types/node": "^18.7.10",
+    "@types/ws": "^8.5.8",
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",
-    "vue-tsc": "^1.0.11",
+    "vue-tsc": "^1.0.11"
-    "@tauri-apps/cli": "^1.4.0"
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   vue:
     specifier: ^3.2.45
     version: 3.2.45
+  ws:
+    specifier: ^8.14.2
+    version: 8.14.2
 
 devDependencies:
   '@tauri-apps/cli':
@@ -19,6 +22,9 @@ devDependencies:
   '@types/node':
     specifier: ^18.7.10
     version: 18.7.10
+  '@types/ws':
+    specifier: ^8.5.8
+    version: 8.5.8
   '@vitejs/plugin-vue':
     specifier: ^4.0.0
     version: 4.0.0(vite@4.2.1)(vue@3.2.45)
@@ -375,6 +381,12 @@ packages:
     resolution: {integrity: sha512-SST7B//wF7xlGoLo1IEVB0cQ4e7BgXlDk5IaPgb5s0DlYLjb4if07h8+0zbQIvahfPNXs6e7zyT0EH1MqaS+5g==}
     dev: true
 
+  /@types/ws@8.5.8:
+    resolution: {integrity: sha512-flUksGIQCnJd6sZ1l5dqCEG/ksaoAg/eUwiLAGTJQcfgvZJKF++Ta4bJA6A5aPSJmsr+xlseHn4KLgVlNnvPTg==}
+    dependencies:
+      '@types/node': 18.7.10
+    dev: true
+
   /@vitejs/plugin-vue@4.0.0(vite@4.2.1)(vue@3.2.45):
     resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -784,3 +796,16 @@ packages:
       '@vue/runtime-dom': 3.2.45
       '@vue/server-renderer': 3.2.45(vue@3.2.45)
       '@vue/shared': 3.2.45
+
+  /ws@8.14.2:
+    resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Greet from "./components/Greet.vue";
+import WSLog from "./components/WSLog.vue";
 </script>
 
 <template>
@@ -36,8 +36,7 @@ import Greet from "./components/Greet.vue";
         >rust-analyzer</a
       >
     </p>
-
+   <WSLog />
-    <Greet />
   </div>
 </template>
 

src/components/WSLog.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const serverMessage = ref("");
+const messageInput = ref("");
+
+// Connect to the WebSocket server with the URL from the .env file
+const webSocket = new WebSocket(import.meta.env.VITE_WS_URL);
+
+// On connection, listen for any message sent from the server
+webSocket.addEventListener("message", (event: { data: string }) => {
+  serverMessage.value = `Database updated: ${event.data}`;
+});
+
+// when form submitted send messageInput to server
+function updateMessage() {
+  webSocket.send(messageInput.value);
+}
+</script>
+
+<template>
+  <form class="row" @submit.prevent="updateMessage">
+    <input
+      id="messageInput"
+      v-model="messageInput"
+      placeholder="Send a Message"
+    />
+    <button type="submit">Send</button>
+  </form>
+
+  <p>{{ serverMessage }}</p>
+</template>