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 5e99151d82a..f0909d76c64 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 a782ce31ee2..5bfdea1c080 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 55af9f8d173..835b48eb8af 100644
--- a/seahub/settings.py
+++ b/seahub/settings.py
@@ -834,6 +834,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 5d0eb3391bb..29616998b0a 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 }}",