u

server/static/index.html

@@ -367,117 +367,63 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script>
       let ws;
-      let userID;
 
-      function validateToken() {
+      function connectWebSocket() {
         const token = document.getElementById("token-input").value;
-
         const wsProtocol =
           window.location.protocol === "https:" ? "wss:" : "ws:";
         const wsHost = window.location.host;
-
         ws = new WebSocket(`${wsProtocol}//${wsHost}/ws?token=${token}`);
 
-        const statusDisplay = document.getElementById("status");
-        const currentVideo = document.getElementById("current-video");
-        const videoList = document.getElementById("video-list");
-
-        const timeout = setTimeout(() => {
-          if (ws.readyState !== WebSocket.OPEN) {
-            ws.close();
-            document.getElementById("token-error").style.display = "block";
-          }
-        }, 3000);
-
         ws.onopen = function () {
           console.log("Connected to WebSocket");
-
-          clearTimeout(timeout);
           document.getElementById("token-screen").style.display = "none";
           document.querySelector(".container-fluid").style.display = "flex";
-
-          statusDisplay.textContent = "WebSocket Status: Connected";
-          statusDisplay.classList.add("connected");
-        };
-
-        ws.onerror = function () {
-          clearTimeout(timeout);
-          document.getElementById("token-error").style.display = "block";
+          document.getElementById("status").textContent =
+            "WebSocket Status: Connected";
+          document.getElementById("status").classList.add("connected");
         };
 
         ws.onmessage = function (evt) {
           let obj = JSON.parse(evt.data);
-          if (!userID) {
-            userID = obj.user_id;
-            updateVideoList();
-            updateCurrentVideo();
-          }
-          switch (obj.type) {
-            case "Output":
-              addToOutput(obj.data);
-              break;
-            case "GetCurrentVideoPath":
-              document.querySelector("#current-video>span").innerHTML =
-                obj.data;
-              break;
-            case "GetVideoList":
-              if (obj.success) {
-                const listContainer = document.querySelector(
-                  "#video-list-container .list-group"
-                );
-                listContainer.innerHTML = "";
-                if (obj.success) {
-                  for (let item of obj.data) {
-                    listContainer.innerHTML += `<li class="list-group-item"><i class="fas fa-file-video me-2"></i>${item}</li>`;
-                  }
-                }
-              }
-              break;
-            case "RemoveVideo":
-            case "AddVideo":
-              updateVideoList();
-              updateCurrentVideo();
-              break;
-          }
+          messagesArea.value = obj.output;
+          messagesArea.scrollTop = messagesArea.scrollHeight;
+          document.querySelector("#current-video>span").innerHTML =
+            obj.currentVideoPath;
+          const listContainer = document.querySelector(
+            "#video-list-container .list-group"
+          );
+          listContainer.innerHTML = "";
+          obj.videoList.forEach((item) => {
+            listContainer.innerHTML += `<li class="list-group-item"><i class="fas fa-file-video me-2"></i>${item}</li>`;
+          });
+        };
+
+        ws.onerror = function () {
+          document.getElementById("token-error").style.display = "block";
         };
 
         ws.onclose = function () {
           console.log("Disconnected from WebSocket");
-          statusDisplay.textContent = "WebSocket Status: Disconnected";
-          statusDisplay.classList.remove("connected");
+          document.getElementById("status").textContent =
+            "WebSocket Status: Disconnected";
+          document.getElementById("status").classList.remove("connected");
+          setTimeout(connectWebSocket, 3000);
         };
       }
 
+      function validateToken() {
+        connectWebSocket();
+      }
+
       const messagesArea = document.getElementById("messages");
 
-      function addToOutput(message) {
-        const timestamp = new Date().toLocaleTimeString();
-        messagesArea.value += `[${timestamp}] ${message}\n`;
-        messagesArea.scrollTop = messagesArea.scrollHeight;
-      }
-
-      function sendWs(type, args) {
-        if (args) {
-          ws.send(
-            `{ "Type": "${type}", "Args": ${JSON.stringify(
-              args
-            )}, "user_id": "${userID}", "timestamp": ${Date.now()} }`
-          );
-        } else {
-          ws.send(
-            `{ "Type": "${type}", "user_id": "${userID}", "timestamp": ${Date.now()} }`
-          );
+      function sendWs(type) {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(`{ "type": "${type}" }`);
         }
       }
 
-      function updateCurrentVideo() {
-        sendWs("GetCurrentVideoPath");
-      }
-
-      function updateVideoList() {
-        sendWs("GetVideoList");
-      }
-
       window.previousVideo = function () {
         sendWs("StreamPrevVideo");
       };
@@ -489,6 +435,9 @@
       window.closeConnection = function () {
         if (confirm("确定要关闭服务器吗？")) {
           sendWs("Quit");
+          if (ws) {
+            ws.close();
+          }
         }
       };
     </script>