diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index 3d74c81cb9..cbbdb52c03 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -18,7 +18,6 @@ const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
-  dirID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
   pathExist: PropTypes.bool.isRequired,
   permission: PropTypes.bool.isRequired,
@@ -166,7 +165,6 @@ class DirPanel extends React.Component {
                 ErrMessage :
                 <Fragment>
                   <DirentListView
-                    dirID={this.props.dirID}
                     path={this.props.path}
                     repoID={this.props.repoID}
                     direntList={this.props.direntList}
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 665c92332c..b115384716 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -4,6 +4,7 @@ import { siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
+import collabServer from '../../utils/collab-server';
 import toaster from '../toast';
 import DirPanel from './dir-panel';
 import Dirent from '../../models/dirent';
@@ -82,6 +83,7 @@ class DirView extends React.Component {
         direntList: direntList,
         dirID: res.headers.oid,
       });
+      collabServer.watchRepo(this.state.repoID, this.state.path, this.state.dirID);
     }).catch(() => {
       this.setState({pathExist: false});
     });
@@ -462,7 +464,6 @@ class DirView extends React.Component {
   render() {
     return (
       <DirPanel 
-        dirID={this.state.dirID}
         pathPrefix={this.props.pathPrefix}
         currentRepoInfo={this.state.currentRepoInfo}
         path={this.state.path}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 42a5271fe7..9e6d4e815f 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, username } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
 import ModalPortal from '../modal-portal';
@@ -14,7 +14,6 @@ import toaster from '../../components/toast';
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
-  dirID: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool,
   currentRepoInfo: PropTypes.object,
   isAllItemSelected: PropTypes.bool.isRequired,
@@ -41,39 +40,6 @@ class DirentListView extends React.Component {
       isCreateFileDialogShow: false,
       fileType: ''
     };
-
-    const socket = io('https://dev.seafile.com/');
-
-    socket.emit('repo_update', {
-      request: 'watch_update',
-      repo_id: this.props.repoID,
-      user: {
-        name: username,
-        username: username,
-        constact_email: '',
-      },
-    });
-
-    socket.on('connect', function(){});
-    socket.on('repo_update', (data) => {
-      console.log(data);
-      this.checkFileUpdate();
-    });
-  }
-
-  checkFileUpdate = () => {
-    let repoID = this.props.repoID;
-    let path = this.props.path;
-
-    seafileAPI.dirMetaData(repoID, path).then((res) => {
-      if (res.data.id !== this.props.dirID) {
-        toaster.notify(<span>{gettext('This folder has been updated. ')}<a href='#' onClick={this.onRefresh}>{gettext('Refresh')}</a></span>, {duration: 3600});
-      }
-    });
-  }
-
-  onRefresh = () => {
-    location.reload();
   }
 
   onFreezedItem = () => {
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index 3fe298a2e6..0050557155 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -30,7 +30,6 @@ const propTypes = {
   isDirentSelected: PropTypes.bool.isRequired,
   isAllDirentSelected: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
-  dirID: PropTypes.string.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
   updateDirent: PropTypes.func.isRequired,
   onSideNavMenuClick: PropTypes.func.isRequired,
@@ -245,7 +244,6 @@ class MainPanel extends Component {
                     /> :
                     <Fragment>
                       <DirentListView
-                        dirID={this.props.dirID}
                         path={this.props.path}
                         repoID={repoID}
                         direntList={this.props.direntList}
diff --git a/frontend/src/repo-wiki-mode.js b/frontend/src/repo-wiki-mode.js
index 367fff7a19..997e8f2b04 100644
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -4,6 +4,7 @@ import moment from 'moment';
 import { gettext, repoID, siteRoot, initialPath, isDir, serviceUrl } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
+import collabServer from './utils/collab-server';
 import SidePanel from './pages/repo-wiki-mode/side-panel';
 import MainPanel from './pages/repo-wiki-mode/main-panel';
 import Node from './components/tree-view/node';
@@ -281,6 +282,7 @@ class Wiki extends Component {
         isDirentListLoading: false,
         dirID: res.headers.oid,
       });
+      collabServer.watchRepo(repoID, this.state.path, this.state.dirID);
     });
   }
 
