From 05c15c09640e82abce488aca9f6e85d046cf0c5e Mon Sep 17 00:00:00 2001
From: bin456789 <bin456789@gmail.com>
Date: Fri, 18 Oct 2024 23:34:54 +0800
Subject: [PATCH] =?UTF-8?q?core:=20=E4=BD=BF=E7=94=A8=20websocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 logviewer.html | 85 +++++++++++++++++++++++++++-----------------------
 trans.sh       | 21 ++++++++++---
 2 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/logviewer.html b/logviewer.html
index 322646a..05c1cea 100644
--- a/logviewer.html
+++ b/logviewer.html
@@ -11,8 +11,9 @@
         }
 
         #log-container {
-            height: calc(100vh - 24px);
-            padding: 12px;
+            height: calc(100vh);
+            margin: 0;
+            padding: 8px;
             overflow-y: scroll;
         }
 
@@ -20,7 +21,7 @@
             position: fixed;
             bottom: 24px;
             right: 24px;
-            background-color: #007bff;
+            background-color: #0099FF;
             color: #fff;
             border: none;
             cursor: pointer;
@@ -30,9 +31,21 @@
             border-radius: 50%;
         }
 
+        #scroll-to-bottom:hover {
+            background-color: #00CCFF;
+        }
+
         #scroll-to-bottom svg {
             fill: #fff;
         }
+
+        .done {
+            background-color: #cfc;
+        }
+
+        .error {
+            background-color: #fcc;
+        }
     </style>
 </head>
 
@@ -44,44 +57,14 @@
         </svg>
     </button>
 
+    <script
+        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-d/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"
+        type="application/javascript"></script>
+
     <script>
         const logContainer = document.getElementById('log-container');
         const scrollToBottomButton = document.getElementById('scroll-to-bottom');
         let shouldScrollToBottom = true;
-        let logFetchInterval;
-
-        async function getLogContent() {
-            try {
-                const response = await fetch('reinstall.log', {
-                    cache: 'no-store'
-                });
-
-                if (response.ok) {
-                    const logContent = await response.text();
-                    // 修复 wget 换行符为 \r 导致不换行
-                    logContainer.textContent = logContent.replace(/[\r\n]+/g, "\n");;
-
-                    if (shouldScrollToBottom) {
-                        logContainer.scrollTop = logContainer.scrollHeight;
-                    }
-
-                    if (logContent.includes("Error:")) {
-                        clearInterval(logFetchInterval);
-                        alert("Error occurred.");
-                    }
-
-                } else {
-                    console.error('Failed to fetch log file.');
-                }
-
-            } catch (error) {
-                console.error('An error occurred: ' + error.message);
-            }
-
-            finally {
-                logFetchInterval = setTimeout(getLogContent, 2000);
-            }
-        }
 
         scrollToBottomButton.addEventListener('click', () => {
             logContainer.scrollTop = logContainer.scrollHeight;
@@ -98,8 +81,32 @@
             shouldScrollToBottom = isAtBottom;
         });
 
-        getLogContent();
+        var ws = new ReconnectingWebSocket('ws://' + location.host + '/');
+        ws.onopen = function () {
+            logContainer.textContent += '\nWebSocket Connected.';
+        };
+        ws.onclose = function () {
+            logContainer.textContent += '\nWebSocket Disconnected.';
+        };
+        ws.onmessage = function (event) {
+            logContainer.textContent += '\n' + event.data;
+            if (shouldScrollToBottom) {
+                logContainer.scrollTop = logContainer.scrollHeight;
+            }
+            // 开始/重新开始
+            if (event.data.includes('***** START TRANS *****')) {
+                document.body.className = ''
+            }
+            // 错误
+            else if (event.data.includes('***** ERROR *****')) {
+                document.body.className = 'error'
+            }
+            // 完成
+            else if (event.data.includes('***** DONE *****')) {
+                document.body.className = 'done'
+            }
+        };
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/trans.sh b/trans.sh
index fcc3645..a3045d6 100644
--- a/trans.sh
+++ b/trans.sh
@@ -17,6 +17,7 @@ EFI_UUID=C12A7328-F81F-11D2-BA4B-00A0C93EC93B
 error() {
     color='\e[31m'
     plain='\e[0m'
+    echo -e "${color}***** ERROR *****${plain}" >&2
     echo -e "${color}Error: $*${plain}" >&2
 }
 
@@ -236,6 +237,16 @@ setup_nginx() {
     fi
 }
 
+setup_websocketd() {
+    apk add websocketd
+    wget $confhome/logviewer.html -O /tmp/index.html
+    apk add coreutils
+    killall websocketd || true
+    # websocketd 遇到 \n 才推送，因此要转换 \r 为 \n
+    websocketd --loglevel=fatal --staticdir=/tmp \
+        stdbuf -oL -eL sh -c "tail -fn+0 /reinstall.log | tr '\r' '\n'" &
+}
+
 get_approximate_ram_size() {
     # lsmem 需要 util-linux
     if false && is_have_cmd lsmem; then
@@ -255,8 +266,8 @@ setup_web_if_enough_ram() {
     if [ $total_ram -gt 400 ]; then
         # lighttpd 虽然运行占用内存少，但安装占用空间大
         # setup_lighttpd
-        setup_nginx
-        # setup_websocketd
+        # setup_nginx
+        setup_websocketd
     fi
 }
 
@@ -4692,15 +4703,15 @@ fi
 case 1 in
 1)
     # ChatGPT 说这种性能最高
-    exec > >(exec tee -a $(get_ttys /dev/) /reinstall.log) 2>&1
+    exec > >(exec tee $(get_ttys /dev/) /reinstall.log) 2>&1
     trans
     ;;
 2)
-    exec > >(tee -a $(get_ttys /dev/) /reinstall.log) 2>&1
+    exec > >(tee $(get_ttys /dev/) /reinstall.log) 2>&1
     trans
     ;;
 3)
-    trans 2>&1 | tee -a $(get_ttys /dev/) /reinstall.log
+    trans 2>&1 | tee $(get_ttys /dev/) /reinstall.log
     ;;
 esac