update

frontend/src/views/main/KnowledgeGraph.vue

@@ -1,7 +1,48 @@
 <script setup>
-import { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 
+const message = ref("");
+
+let ws;
+
+onMounted(() => {
+  // 建立 WebSocket 連接
+  ws = new WebSocket("wss://cmm.ai:8083/ws");
+  // ws = new WebSocket("wss://cmm.ai:8082/ws"); // 測試用
+
+  // 當連接開啟時
+  ws.onopen = () => {
+    console.log("WebSocket open");
+  };
+
+  // 當接收到伺服器訊息時
+  ws.onmessage = (event) => {
+    console.log("WebSocket: ", event.data);
+    if (event.data === "finish") {
+      getKwStateList();
+    }
+    message.value = event.data;
+  };
+
+  // 處理錯誤
+  ws.onerror = (error) => {
+    console.error("WebSocket error: ", error);
+  };
+
+  // 當連接關閉時
+  ws.onclose = () => {
+    console.log("WebSocket close");
+  };
+});
+
+// 當組件卸載時，關閉 WebSocket 連接
+onBeforeUnmount(() => {
+  if (ws) {
+    ws.close();
+  }
+});
+
 let kwVal = ref(""); // 關鍵字
 let stageVal = ref(null); // 指定層級
 let maxStage = ref(null); // 最大層級
@@ -195,6 +236,18 @@ async function getKwStateList() {
       });
       console.log("stateList", stateList);
     }
+
+    // 判斷所有關鍵字狀態
+    // const allCompleted = stateList.every((item) => item.state === "已完成");
+    // console.log("allCompleted", allCompleted);
+
+    // if (allCompleted) {
+    //   console.log("所有狀態都是 '已完成'，停止 setInterval");
+    //   clearInterval(intervalId); // 停止定時器
+    // } else {
+    //   console.log("還有未完成的狀態");
+    //   startInterval();
+    // }
   } catch (error) {
     console.error("error", error);
   }
@@ -202,8 +255,15 @@ async function getKwStateList() {
 
 getKwStateList();
 
-// 每分鐘更新狀態
-setInterval(getKwStateList, 60000);
+// let intervalId;
+
+// // 每分鐘更新狀態
+// function startInterval() {
+//   intervalId = setInterval(getKwStateList, 60000);
+//   console.log("setInterval 已啟動");
+// }
+
+// startInterval();
 
 const headers = [
   {
@@ -223,6 +283,11 @@ const headers = [
     sortable: true,
     key: "waiting_time",
   },
+  {
+    title: "訊息",
+    sortable: true,
+    key: "message",
+  },
 ];
 
 // 計算下拉選單層級數