@@ -837,7 +839,6 @@ class Wiki extends Component {
           onDeleteNode={this.onDeleteTreeNode}
         />
         <MainPanel
-          dirID={this.state.dirID}
           path={this.state.path}
           isViewFile={this.state.isViewFile}
           pathExist={this.state.pathExist}
diff --git a/frontend/src/utils/collab-server.js b/frontend/src/utils/collab-server.js
new file mode 100644
index 0000000000..3612e20ec1
--- /dev/null
+++ b/frontend/src/utils/collab-server.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import io from 'socket.io-client';
+import toaster from '../components/toast';
+import { seafileAPI } from './seafile-api';
+import { gettext, name, username, contactEmail, seafileCollabServer } from './constants';
+
+const socket = io(seafileCollabServer);
+
+class CollabServer {
+
+  watchRepo(repoID, path, dirID) {
+    socket.emit('repo_update', {
+      request: 'watch_update',
+      repo_id: repoID,
+      user: {
+        name: name,
+        username: username,
+        contact_email: contactEmail,
+      },
+    });
+
+    socket.on('repo_update', () => {
+      seafileAPI.dirMetaData(repoID, path).then((res) => {
+        if (res.data.id !== dirID) {
+          toaster.notify(
+            <span>
+              {gettext('This folder has been updated. ')}
+              <a href='' >{gettext('Refresh')}</a>
+            </span>,
+            {duration: 3600}
+          );
+        }
+      })
+    })
+  }
+
+  unwatchRepo() {
+    socket.off()
+  }
+}
+
+const collabServer = new CollabServer();
+
+export default collabServer;
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 593edd042a..8fb88d4ed3 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -14,6 +14,9 @@ export const lang = window.app.config.lang;
 export const fileServerRoot = window.app.config.fileServerRoot;
 
 //pageOptions
+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;
 export const canGenerateShareLink = window.app.pageOptions.canGenerateShareLink === 'True';
 export const canGenerateUploadLink = window.app.pageOptions.canGenerateUploadLink === 'True';
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 7101813528..47fa5e8429 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -37,6 +37,9 @@
             fileServerRoot: '{{ FILE_SERVER_ROOT }}'
         },
         pageOptions: {
+            seafileCollabServer: '{{seafile_collab_server}}',
+            name: "{{request.user.username|email2nickname|escapejs}}",
+            contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
             username: "{{request.user.username|escapejs}}",
             canGenerateShareLink: '{{ user.permissions.can_generate_share_link }}',
             canGenerateUploadLink: '{{ user.permissions.can_generate_upload_link }}',
diff --git a/seahub/views/__init__.py b/seahub/views/__init__.py
index 7204a56df4..3f99b12f74 100644
--- a/seahub/views/__init__.py
+++ b/seahub/views/__init__.py
@@ -55,7 +55,7 @@ import seahub.settings as settings
 from seahub.settings import AVATAR_FILE_STORAGE, \
     ENABLE_SUB_LIBRARY, ENABLE_FOLDER_PERM, ENABLE_REPO_SNAPSHOT_LABEL, \
     UNREAD_NOTIFICATIONS_REQUEST_INTERVAL, SHARE_LINK_EXPIRE_DAYS_MIN, \
-    SHARE_LINK_EXPIRE_DAYS_MAX, SHARE_LINK_EXPIRE_DAYS_DEFAULT
+    SHARE_LINK_EXPIRE_DAYS_MAX, SHARE_LINK_EXPIRE_DAYS_DEFAULT, SEAFILE_COLLAB_SERVER
 
 from seahub.wopi.settings import ENABLE_OFFICE_WEB_APP
 from seahub.onlyoffice.settings import ENABLE_ONLYOFFICE
@@ -713,6 +713,7 @@ def libraries(request):
 
     if use_new_page:
         return render(request, "react_app.html", {
+            'seafile_collab_server': SEAFILE_COLLAB_SERVER,
             'storages': get_library_storages(request),
             'enable_wiki': settings.ENABLE_WIKI,
             'enable_repo_snapshot_label': settings.ENABLE_REPO_SNAPSHOT_LABEL,
@@ -1220,6 +1221,7 @@ def choose_register(request):
 def react_fake_view(request):
 
     return render(request, "react_app.html", {
+        'seafile_collab_server': SEAFILE_COLLAB_SERVER,
         'storages': get_library_storages(request),
         'enable_wiki': settings.ENABLE_WIKI,
         'enable_repo_snapshot_label': settings.ENABLE_REPO_SNAPSHOT_LABEL,
diff --git a/seahub/views/repo.py b/seahub/views/repo.py
index f42cee0d16..c1c34bf1bb 100644
--- a/seahub/views/repo.py
+++ b/seahub/views/repo.py
@@ -29,6 +29,7 @@ from seahub.settings import ENABLE_UPLOAD_FOLDER, \
     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
+    MAX_NUMBER_OF_FILES_FOR_FILEUPLOAD, SEAFILE_COLLAB_SERVER
 from seahub.utils.file_types import IMAGE, VIDEO
 from seahub.thumbnail.utils import get_share_link_thumbnail_src
 from seahub.constants import HASH_URLS
@@ -179,6 +180,7 @@ 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,