From 1374141cd915b9bed4f68b546cab1c693491ae73 Mon Sep 17 00:00:00 2001
From: Leaversa <mtkwong@cpp.edu>
Date: Fri, 3 Nov 2023 16:08:28 -0700
Subject: [PATCH] websocket send and receive component with env

---
 .env                     |  1 +
 package.json             |  8 +++++---
 pnpm-lock.yaml           | 25 +++++++++++++++++++++++++
 src/App.vue              |  5 ++---
 src/components/WSLog.vue | 32 ++++++++++++++++++++++++++++++++
 5 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 .env
 create mode 100644 src/components/WSLog.vue

diff --git a/.env b/.env
new file mode 100644
index 0000000..12099d8
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_WS_URL=ws://localhost:5135/ws
\ No newline at end of file
diff --git a/package.json b/package.json
index 025fb78..8635a2c 100644
--- a/package.json
+++ b/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",
-    "@tauri-apps/cli": "^1.4.0"
+    "vue-tsc": "^1.0.11"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 345cd28..fdf4aac 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index 91f7b0f..14d40ab 100644
--- a/src/App.vue
+++ b/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>
-
-    <Greet />
+   <WSLog />
   </div>
 </template>
 
diff --git a/src/components/WSLog.vue b/src/components/WSLog.vue
new file mode 100644
index 0000000..6667254
--- /dev/null
+++ b/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>