From ac5b4542eecfdccdaba529da06e917a57e08dca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Fri, 27 Sep 2024 10:16:59 +0800
Subject: [PATCH 01/11] listen notification

---
 .../lib-content-view/lib-content-view.js      |  38 +++++-
 frontend/src/utils/listen-notification.js     | 121 ++++++++++++++++++
 frontend/src/utils/user-api.js                |   6 +-
 3 files changed, 163 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/utils/listen-notification.js

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 7b8b9994bf1..bda9d99c54b 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -32,7 +32,8 @@ import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
 import { VIEW_TYPE } from '../../metadata/constants';
-
+import { userAPI } from '../../utils/user-api';
+import WebSocketService from '../../utils/listen-notification';
 import '../../css/lib-content-view.css';
 
 dayjs.extend(relativeTime);
@@ -49,7 +50,42 @@ class LibContentView extends React.Component {
 
   constructor(props) {
     super(props);
+    console.log(this.props.repoID)
+    const onMessageCallback = (data) => {
+      if (data.type === 'file-lock-changed') {
+        const currentUrl = window.location.href;
+        const parsedUrl = new URL(currentUrl);
+        const pathParts = parsedUrl.pathname.split('/');
+        const dirRouter = pathParts.slice(4).join('/');
+        const notiUrlIndex = data.content.path.lastIndexOf('/')
+        const notiRouter = data.content.path.slice(0, notiUrlIndex)
+        if(dirRouter === notiRouter){
+          const dirent = { name: data.content.path.split('/').pop() }
+          if (data.content.change_event == 'locked'){
+            if (dirent.name.endsWith('.sdoc')){
+              this.updateDirent(dirent, 'is_freezed', true);
+              this.updateDirent(dirent, 'is_locked', true);
+            }else{
+              this.updateDirent(dirent, 'is_locked', true);
+            }
+            this.updateDirent(dirent, 'locked_by_me', true);
+            let lockName = data.content.lock_user
+            this.updateDirent(dirent, 'lock_owner_name', lockName[0]);
+          }
+          else if (data.content.change_event == 'unlocked'){
+            this.updateDirent(dirent, 'is_locked', false);
+            this.updateDirent(dirent, 'locked_by_me', false);
+            this.updateDirent(dirent, 'lock_owner_name', '');
+          }
 
+        }
+ 
+      } else {
+        console.log('Custom handling other message:', data);
+      }
+    };
+    const url = 'ws://localhost:8083';// WebSocket 服务器地址
+    this.socket = new WebSocketService("ws://localhost:8083", onMessageCallback);
     let isTreePanelShown = true;
     const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
     if (storedTreePanelState != undefined) {
diff --git a/frontend/src/utils/listen-notification.js b/frontend/src/utils/listen-notification.js
new file mode 100644
index 00000000000..a5535bf9695
--- /dev/null
+++ b/frontend/src/utils/listen-notification.js
@@ -0,0 +1,121 @@
+import { userAPI } from '../utils/user-api';
+
+
+class WebSocketService {
+    constructor(url, onMessageCallback) {
+      this.url = url;
+      this.socket = null;
+      this.heartbeatInterval = null; // 用于心跳机制
+      this.onMessageCallback = onMessageCallback; // 用于接收外部的消息处理回调函数
+      this.initConnect(); // 确保构造函数内调用
+    }
+  
+    // 初始化 WebSocket 连接
+    async connect(repoId) {
+      this.socket = new WebSocket(this.url);
+  
+      // 当 WebSocket 连接成功时触发
+      this.socket.onopen = async () => {
+        console.log('WebSocket connection established.');
+        // 获取并发送订阅消息
+        const msg = await this.formatSubscriptionMsg(repoId);
+        console.log('Sent subscription message:', msg);
+        this.socket.send(JSON.stringify(msg));
+      };
+  
+      // 监听来自 WebSocket 服务器的消息
+      this.socket.onmessage = (event) => {
+        const parsedData = JSON.parse(event.data);
+        console.log('Received:', parsedData);
+        if (this.onMessageCallback) {
+            this.onMessageCallback(parsedData); // 调用传入的回调函数处理消息
+          } else {
+            this.handleMessage(parsedData); // 默认处理消息
+          }
+        this.handleMessage(parsedData);
+      };
+  
+      // 处理 WebSocket 错误
+      this.socket.onerror = (error) => {
+        console.error('WebSocket error:', error);
+      };
+  
+      // 处理 WebSocket 连接关闭
+      this.socket.onclose = () => {
+        console.log('WebSocket connection closed. Reconnecting...');
+        this.cleanup();
+        this.reconnect(repoId);
+      };
+    }
+  
+    // 获取 repo 的 JWT 令牌
+    // async getRepoJwtToken(repoId) {
+    //     await userAPI.getNotificationToken(repoId).then(res => {
+    //         return res.data.token;
+    //     }).catch(err => {
+    //         console.error('Failed to fetch JWT token:', err);
+    //         throw err;
+    //     });
+    // }
+
+    getRepoJwtToken = async (repoId) => {
+        await userAPI.getNotificationToken(repoId).then(res => {
+            return res.data.token;
+        }).catch(err => {
+            console.error('Failed to fetch JWT token:', err);
+            throw err;
+        });
+    } 
+  
+    // 格式化订阅消息
+    async formatSubscriptionMsg(repoId) {
+      let repoToken = await this.getRepoJwtToken(repoId);
+      repoToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjY5NjQzNzI5ZmNiOTQ5N2Q4ZGFhMjgxNWQwMTU4OTY3QGF1dGgubG9jYWwiLCJyZXBvX2lkIjoiNmU1NGE5ZjAtOGM4NS00MzFhLWIyYjQtYWY0N2EyN2MwMzhlIiwiZXhwIjoxNzI3ODM1NjMyfQ.r2NoD5dHrC1a6X5EUfUBz1V-vMHVyflwyyNtS-ltejM'
+      repoId = '6e54a9f0-8c85-431a-b2b4-af47a27c038e'
+      console.log(111)
+      const jsonData = {
+        type: 'subscribe',
+        content: {
+          repos: [
+            {
+              id: repoId,
+              jwt_token: repoToken,
+            },
+          ],
+        },
+      };
+      return jsonData;
+    }
+  
+    // 处理接收到的 WebSocket 消息
+    handleMessage(data) {
+      // 根据不同的消息类型处理不同的逻辑
+      if (data.type === 'file-lock-changed') {
+        console.log('Handling update:', data);
+        // 判断当前是否在该页面中，若在，则更新dirent，若不在，则不处理
+      } else {
+        console.log('Handling other message:', data);
+      }
+    }
+  
+    // 关闭连接时清理资源
+    cleanup() {
+      clearInterval(this.heartbeatInterval);
+    }
+  
+    // 重连逻辑
+    reconnect(repoId) {
+      setTimeout(() => {
+        console.log('Reconnecting WebSocket...');
+        this.connect(repoId);
+      }, 5000); // 等待 5 秒后重新连接
+    }
+  
+    // 初始化连接的逻辑
+    initConnect() {
+      const repoId = '6e54a9f0-8c85-431a-b2b4-af47a27c038e'; // 假设这是一个硬编码的 repoId
+      this.connect(repoId); // 调用 connect 方法进行连接
+    }
+  }
+  
+export default WebSocketService;
diff --git a/frontend/src/utils/user-api.js b/frontend/src/utils/user-api.js
index 11dee2c039e..affef379d02 100644
--- a/frontend/src/utils/user-api.js
+++ b/frontend/src/utils/user-api.js
@@ -47,7 +47,7 @@ class UserAPI {
     const url = this.server + '/api/v2.1/query-io-status/?task_id=' + task_id;
     return this.req.get(url);
   }
-
+  
   depAdminTransferRepo(repo_id, group_id, email, reshare) {
     const url = this.server + '/api/v2.1/groups/' + group_id + '/group-owned-libraries/' + repo_id + '/transfer/';
     const formData = new FormData();
@@ -62,6 +62,10 @@ class UserAPI {
     form.append('owner', owner);
     form.append('reshare', reshare);
     return this.req.put(url, form);
+
+  getNotificationToken(repoID) {
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/repo-notification-jwt-token/'
+    return this.req.get(url);
   }
 }
 

From 2bbee9bcd4031bc721e537c2af079f5b5c53c59f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Mon, 30 Sep 2024 10:22:46 +0800
Subject: [PATCH 02/11] optimize code

---
 .../lib-content-view/lib-content-view.js      | 23 +++----
 frontend/src/utils/listen-notification.js     | 68 ++++++-------------
 frontend/src/utils/user-api.js                |  2 +-
 3 files changed, 31 insertions(+), 62 deletions(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index bda9d99c54b..af8fa100b02 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -50,42 +50,39 @@ class LibContentView extends React.Component {
 
   constructor(props) {
     super(props);
-    console.log(this.props.repoID)
     const onMessageCallback = (data) => {
       if (data.type === 'file-lock-changed') {
         const currentUrl = window.location.href;
         const parsedUrl = new URL(currentUrl);
-        const pathParts = parsedUrl.pathname.split('/');
-        const dirRouter = pathParts.slice(4).join('/');
-        const notiUrlIndex = data.content.path.lastIndexOf('/')
+        const pathParts = parsedUrl.pathname.split('/').filter(part => part.length > 0);
+        const dirRouter = decodeURIComponent(pathParts.slice(3).join('/'));
+        let notiUrlIndex = ''
+        if (data.content.path.includes('/')){
+          notiUrlIndex = data.content.path.lastIndexOf('/')
+        }
         const notiRouter = data.content.path.slice(0, notiUrlIndex)
         if(dirRouter === notiRouter){
           const dirent = { name: data.content.path.split('/').pop() }
           if (data.content.change_event == 'locked'){
             if (dirent.name.endsWith('.sdoc')){
               this.updateDirent(dirent, 'is_freezed', true);
-              this.updateDirent(dirent, 'is_locked', true);
-            }else{
-              this.updateDirent(dirent, 'is_locked', true);
             }
+            this.updateDirent(dirent, 'is_locked', true);
             this.updateDirent(dirent, 'locked_by_me', true);
-            let lockName = data.content.lock_user
-            this.updateDirent(dirent, 'lock_owner_name', lockName[0]);
+            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
           }
           else if (data.content.change_event == 'unlocked'){
             this.updateDirent(dirent, 'is_locked', false);
             this.updateDirent(dirent, 'locked_by_me', false);
             this.updateDirent(dirent, 'lock_owner_name', '');
           }
-
         }
- 
       } else {
         console.log('Custom handling other message:', data);
       }
     };
-    const url = 'ws://localhost:8083';// WebSocket 服务器地址
-    this.socket = new WebSocketService("ws://localhost:8083", onMessageCallback);
+    const url = 'ws://localhost:8083';// WebSocket address
+    this.socket = new WebSocketService("ws://localhost:8083", onMessageCallback, this.props.repoID);
     let isTreePanelShown = true;
     const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
     if (storedTreePanelState != undefined) {
diff --git a/frontend/src/utils/listen-notification.js b/frontend/src/utils/listen-notification.js
index a5535bf9695..e9a0b935743 100644
--- a/frontend/src/utils/listen-notification.js
+++ b/frontend/src/utils/listen-notification.js
@@ -2,24 +2,21 @@ import { userAPI } from '../utils/user-api';
 
 
 class WebSocketService {
-    constructor(url, onMessageCallback) {
+    constructor(url, onMessageCallback, repoId) {
       this.url = url;
+      this.repoId = repoId
       this.socket = null;
-      this.heartbeatInterval = null; // 用于心跳机制
-      this.onMessageCallback = onMessageCallback; // 用于接收外部的消息处理回调函数
-      this.initConnect(); // 确保构造函数内调用
+      this.heartbeatInterval = null;
+      this.onMessageCallback = onMessageCallback;
+      this.connect();
     }
   
-    // 初始化 WebSocket 连接
-    async connect(repoId) {
+    // init WebSocket connect
+    async connect() {
       this.socket = new WebSocket(this.url);
   
-      // 当 WebSocket 连接成功时触发
       this.socket.onopen = async () => {
-        console.log('WebSocket connection established.');
-        // 获取并发送订阅消息
-        const msg = await this.formatSubscriptionMsg(repoId);
-        console.log('Sent subscription message:', msg);
+        const msg = await this.formatSubscriptionMsg();
         this.socket.send(JSON.stringify(msg));
       };
   
@@ -32,7 +29,6 @@ class WebSocketService {
           } else {
             this.handleMessage(parsedData); // 默认处理消息
           }
-        this.handleMessage(parsedData);
       };
   
       // 处理 WebSocket 错误
@@ -44,41 +40,28 @@ class WebSocketService {
       this.socket.onclose = () => {
         console.log('WebSocket connection closed. Reconnecting...');
         this.cleanup();
-        this.reconnect(repoId);
+        this.reconnect();
       };
     }
-  
-    // 获取 repo 的 JWT 令牌
-    // async getRepoJwtToken(repoId) {
-    //     await userAPI.getNotificationToken(repoId).then(res => {
-    //         return res.data.token;
-    //     }).catch(err => {
-    //         console.error('Failed to fetch JWT token:', err);
-    //         throw err;
-    //     });
-    // }
 
-    getRepoJwtToken = async (repoId) => {
-        await userAPI.getNotificationToken(repoId).then(res => {
+    async getRepoJwtToken() {
+        const token = await userAPI.getNotificationToken(this.repoId).then(res => {
             return res.data.token;
         }).catch(err => {
             console.error('Failed to fetch JWT token:', err);
             throw err;
         });
-    } 
-  
-    // 格式化订阅消息
-    async formatSubscriptionMsg(repoId) {
-      let repoToken = await this.getRepoJwtToken(repoId);
-      repoToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjY5NjQzNzI5ZmNiOTQ5N2Q4ZGFhMjgxNWQwMTU4OTY3QGF1dGgubG9jYWwiLCJyZXBvX2lkIjoiNmU1NGE5ZjAtOGM4NS00MzFhLWIyYjQtYWY0N2EyN2MwMzhlIiwiZXhwIjoxNzI3ODM1NjMyfQ.r2NoD5dHrC1a6X5EUfUBz1V-vMHVyflwyyNtS-ltejM'
-      repoId = '6e54a9f0-8c85-431a-b2b4-af47a27c038e'
-      console.log(111)
+        return token
+    }
+
+    async formatSubscriptionMsg() {
+      const repoToken = await this.getRepoJwtToken();
       const jsonData = {
         type: 'subscribe',
         content: {
           repos: [
             {
-              id: repoId,
+              id: this.repoId,
               jwt_token: repoToken,
             },
           ],
@@ -87,34 +70,23 @@ class WebSocketService {
       return jsonData;
     }
   
-    // 处理接收到的 WebSocket 消息
     handleMessage(data) {
-      // 根据不同的消息类型处理不同的逻辑
       if (data.type === 'file-lock-changed') {
         console.log('Handling update:', data);
-        // 判断当前是否在该页面中，若在，则更新dirent，若不在，则不处理
       } else {
         console.log('Handling other message:', data);
       }
     }
   
-    // 关闭连接时清理资源
     cleanup() {
       clearInterval(this.heartbeatInterval);
     }
   
-    // 重连逻辑
-    reconnect(repoId) {
+    reconnect() {
       setTimeout(() => {
         console.log('Reconnecting WebSocket...');
-        this.connect(repoId);
-      }, 5000); // 等待 5 秒后重新连接
-    }
-  
-    // 初始化连接的逻辑
-    initConnect() {
-      const repoId = '6e54a9f0-8c85-431a-b2b4-af47a27c038e'; // 假设这是一个硬编码的 repoId
-      this.connect(repoId); // 调用 connect 方法进行连接
+        this.connect(this.repoId);
+      }, 5000);
     }
   }
   
diff --git a/frontend/src/utils/user-api.js b/frontend/src/utils/user-api.js
index affef379d02..59bd14846cb 100644
--- a/frontend/src/utils/user-api.js
+++ b/frontend/src/utils/user-api.js
@@ -47,7 +47,7 @@ class UserAPI {
     const url = this.server + '/api/v2.1/query-io-status/?task_id=' + task_id;
     return this.req.get(url);
   }
-  
+
   depAdminTransferRepo(repo_id, group_id, email, reshare) {
     const url = this.server + '/api/v2.1/groups/' + group_id + '/group-owned-libraries/' + repo_id + '/transfer/';
     const formData = new FormData();

From d1d6b654a48b312024a43f5e6c662cfa99e28e04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Mon, 11 Nov 2024 11:02:05 +0800
Subject: [PATCH 03/11] Update user-api.js

---
 frontend/src/utils/user-api.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/user-api.js b/frontend/src/utils/user-api.js
index 59bd14846cb..9d89f50a7fc 100644
--- a/frontend/src/utils/user-api.js
+++ b/frontend/src/utils/user-api.js
@@ -4,7 +4,7 @@ import { siteRoot } from './constants';
 
 class UserAPI {
 
-  init({ server, username, password, token }) {
+  init({server, username, password, token}) {
     this.server = server;
     this.username = username;
     this.password = password;
@@ -12,13 +12,13 @@ class UserAPI {
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
-        headers: { 'Authorization': 'Token ' + this.token },
+        headers: {'Authorization': 'Token ' + this.token},
       });
     }
     return this;
   }
 
-  initForSeahubUsage({ siteRoot, xcsrfHeaders }) {
+  initForSeahubUsage({siteRoot, xcsrfHeaders}) {
     if (siteRoot && siteRoot.charAt(siteRoot.length - 1) === '/') {
       var server = siteRoot.substring(0, siteRoot.length - 1);
       this.server = server;
@@ -62,6 +62,7 @@ class UserAPI {
     form.append('owner', owner);
     form.append('reshare', reshare);
     return this.req.put(url, form);
+  }
 
   getNotificationToken(repoID) {
     const url = this.server + '/api/v2.1/repos/' + repoID + '/repo-notification-jwt-token/'

From 86dc2addb2189e620576b0c4669d9f658a956c97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Mon, 11 Nov 2024 16:39:00 +0800
Subject: [PATCH 04/11] optimize code

---
 .../lib-content-view/lib-content-view.js      |  24 ++-
 frontend/src/utils/listen-notification.js     | 167 +++++++++---------
 frontend/src/utils/user-api.js                |   8 +-
 3 files changed, 97 insertions(+), 102 deletions(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index af8fa100b02..27626c4f628 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -32,7 +32,6 @@ import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
 import { VIEW_TYPE } from '../../metadata/constants';
-import { userAPI } from '../../utils/user-api';
 import WebSocketService from '../../utils/listen-notification';
 import '../../css/lib-content-view.css';
 
@@ -56,33 +55,30 @@ class LibContentView extends React.Component {
         const parsedUrl = new URL(currentUrl);
         const pathParts = parsedUrl.pathname.split('/').filter(part => part.length > 0);
         const dirRouter = decodeURIComponent(pathParts.slice(3).join('/'));
-        let notiUrlIndex = ''
-        if (data.content.path.includes('/')){
-          notiUrlIndex = data.content.path.lastIndexOf('/')
+        let notiUrlIndex = '';
+        if (data.content.path.includes('/')) {
+          notiUrlIndex = data.content.path.lastIndexOf('/');
         }
-        const notiRouter = data.content.path.slice(0, notiUrlIndex)
-        if(dirRouter === notiRouter){
-          const dirent = { name: data.content.path.split('/').pop() }
-          if (data.content.change_event == 'locked'){
-            if (dirent.name.endsWith('.sdoc')){
+        const notifRouter = data.content.path.slice(0, notiUrlIndex);
+        if (dirRouter === notifRouter) {
+          const dirent = { name: data.content.path.split('/').pop() };
+          if (data.content.change_event === 'locked') {
+            if (dirent.name.endsWith('.sdoc')) {
               this.updateDirent(dirent, 'is_freezed', true);
             }
             this.updateDirent(dirent, 'is_locked', true);
             this.updateDirent(dirent, 'locked_by_me', true);
             this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
           }
-          else if (data.content.change_event == 'unlocked'){
+          else if (data.content.change_event === 'unlocked') {
             this.updateDirent(dirent, 'is_locked', false);
             this.updateDirent(dirent, 'locked_by_me', false);
             this.updateDirent(dirent, 'lock_owner_name', '');
           }
         }
-      } else {
-        console.log('Custom handling other message:', data);
       }
     };
-    const url = 'ws://localhost:8083';// WebSocket address
-    this.socket = new WebSocketService("ws://localhost:8083", onMessageCallback, this.props.repoID);
+    this.socket = new WebSocketService(onMessageCallback, this.props.repoID);
     let isTreePanelShown = true;
     const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
     if (storedTreePanelState != undefined) {
diff --git a/frontend/src/utils/listen-notification.js b/frontend/src/utils/listen-notification.js
index e9a0b935743..0ccb4acee02 100644
--- a/frontend/src/utils/listen-notification.js
+++ b/frontend/src/utils/listen-notification.js
@@ -2,92 +2,91 @@ import { userAPI } from '../utils/user-api';
 
 
 class WebSocketService {
-    constructor(url, onMessageCallback, repoId) {
-      this.url = url;
-      this.repoId = repoId
-      this.socket = null;
-      this.heartbeatInterval = null;
-      this.onMessageCallback = onMessageCallback;
-      this.connect();
-    }
-  
-    // init WebSocket connect
-    async connect() {
-      this.socket = new WebSocket(this.url);
-  
-      this.socket.onopen = async () => {
-        const msg = await this.formatSubscriptionMsg();
-        this.socket.send(JSON.stringify(msg));
-      };
-  
-      // 监听来自 WebSocket 服务器的消息
-      this.socket.onmessage = (event) => {
-        const parsedData = JSON.parse(event.data);
-        console.log('Received:', parsedData);
-        if (this.onMessageCallback) {
-            this.onMessageCallback(parsedData); // 调用传入的回调函数处理消息
-          } else {
-            this.handleMessage(parsedData); // 默认处理消息
-          }
-      };
-  
-      // 处理 WebSocket 错误
-      this.socket.onerror = (error) => {
-        console.error('WebSocket error:', error);
-      };
-  
-      // 处理 WebSocket 连接关闭
-      this.socket.onclose = () => {
-        console.log('WebSocket connection closed. Reconnecting...');
-        this.cleanup();
-        this.reconnect();
-      };
-    }
+  constructor(onMessageCallback, repoId) {
 
-    async getRepoJwtToken() {
-        const token = await userAPI.getNotificationToken(this.repoId).then(res => {
-            return res.data.token;
-        }).catch(err => {
-            console.error('Failed to fetch JWT token:', err);
-            throw err;
-        });
-        return token
-    }
+    this.url = 'ws://localhost:8083'; // WebSocket address;
+    this.repoId = repoId;
+    this.socket = null;
+    this.heartbeatInterval = null;
+    this.onMessageCallback = onMessageCallback;
+    this.connect();
+  }
 
-    async formatSubscriptionMsg() {
-      const repoToken = await this.getRepoJwtToken();
-      const jsonData = {
-        type: 'subscribe',
-        content: {
-          repos: [
-            {
-              id: this.repoId,
-              jwt_token: repoToken,
-            },
-          ],
-        },
-      };
-      return jsonData;
-    }
-  
-    handleMessage(data) {
-      if (data.type === 'file-lock-changed') {
-        console.log('Handling update:', data);
-      } else {
-        console.log('Handling other message:', data);
-      }
-    }
-  
-    cleanup() {
-      clearInterval(this.heartbeatInterval);
-    }
-  
-    reconnect() {
-      setTimeout(() => {
-        console.log('Reconnecting WebSocket...');
-        this.connect(this.repoId);
-      }, 5000);
+  // init WebSocket connect
+  async connect() {
+    this.socket = new WebSocket(this.url);
+
+    this.socket.onopen = async () => {
+      const msg = await this.formatSubscriptionMsg();
+      this.socket.send(JSON.stringify(msg));
+    };
+
+    // listen message from WebSocket server
+    this.socket.onmessage = (event) => {
+      const parsedData = JSON.parse(event.data);
+      this.handleMessage(parsedData); // default handle message
+    };
+
+    // handle WebSocket error
+    this.socket.onerror = (error) => {
+      throw error;
+    };
+
+    // reconnect WebSocket
+    this.socket.onclose = () => {
+      this.cleanup();
+      this.reconnect();
+    };
+  }
+
+  async getRepoJwtToken() {
+    const response = await userAPI.getNotificationToken(this.repoId).then(res => {
+      return res.data;
+    }).catch(err => {
+      throw err;
+    });
+    return response.token;
+  }
+
+  async formatSubscriptionMsg() {
+    const repoToken = await this.getRepoJwtToken();
+    const jsonData = {
+      type: 'subscribe',
+      content: {
+        repos: [
+          {
+            id: this.repoId,
+            jwt_token: repoToken,
+          },
+        ],
+      },
+    };
+    return jsonData;
+  }
+
+  handleMessage(data) {
+    switch (data.type) {
+      case 'file-lock-changed':
+        this.onMessageCallback(data); // Callback function to process message
+        break;
+      case 'folder-perm-changed':
+        // Handle folder permission changed message
+        break;
+      case 'repo-update':
+        // Handle repository update message
+        break;
     }
   }
-  
+
+  cleanup() {
+    clearInterval(this.heartbeatInterval);
+  }
+
+  reconnect() {
+    setTimeout(() => {
+      this.connect(this.repoId);
+    }, 5000);
+  }
+}
+
 export default WebSocketService;
diff --git a/frontend/src/utils/user-api.js b/frontend/src/utils/user-api.js
index 9d89f50a7fc..a983bd8e01a 100644
--- a/frontend/src/utils/user-api.js
+++ b/frontend/src/utils/user-api.js
@@ -4,7 +4,7 @@ import { siteRoot } from './constants';
 
 class UserAPI {
 
-  init({server, username, password, token}) {
+  init({ server, username, password, token }) {
     this.server = server;
     this.username = username;
     this.password = password;
@@ -12,13 +12,13 @@ class UserAPI {
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
-        headers: {'Authorization': 'Token ' + this.token},
+        headers: { 'Authorization': 'Token ' + this.token },
       });
     }
     return this;
   }
 
-  initForSeahubUsage({siteRoot, xcsrfHeaders}) {
+  initForSeahubUsage({ siteRoot, xcsrfHeaders }) {
     if (siteRoot && siteRoot.charAt(siteRoot.length - 1) === '/') {
       var server = siteRoot.substring(0, siteRoot.length - 1);
       this.server = server;
@@ -65,7 +65,7 @@ class UserAPI {
   }
 
   getNotificationToken(repoID) {
-    const url = this.server + '/api/v2.1/repos/' + repoID + '/repo-notification-jwt-token/'
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/repo-notification-jwt-token/';
     return this.req.get(url);
   }
 }

From 4d8fac87c48c930fe84dc21c0cc32914eeff4c3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Fri, 15 Nov 2024 22:07:41 +0800
Subject: [PATCH 05/11] update

---
 .../lib-content-view/lib-content-view.js      | 64 ++++++++++---------
 frontend/src/utils/listen-notification.js     | 19 ++++--
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 27626c4f628..b88b1289717 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -49,41 +49,12 @@ class LibContentView extends React.Component {
 
   constructor(props) {
     super(props);
-    const onMessageCallback = (data) => {
-      if (data.type === 'file-lock-changed') {
-        const currentUrl = window.location.href;
-        const parsedUrl = new URL(currentUrl);
-        const pathParts = parsedUrl.pathname.split('/').filter(part => part.length > 0);
-        const dirRouter = decodeURIComponent(pathParts.slice(3).join('/'));
-        let notiUrlIndex = '';
-        if (data.content.path.includes('/')) {
-          notiUrlIndex = data.content.path.lastIndexOf('/');
-        }
-        const notifRouter = data.content.path.slice(0, notiUrlIndex);
-        if (dirRouter === notifRouter) {
-          const dirent = { name: data.content.path.split('/').pop() };
-          if (data.content.change_event === 'locked') {
-            if (dirent.name.endsWith('.sdoc')) {
-              this.updateDirent(dirent, 'is_freezed', true);
-            }
-            this.updateDirent(dirent, 'is_locked', true);
-            this.updateDirent(dirent, 'locked_by_me', true);
-            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
-          }
-          else if (data.content.change_event === 'unlocked') {
-            this.updateDirent(dirent, 'is_locked', false);
-            this.updateDirent(dirent, 'locked_by_me', false);
-            this.updateDirent(dirent, 'lock_owner_name', '');
-          }
-        }
-      }
-    };
-    this.socket = new WebSocketService(onMessageCallback, this.props.repoID);
     let isTreePanelShown = true;
     const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
     if (storedTreePanelState != undefined) {
       isTreePanelShown = storedTreePanelState == 'true';
     }
+    this.onMessageCallback = this.onMessageCallback.bind(this);
     this.state = {
       currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
       isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel
@@ -176,8 +147,40 @@ class LibContentView extends React.Component {
   componentDidMount() {
     this.unsubscribeEvent = this.props.eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
     this.calculatePara(this.props);
+    this.socket = new WebSocketService(this.onMessageCallback, this.props.repoID);
+
   }
 
+  onMessageCallback = (data) => {
+    if (data.type === 'file-lock-changed') {
+      const currentUrl = window.location.href;
+      const parsedUrl = new URL(currentUrl);
+      const pathParts = parsedUrl.pathname.split('/').filter(part => part.length > 0);
+      const dirRouter = decodeURIComponent(pathParts.slice(3).join('/'));
+      let notiUrlIndex = '';
+      if (data.content.path.includes('/')) {
+        notiUrlIndex = data.content.path.lastIndexOf('/');
+      }
+      const notifRouter = data.content.path.slice(0, notiUrlIndex);
+      if (dirRouter === notifRouter) {
+        const dirent = { name: data.content.path.split('/').pop() };
+        if (data.content.change_event === 'locked') {
+          if (dirent.name.endsWith('.sdoc')) {
+            this.updateDirent(dirent, 'is_freezed', true);
+          }
+          this.updateDirent(dirent, 'is_locked', true);
+          this.updateDirent(dirent, 'locked_by_me', true);
+          this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
+        }
+        else if (data.content.change_event === 'unlocked') {
+          this.updateDirent(dirent, 'is_locked', false);
+          this.updateDirent(dirent, 'locked_by_me', false);
+          this.updateDirent(dirent, 'lock_owner_name', '');
+        }
+      }
+    }
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.repoID !== this.props.repoID) {
       this.calculatePara(nextProps);
@@ -284,6 +287,7 @@ class LibContentView extends React.Component {
       isLibView: false,
       currentRepoInfo: null,
     });
+    this.socket.close();
   }
 
   componentDidUpdate(prevProps, prevState) {
diff --git a/frontend/src/utils/listen-notification.js b/frontend/src/utils/listen-notification.js
index 0ccb4acee02..fea386f5b6a 100644
--- a/frontend/src/utils/listen-notification.js
+++ b/frontend/src/utils/listen-notification.js
@@ -8,11 +8,11 @@ class WebSocketService {
     this.repoId = repoId;
     this.socket = null;
     this.heartbeatInterval = null;
+    this.shouldReconnect = true;
     this.onMessageCallback = onMessageCallback;
     this.connect();
   }
 
-  // init WebSocket connect
   async connect() {
     this.socket = new WebSocket(this.url);
 
@@ -24,18 +24,19 @@ class WebSocketService {
     // listen message from WebSocket server
     this.socket.onmessage = (event) => {
       const parsedData = JSON.parse(event.data);
-      this.handleMessage(parsedData); // default handle message
+      this.handleMessage(parsedData);
     };
 
-    // handle WebSocket error
     this.socket.onerror = (error) => {
       throw error;
     };
 
     // reconnect WebSocket
     this.socket.onclose = () => {
-      this.cleanup();
-      this.reconnect();
+      if (this.shouldReconnect) {
+        this.cleanup();
+        this.reconnect();
+      }
     };
   }
 
@@ -82,6 +83,14 @@ class WebSocketService {
     clearInterval(this.heartbeatInterval);
   }
 
+  close() {
+    this.shouldReconnect = false;
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.close();
+    }
+    this.cleanup();
+  }
+
   reconnect() {
     setTimeout(() => {
       this.connect(this.repoId);

From 38f6d39c4194335b06903f34b95466bc247eeb7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Thu, 21 Nov 2024 10:05:36 +0800
Subject: [PATCH 06/11] update

---
 .../lib-content-view/lib-content-view.js      |  5 +--
 frontend/src/utils/constants.js               |  1 +
 ...n-notification.js => websocket-service.js} | 40 +++++++++----------
 seahub/base/context_processors.py             |  3 +-
 seahub/settings.py                            |  3 ++
 seahub/templates/base_for_react.html          |  3 +-
 6 files changed, 28 insertions(+), 27 deletions(-)
 rename frontend/src/utils/{listen-notification.js => websocket-service.js} (70%)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index b88b1289717..47742fd4554 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -32,7 +32,7 @@ import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
 import { VIEW_TYPE } from '../../metadata/constants';
-import WebSocketService from '../../utils/listen-notification';
+import WebSocketService from '../../utils/websocket-service';
 import '../../css/lib-content-view.css';
 
 dayjs.extend(relativeTime);
@@ -54,6 +54,7 @@ class LibContentView extends React.Component {
     if (storedTreePanelState != undefined) {
       isTreePanelShown = storedTreePanelState == 'true';
     }
+    this.socket = new WebSocketService(this.onMessageCallback, this.props.repoID);
     this.onMessageCallback = this.onMessageCallback.bind(this);
     this.state = {
       currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
@@ -147,8 +148,6 @@ class LibContentView extends React.Component {
   componentDidMount() {
     this.unsubscribeEvent = this.props.eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
     this.calculatePara(this.props);
-    this.socket = new WebSocketService(this.onMessageCallback, this.props.repoID);
-
   }
 
   onMessageCallback = (data) => {
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 7d7b4bd9d68..d2422cdb41e 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -25,6 +25,7 @@ export const fileServerRoot = window.app.config.fileServerRoot;
 export const useGoFileserver = window.app.config.useGoFileserver;
 export const seafileVersion = window.app.config.seafileVersion;
 export const serviceURL = window.app.config.serviceURL;
+export const notificationServerUrl = window.app.config.notificationServerUrl;
 export const appAvatarURL = window.app.config.avatarURL;
 export const faviconPath = window.app.config.faviconPath;
 export const loginBGPath = window.app.config.loginBGPath;
diff --git a/frontend/src/utils/listen-notification.js b/frontend/src/utils/websocket-service.js
similarity index 70%
rename from frontend/src/utils/listen-notification.js
rename to frontend/src/utils/websocket-service.js
index fea386f5b6a..db0bc47f5de 100644
--- a/frontend/src/utils/listen-notification.js
+++ b/frontend/src/utils/websocket-service.js
@@ -1,13 +1,13 @@
-import { userAPI } from '../utils/user-api';
+import { userAPI } from './user-api';
+import { notificationServerUrl } from './constants';
 
 
 class WebSocketService {
   constructor(onMessageCallback, repoId) {
 
-    this.url = 'ws://localhost:8083'; // WebSocket address;
+    this.url = notificationServerUrl; // WebSocket address;
     this.repoId = repoId;
     this.socket = null;
-    this.heartbeatInterval = null;
     this.shouldReconnect = true;
     this.onMessageCallback = onMessageCallback;
     this.connect();
@@ -24,7 +24,7 @@ class WebSocketService {
     // listen message from WebSocket server
     this.socket.onmessage = (event) => {
       const parsedData = JSON.parse(event.data);
-      this.handleMessage(parsedData);
+      this.onMessageCallback(parsedData);
     };
 
     this.socket.onerror = (error) => {
@@ -34,7 +34,6 @@ class WebSocketService {
     // reconnect WebSocket
     this.socket.onclose = () => {
       if (this.shouldReconnect) {
-        this.cleanup();
         this.reconnect();
       }
     };
@@ -65,30 +64,27 @@ class WebSocketService {
     return jsonData;
   }
 
-  handleMessage(data) {
-    switch (data.type) {
-      case 'file-lock-changed':
-        this.onMessageCallback(data); // Callback function to process message
-        break;
-      case 'folder-perm-changed':
-        // Handle folder permission changed message
-        break;
-      case 'repo-update':
-        // Handle repository update message
-        break;
-    }
-  }
-
-  cleanup() {
-    clearInterval(this.heartbeatInterval);
+  formatUnSubscriptionMsg() {
+    const jsonData = {
+      type: 'unsubscribe',
+      content: {
+        repos: [
+          {
+            id: this.repoId
+          },
+        ],
+      },
+    };
+    return jsonData;
   }
 
   close() {
     this.shouldReconnect = false;
     if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      const msg = this.formatUnSubscriptionMsg();
+      this.socket.send(JSON.stringify(msg));
       this.socket.close();
     }
-    this.cleanup();
   }
 
   reconnect() {
diff --git a/seahub/base/context_processors.py b/seahub/base/context_processors.py
index 87be112bc09..598efab5dee 100644
--- a/seahub/base/context_processors.py
+++ b/seahub/base/context_processors.py
@@ -173,7 +173,8 @@ def base(request):
         'side_nav_footer_custom_html': SIDE_NAV_FOOTER_CUSTOM_HTML,
         'about_dialog_custom_html': ABOUT_DIALOG_CUSTOM_HTML,
         'enable_repo_auto_del': ENABLE_REPO_AUTO_DEL,
-        'enable_seadoc': ENABLE_SEADOC
+        'enable_seadoc': ENABLE_SEADOC,
+        'notification_server_url': dj_settings.NOTIFICATION_SERVER_URL,
     }
 
     if request.user.is_staff:
diff --git a/seahub/settings.py b/seahub/settings.py
index 9cfd12d23e4..f72a3cd1ccb 100644
--- a/seahub/settings.py
+++ b/seahub/settings.py
@@ -837,6 +837,9 @@ def genpassword():
 SEADOC_SERVER_URL = 'http://127.0.0.1:7070'
 FILE_CONVERTER_SERVER_URL = 'http://127.0.0.1:8888'
 
+# Settings for notification
+NOTIFICATION_SERVER_URL = ''
+
 
 ############################
 # Settings for Seahub Priv #
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 9f939f18ad4..4a08c47d012 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -55,7 +55,8 @@
             useGoFileserver: {% if USE_GO_FILESERVER %} true {% else %} false {% endif %},
             serviceURL: '{{ service_url }}',
             seafileVersion: '{{ seafile_version }}',
-            avatarURL: '{{ avatar_url }}'
+            avatarURL: '{{ avatar_url }}',
+            notificationServerUrl: '{{ notification_server_url }}'
         },
         pageOptions: {
             csrfToken: "{{ csrf_token }}",

From 0c38fc9199dd664ed1053ce4388e658695fbeacc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Sat, 23 Nov 2024 10:21:25 +0800
Subject: [PATCH 07/11] update

---
 .../lib-content-view/lib-content-view.js      | 20 +++++++++++--------
 frontend/src/utils/websocket-service.js       | 12 ++++++++---
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 47742fd4554..b361fda62bf 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -32,7 +32,7 @@ import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import SelectedDirentsToolbar from '../../components/toolbar/selected-dirents-toolbar';
 import { VIEW_TYPE } from '../../metadata/constants';
-import WebSocketService from '../../utils/websocket-service';
+import WebSocketClient from '../../utils/websocket-service';
 import '../../css/lib-content-view.css';
 
 dayjs.extend(relativeTime);
@@ -54,7 +54,7 @@ class LibContentView extends React.Component {
     if (storedTreePanelState != undefined) {
       isTreePanelShown = storedTreePanelState == 'true';
     }
-    this.socket = new WebSocketService(this.onMessageCallback, this.props.repoID);
+    this.socket = new WebSocketClient(this.onMessageCallback, this.props.repoID);
     this.onMessageCallback = this.onMessageCallback.bind(this);
     this.state = {
       currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
@@ -164,14 +164,18 @@ class LibContentView extends React.Component {
       if (dirRouter === notifRouter) {
         const dirent = { name: data.content.path.split('/').pop() };
         if (data.content.change_event === 'locked') {
-          if (dirent.name.endsWith('.sdoc')) {
+          if (data.content.expire === -1) {
             this.updateDirent(dirent, 'is_freezed', true);
+            this.updateDirent(dirent, 'is_locked', true);
+            this.updateDirent(dirent, 'locked_by_me', true);
+            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
+          } else {
+            this.updateDirent(dirent, 'is_freezed', false);
+            this.updateDirent(dirent, 'is_locked', true);
+            this.updateDirent(dirent, 'locked_by_me', false);
+            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
           }
-          this.updateDirent(dirent, 'is_locked', true);
-          this.updateDirent(dirent, 'locked_by_me', true);
-          this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
-        }
-        else if (data.content.change_event === 'unlocked') {
+        } else if (data.content.change_event === 'unlocked') {
           this.updateDirent(dirent, 'is_locked', false);
           this.updateDirent(dirent, 'locked_by_me', false);
           this.updateDirent(dirent, 'lock_owner_name', '');
diff --git a/frontend/src/utils/websocket-service.js b/frontend/src/utils/websocket-service.js
index db0bc47f5de..d402fc1b91f 100644
--- a/frontend/src/utils/websocket-service.js
+++ b/frontend/src/utils/websocket-service.js
@@ -2,7 +2,7 @@ import { userAPI } from './user-api';
 import { notificationServerUrl } from './constants';
 
 
-class WebSocketService {
+class WebSocketClient {
   constructor(onMessageCallback, repoId) {
 
     this.url = notificationServerUrl; // WebSocket address;
@@ -24,7 +24,13 @@ class WebSocketService {
     // listen message from WebSocket server
     this.socket.onmessage = (event) => {
       const parsedData = JSON.parse(event.data);
-      this.onMessageCallback(parsedData);
+      // jwt-expire reconnect
+      if (parsedData.type === 'jwt-expired') {
+        const msg = this.formatSubscriptionMsg();
+        this.socket.send(JSON.stringify(msg));
+      } else {
+        this.onMessageCallback(parsedData);
+      }
     };
 
     this.socket.onerror = (error) => {
@@ -94,4 +100,4 @@ class WebSocketService {
   }
 }
 
-export default WebSocketService;
+export default WebSocketClient;

From c0cb8e6e0258b7801f47ff8a20e0098d292c6c5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Sat, 23 Nov 2024 16:19:05 +0800
Subject: [PATCH 08/11] optimize code

---
 frontend/src/pages/lib-content-view/lib-content-view.js | 9 +++------
 frontend/src/utils/websocket-service.js                 | 4 +++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index b361fda62bf..7e6c8112c1f 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -166,15 +166,12 @@ class LibContentView extends React.Component {
         if (data.content.change_event === 'locked') {
           if (data.content.expire === -1) {
             this.updateDirent(dirent, 'is_freezed', true);
-            this.updateDirent(dirent, 'is_locked', true);
-            this.updateDirent(dirent, 'locked_by_me', true);
-            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
           } else {
             this.updateDirent(dirent, 'is_freezed', false);
-            this.updateDirent(dirent, 'is_locked', true);
-            this.updateDirent(dirent, 'locked_by_me', false);
-            this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
           }
+          this.updateDirent(dirent, 'is_locked', true);
+          this.updateDirent(dirent, 'locked_by_me', true);
+          this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
         } else if (data.content.change_event === 'unlocked') {
           this.updateDirent(dirent, 'is_locked', false);
           this.updateDirent(dirent, 'locked_by_me', false);
diff --git a/frontend/src/utils/websocket-service.js b/frontend/src/utils/websocket-service.js
index d402fc1b91f..2f2fca4d877 100644
--- a/frontend/src/utils/websocket-service.js
+++ b/frontend/src/utils/websocket-service.js
@@ -10,7 +10,9 @@ class WebSocketClient {
     this.socket = null;
     this.shouldReconnect = true;
     this.onMessageCallback = onMessageCallback;
-    this.connect();
+    if (notificationServerUrl !== '') {
+      this.connect();
+    }
   }
 
   async connect() {

From e1859851c04deacc6af96e1d858a7aaa4ff99f10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=B0=B8=E5=BC=BA?=
 <11704063+s-yongqiang@user.noreply.gitee.com>
Date: Mon, 25 Nov 2024 16:47:19 +0800
Subject: [PATCH 09/11] Update lib-content-view.js

---
 frontend/src/pages/lib-content-view/lib-content-view.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 7e6c8112c1f..6c87154516c 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -171,7 +171,8 @@ class LibContentView extends React.Component {
           }
           this.updateDirent(dirent, 'is_locked', true);
           this.updateDirent(dirent, 'locked_by_me', true);
-          this.updateDirent(dirent, 'lock_owner_name', data.content.lock_user[0]);
+          let lockName = data.content.lock_user.split('@');
+          this.updateDirent(dirent, 'lock_owner_name', lockName[0]);
         } else if (data.content.change_event === 'unlocked') {
           this.updateDirent(dirent, 'is_locked', false);
           this.updateDirent(dirent, 'locked_by_me', false);

From 6c1082b8a44fe6225c5d175923f492146641e2bc Mon Sep 17 00:00:00 2001
From: r350178982 <32759763+r350178982@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:20:01 +0800
Subject: [PATCH 10/11] Update lib-content-view.js

---
 frontend/src/pages/lib-content-view/lib-content-view.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 6c87154516c..854f0f063f3 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -55,7 +55,6 @@ class LibContentView extends React.Component {
       isTreePanelShown = storedTreePanelState == 'true';
     }
     this.socket = new WebSocketClient(this.onMessageCallback, this.props.repoID);
-    this.onMessageCallback = this.onMessageCallback.bind(this);
     this.state = {
       currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
       isTreePanelShown: isTreePanelShown, // display the 'dirent tree' side panel

From a706a823370ab5df8fd7cefc2c381d358f7f51f8 Mon Sep 17 00:00:00 2001
From: r350178982 <32759763+r350178982@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:56:22 +0800
Subject: [PATCH 11/11] remove-userless-code

---
 .../lib-content-view/lib-content-view.js      |  6 ---
 .../header-toolbar/header-toolbar.js          | 15 -------
 frontend/src/pages/markdown-editor/index.js   | 26 +----------
 .../src/pages/plain-markdown-editor/index.js  |  2 -
 frontend/src/utils/collab-server.js           | 43 -------------------
 frontend/src/utils/constants.js               |  1 -
 seahub/settings.py                            | 22 ++--------
 seahub/templates/base_for_react.html          |  1 -
 seahub/templates/file_view_react.html         |  1 -
 .../templates/markdown_file_view_react.html   |  1 -
 .../plain_markdown_file_view_react.html       |  1 -
 seahub/views/__init__.py                      |  5 +--
 seahub/views/file.py                          |  4 +-
 seahub/views/repo.py                          |  3 +-
 14 files changed, 9 insertions(+), 122 deletions(-)
 delete mode 100644 frontend/src/utils/collab-server.js

diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 854f0f063f3..18bcad3680c 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -10,7 +10,6 @@ import { navigate } from '@gatsbyjs/reach-router';
 import { gettext, siteRoot, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import collabServer from '../../utils/collab-server';
 import { Dirent, FileTag, RepoTag, RepoInfo } from '../../models';
 import TreeNode from '../../components/tree-view/tree-node';
 import treeHelper from '../../components/tree-view/tree-helper';
@@ -276,7 +275,6 @@ class LibContentView extends React.Component {
 
   componentWillUnmount() {
     window.onpopstate = this.oldonpopstate;
-    collabServer.unwatchRepo(this.props.repoID, this.onRepoUpdateEvent);
     this.unsubscribeEvent();
     this.unsubscribeEventBus && this.unsubscribeEventBus();
     this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
@@ -416,11 +414,7 @@ class LibContentView extends React.Component {
 
   // load data
   loadDirData = (path) => {
-    let repoID = this.props.repoID;
-
     // listen current repo
-    collabServer.watchRepo(repoID, this.onRepoUpdateEvent);
-
     // list used FileTags
     this.updateUsedRepoTags();
 
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index 719f8233719..dba0b765f5a 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -15,7 +15,6 @@ import Dirent from '../../../../src/models/dirent';
 
 import '../css/header-toolbar.css';
 
-const { seafileCollabServer } = window.app.config;
 const { canDownloadFile, repoID, filePath } = window.app.pageOptions;
 
 const propTypes = {
@@ -133,13 +132,6 @@ class HeaderToolbar extends React.Component {
               isStarred={this.props.fileInfo.isStarred}
             />
             <div className="topbar-btn-container">
-              {(seafileCollabServer && this.props.collabUsers.length > 0) &&
-                <CollabUsersButton
-                  className="collab-users-dropdown"
-                  users={this.props.collabUsers}
-                  id="usersButton"
-                />
-              }
               <ButtonGroup>
                 {(canLockUnlockFile && !isLocked) && (
                   <ButtonItem
@@ -261,13 +253,6 @@ class HeaderToolbar extends React.Component {
             <FileInfo toggleStar={this.props.toggleStar} editorApi={this.props.editorApi}
               fileInfo={this.props.fileInfo}/>
             <div className="topbar-btn-container">
-              {(seafileCollabServer && this.props.collabUsers.length > 0) &&
-                <CollabUsersButton
-                  className="collab-users-dropdown"
-                  users={this.props.collabUsers}
-                  id="usersButton"
-                />
-              }
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js
index dc85f84d81e..b39d5532f2b 100644
--- a/frontend/src/pages/markdown-editor/index.js
+++ b/frontend/src/pages/markdown-editor/index.js
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import io from 'socket.io-client';
 import {
   EXTERNAL_EVENTS,
   EventBus,
@@ -22,7 +21,7 @@ const CryptoJS = require('crypto-js');
 const URL = require('url-parse');
 
 const { repoID, filePath, fileName, isLocked, lockedByMe } = window.app.pageOptions;
-const { siteRoot, serviceUrl, seafileCollabServer } = window.app.config;
+const { siteRoot, serviceUrl } = window.app.config;
 const userInfo = window.app.userInfo;
 const IMAGE_SUFFIXES = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG', 'gif', 'GIF'];
 
@@ -46,7 +45,6 @@ class MarkdownEditor extends React.Component {
         id: '',
       },
       editorMode: 'rich',
-      collabServer: seafileCollabServer ? seafileCollabServer : null,
       showMarkdownEditorDialog: false,
       showShareLinkDialog: false,
       showInsertFileDialog: false,
@@ -64,16 +62,6 @@ class MarkdownEditor extends React.Component {
     };
 
     this.timer = null;
-
-    if (this.state.collabServer) {
-      const socket = io(this.state.collabServer);
-      this.socket = socket;
-      socket.on('presence', (data) => this.receivePresenceData(data));
-      socket.on('repo_update', (data) => this.receiveUpdateData(data));
-      socket.on('connect', () => {
-        this.socket_id = socket.id;
-      });
-    }
     this.editorRef = React.createRef();
     this.isParticipant = false;
     this.editorSelection = null;
@@ -92,18 +80,6 @@ class MarkdownEditor extends React.Component {
     }
   };
 
-  emitSwitchEditor = (is_editing = false) => {
-    if (userInfo && this.state.collabServer) {
-      const { repoID, path } = this.state.fileInfo;
-      this.socket.emit('presence', {
-        request: 'editing',
-        doc_id: CryptoJS.MD5(repoID + path).toString(),
-        user: userInfo,
-        is_editing,
-      });
-    }
-  };
-
   receiveUpdateData(data) {
     let currentTime = new Date();
     if ((parseFloat(currentTime - this.lastModifyTime) / 1000) <= 5) {
diff --git a/frontend/src/pages/plain-markdown-editor/index.js b/frontend/src/pages/plain-markdown-editor/index.js
index fb1c739b7d7..7a76e94a555 100644
--- a/frontend/src/pages/plain-markdown-editor/index.js
+++ b/frontend/src/pages/plain-markdown-editor/index.js
@@ -22,7 +22,6 @@ const propTypes = {
 };
 
 const { repoID, filePath, fileName, isLocked, lockedByMe } = window.app.pageOptions;
-const { seafileCollabServer } = window.app.config;
 const userInfo = window.app.userInfo;
 
 const initOptions = {
@@ -41,7 +40,6 @@ const initOptions = {
     id: '',
   },
   editorMode: 'plain',
-  collabServer: seafileCollabServer ? seafileCollabServer : null,
   showMarkdownEditorDialog: false,
   showShareLinkDialog: false,
   showInsertFileDialog: false,
diff --git a/frontend/src/utils/collab-server.js b/frontend/src/utils/collab-server.js
deleted file mode 100644
index e0ee905bdeb..00000000000
--- a/frontend/src/utils/collab-server.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import io from 'socket.io-client';
-import { name, username, contactEmail, seafileCollabServer } from './constants';
-
-const socket = (seafileCollabServer !== '') ? io(seafileCollabServer) : undefined;
-
-class CollabServer {
-
-  watchRepo(repoID, fn) {
-    if (!socket) {
-      return;
-    }
-    socket.emit('repo_update', {
-      request: 'watch_update',
-      repo_id: repoID,
-      user: {
-        name: name,
-        username: username,
-        contact_email: contactEmail,
-      },
-    });
-    socket.on('repo_update', fn);
-  }
-
-  unwatchRepo(repoID, fn) {
-    if (!socket) {
-      return;
-    }
-    socket.emit('repo_update', {
-      request: 'unwatch_update',
-      repo_id: repoID,
-      user: {
-        name: name,
-        username: username,
-        contact_email: contactEmail,
-      },
-    });
-    socket.off('repo_update', fn);
-  }
-}
-
-const collabServer = new CollabServer();
-
-export default collabServer;
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index d2422cdb41e..53ce477bc64 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -33,7 +33,6 @@ export const enableRepoAutoDel = window.app.config.enableRepoAutoDel;
 
 // pageOptions
 export const trashReposExpireDays = window.app.pageOptions.trashReposExpireDays;
-export const seafileCollabServer = window.app.pageOptions.seafileCollabServer;
 export const name = window.app.pageOptions.name;
 export const contactEmail = window.app.pageOptions.contactEmail;
 export const username = window.app.pageOptions.username;
diff --git a/seahub/settings.py b/seahub/settings.py
index f72a3cd1ccb..cb883fd65e5 100644
--- a/seahub/settings.py
+++ b/seahub/settings.py
@@ -812,22 +812,6 @@ def genpassword():
 SEND_EMAIL_ON_ADDING_SYSTEM_MEMBER = True # Whether to send email when a system staff adding new member.
 SEND_EMAIL_ON_RESETTING_USER_PASSWD = True # Whether to send email when a system staff resetting user's password.
 
-##########################
-# Settings for Extra App #
-##########################
-
-##########################
-# Settings for frontend  #
-##########################
-
-SEAFILE_COLLAB_SERVER = ''
-
-##########################
-# Settings for dtable web  #
-##########################
-
-DTABLE_WEB_SERVER = ''
-
 ##########################
 # Settings for seadoc    #
 ##########################
@@ -837,9 +821,11 @@ def genpassword():
 SEADOC_SERVER_URL = 'http://127.0.0.1:7070'
 FILE_CONVERTER_SERVER_URL = 'http://127.0.0.1:8888'
 
-# Settings for notification
-NOTIFICATION_SERVER_URL = ''
+######################################
+# Settings for notification server   #
+######################################
 
+NOTIFICATION_SERVER_URL = ''
 
 ############################
 # Settings for Seahub Priv #
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 4a08c47d012..03e2c97d253 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -60,7 +60,6 @@
         },
         pageOptions: {
             csrfToken: "{{ csrf_token }}",
-            seafileCollabServer: '{{seafile_collab_server}}',
             name: "{{request.user.username|email2nickname|escapejs}}",
             contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
             username: "{{request.user.username|escapejs}}",
diff --git a/seahub/templates/file_view_react.html b/seahub/templates/file_view_react.html
index 1cb48af86d4..c6796995a27 100644
--- a/seahub/templates/file_view_react.html
+++ b/seahub/templates/file_view_react.html
@@ -35,7 +35,6 @@
   fileType: '{{ filetype }}',
   parentDir: '{{ parent_dir|escapejs }}',
   err: '{{ err }}',
-  seafileCollabServer: '{{seafile_collab_server}}',
   contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
   lockedByMe: {% if locked_by_me %}true{% else %}false{% endif %},
   canLockUnlockFile: {% if can_lock_unlock_file %}true{% else %}false{% endif %},
diff --git a/seahub/templates/markdown_file_view_react.html b/seahub/templates/markdown_file_view_react.html
index d20eb1698b6..2984e0e57e2 100644
--- a/seahub/templates/markdown_file_view_react.html
+++ b/seahub/templates/markdown_file_view_react.html
@@ -33,7 +33,6 @@
                   isPro: '{{ is_pro }}',
                   isDocs: '{{ is_docs }}',
                   lang: '{{ LANGUAGE_CODE }}',
-                  seafileCollabServer: '{{ seafile_collab_server}}',
               },
               pageOptions: {
                   repoID: '{{ repo.id }}',
diff --git a/seahub/templates/plain_markdown_file_view_react.html b/seahub/templates/plain_markdown_file_view_react.html
index 614ca174276..6c656563768 100644
--- a/seahub/templates/plain_markdown_file_view_react.html
+++ b/seahub/templates/plain_markdown_file_view_react.html
@@ -33,7 +33,6 @@
                   isPro: '{{ is_pro }}',
                   isDocs: '{{ is_docs }}',
                   lang: '{{ LANGUAGE_CODE }}',
-                  seafileCollabServer: '{{ seafile_collab_server}}',
               },
               pageOptions: {
                   repoID: '{{ repo.id }}',
diff --git a/seahub/views/__init__.py b/seahub/views/__init__.py
index c1b9635df3e..e8b4a5eb9e2 100644
--- a/seahub/views/__init__.py
+++ b/seahub/views/__init__.py
@@ -56,9 +56,9 @@
     SHARE_LINK_EXPIRE_DAYS_MIN, ENABLE_METADATA_MANAGEMENT, \
     SHARE_LINK_EXPIRE_DAYS_MAX, SHARE_LINK_EXPIRE_DAYS_DEFAULT, \
     UPLOAD_LINK_EXPIRE_DAYS_MIN, UPLOAD_LINK_EXPIRE_DAYS_MAX, UPLOAD_LINK_EXPIRE_DAYS_DEFAULT, \
-    SEAFILE_COLLAB_SERVER, ENABLE_RESET_ENCRYPTED_REPO_PASSWORD, \
+    ENABLE_RESET_ENCRYPTED_REPO_PASSWORD, \
     ADDITIONAL_SHARE_DIALOG_NOTE, ADDITIONAL_ABOUT_DIALOG_LINKS, \
-    DTABLE_WEB_SERVER, SEADOC_SERVER_URL, SHOW_WECHAT_SUPPORT_GROUP
+    SEADOC_SERVER_URL, SHOW_WECHAT_SUPPORT_GROUP
 
 from seahub.ocm.settings import ENABLE_OCM, OCM_REMOTE_SERVERS
 from seahub.ocm_via_webdav.settings import ENABLE_OCM_VIA_WEBDAV
@@ -1112,7 +1112,6 @@ def react_fake_view(request, **kwargs):
         "guide_enabled": guide_enabled,
         'trash_repos_expire_days': expire_days if expire_days > 0 else 30,
         'max_upload_file_size': max_upload_file_size,
-        'seafile_collab_server': SEAFILE_COLLAB_SERVER,
         'storages': get_library_storages(request),
         'library_templates': list(LIBRARY_TEMPLATES.keys()),
         'enable_repo_snapshot_label': settings.ENABLE_REPO_SNAPSHOT_LABEL,
diff --git a/seahub/views/file.py b/seahub/views/file.py
index e57aa55dc79..8841ce0d270 100644
--- a/seahub/views/file.py
+++ b/seahub/views/file.py
@@ -84,7 +84,7 @@
 
 import seahub.settings as settings
 from seahub.settings import FILE_ENCODING_LIST, FILE_PREVIEW_MAX_SIZE, \
-    FILE_ENCODING_TRY_LIST, MEDIA_URL, SEAFILE_COLLAB_SERVER, ENABLE_WATERMARK, \
+    FILE_ENCODING_TRY_LIST, MEDIA_URL, ENABLE_WATERMARK, \
     SHARE_LINK_EXPIRE_DAYS_MIN, SHARE_LINK_EXPIRE_DAYS_MAX, SHARE_LINK_PASSWORD_MIN_LENGTH, \
     SHARE_LINK_FORCE_USE_PASSWORD, SHARE_LINK_PASSWORD_STRENGTH_LEVEL, \
     SHARE_LINK_EXPIRE_DAYS_DEFAULT, ENABLE_SHARE_LINK_REPORT_ABUSE, SEADOC_SERVER_URL, \
@@ -574,7 +574,6 @@ def view_lib_file(request, repo_id, path):
         'share_link_expire_days_min': SHARE_LINK_EXPIRE_DAYS_MIN,
         'share_link_expire_days_max': SHARE_LINK_EXPIRE_DAYS_MAX,
         'can_download_file': parse_repo_perm(permission).can_download,
-        'seafile_collab_server': SEAFILE_COLLAB_SERVER,
         'enable_metadata_management': ENABLE_METADATA_MANAGEMENT,
         'file_download_url': gen_file_get_url_new(repo_id, path)
     }
@@ -2128,7 +2127,6 @@ def view_sdoc_revision(request, repo_id, revision_id):
         'share_link_expire_days_min': SHARE_LINK_EXPIRE_DAYS_MIN,
         'share_link_expire_days_max': SHARE_LINK_EXPIRE_DAYS_MAX,
         'can_download_file': parse_repo_perm(permission).can_download,
-        'seafile_collab_server': SEAFILE_COLLAB_SERVER,
     }
 
     is_locked = False
diff --git a/seahub/views/repo.py b/seahub/views/repo.py
index e11c28fb9d3..ffd05811b14 100644
--- a/seahub/views/repo.py
+++ b/seahub/views/repo.py
@@ -31,7 +31,7 @@
     ENABLE_RESUMABLE_FILEUPLOAD, ENABLE_VIDEO_THUMBNAIL, \
     THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE, THUMBNAIL_SIZE_FOR_GRID, \
     MAX_NUMBER_OF_FILES_FOR_FILEUPLOAD, SHARE_LINK_EXPIRE_DAYS_MIN, \
-    SHARE_LINK_EXPIRE_DAYS_MAX, SEAFILE_COLLAB_SERVER, \
+    SHARE_LINK_EXPIRE_DAYS_MAX, \
     ENABLE_SHARE_LINK_REPORT_ABUSE, ENABLE_PDF_THUMBNAIL
 from seahub.utils.file_types import IMAGE, VIDEO, XMIND
 from seahub.thumbnail.utils import get_share_link_thumbnail_src
@@ -235,7 +235,6 @@ def view_lib_as_wiki(request, repo_id, path):
         user_can_write = False
 
     return render(request, 'view_lib_as_wiki.html', {
-        'seafile_collab_server': SEAFILE_COLLAB_SERVER,
         'repo_id': repo_id,
         'service_url': get_service_url().rstrip('/'),
         'initial_path': path,