From 0f39a36ec214b937c45660d7c11f9496aa61e4e9 Mon Sep 17 00:00:00 2001
From: JustSong <songquanpeng@foxmail.com>
Date: Sun, 10 Nov 2024 16:51:31 +0800
Subject: [PATCH] feat: set auto refresh is on by default

---
 web/src/components/MessagesTable.js | 34 ++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/src/components/MessagesTable.js b/web/src/components/MessagesTable.js
index ffd87a4..4951bc9 100644
--- a/web/src/components/MessagesTable.js
+++ b/web/src/components/MessagesTable.js
@@ -8,7 +8,14 @@ import {
   Popup,
   Table,
 } from 'semantic-ui-react';
-import { API, openPage, showError, showSuccess, showWarning } from '../helpers';
+import {
+  API,
+  openPage,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderTimestamp } from '../helpers/render';
@@ -20,7 +27,7 @@ function renderStatus(status) {
     case 1:
       return (
         <Label basic color='olive'>
-          正在投递
+          正在发送
         </Label>
       );
     case 2:
@@ -53,7 +60,7 @@ function renderStatus(status) {
 const MessagesTable = () => {
   const [messages, setMessages] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
   const [autoRefreshSeconds, setAutoRefreshSeconds] = useState(10);
   const autoRefreshSecondsRef = useRef(autoRefreshSeconds);
   const [activePage, setActivePage] = useState(1);
@@ -125,14 +132,21 @@ const MessagesTable = () => {
         showError(reason);
       });
     checkPermission().then();
-    const eventSource = new EventSource('/api/message/stream');
-    eventSource.onerror = (e) => {
-      showError('服务端消息推送流连接出错！');
-    };
-    eventSource.onmessage = (e) => {
-      let newMessage = JSON.parse(e.data);
-      insertNewMessage(newMessage);
+    const connectEventSource = () => {
+      const eventSource = new EventSource('/api/message/stream');
+      eventSource.onmessage = (e) => {
+        const newMessage = JSON.parse(e.data);
+        insertNewMessage(newMessage);
+      };
+      eventSource.onerror = () => {
+        showError('服务端消息推送流连接出错！即将重试...');
+        eventSource.close();
+        setTimeout(connectEventSource, 1000); // 1000ms
+      };
+      return eventSource;
     };
+    const eventSource = connectEventSource();
+    showInfo('服务器消息推送流已连接，您将实时收到新消息');
     return () => {
       eventSource.close();
     };