diff --git a/frontend/package.json b/frontend/package.json
index fdb32bf1f5..f47f6b01d2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "reactstrap": "^6.4.0",
     "seafile-js": "^0.2.47",
     "seafile-ui": "^0.1.10",
+    "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",
     "url-loader": "0.6.2",
diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index cbbdb52c03..3d74c81cb9 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -18,6 +18,7 @@ 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,
@@ -165,6 +166,7 @@ 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 431a841033..4f36aa8319 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -34,6 +34,7 @@ class DirView extends React.Component {
       currentRepoInfo: null,
       direntList: [],
       selectedDirentList: [],
+      dirID: '',
     };
     window.onpopstate = this.onpopstate;
   }
@@ -73,12 +74,13 @@ class DirView extends React.Component {
     let repoID = this.state.repoID;
     this.setState({isDirentListLoading: true});
     seafileAPI.listDir(repoID, filePath).then(res => {
-      let direntList = res.data.map(item => {
+      let direntList = res.data.data.map(item => {
         return new Dirent(item);
       });
       this.setState({
         isDirentListLoading: false,
         direntList: direntList,
+        dirID: res.data.oid,
       });
     }).catch(() => {
       this.setState({pathExist: false});
@@ -460,6 +462,7 @@ 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 647cd1c387..6608199995 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -1,16 +1,20 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { gettext, username } from '../../utils/constants';
 import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
 import '../../css/tip-for-new-md.css';
+import io from 'socket.io-client';
+import { seafileAPI } from '../../utils/seafile-api';
+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,
@@ -37,6 +41,35 @@ 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,
+        constact_email: username,
+      },
+    });
+
+    socket.on('repo_update', (data) => {
+      console.log(data);
+      this.checkFileUpdate();
+    });
+    socket.on('connect', function(){});
+  }
+
+  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('File updated! Refresh.')
+      }
+    });
   }
 
   onFreezedItem = () => {
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index 0050557155..3fe298a2e6 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -30,6 +30,7 @@ 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,
@@ -244,6 +245,7 @@ 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 e6e028260b..882323156f 100644
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -48,6 +48,7 @@ class Wiki extends Component {
       reviewStatus: '',
       reviewID: '',
       draftFilePath: '',
+      dirID: '',
     };
     window.onpopstate = this.onpopstate;
     this.hash = '';
@@ -271,13 +272,14 @@ class Wiki extends Component {
     this.setState({isDirentListLoading: true});
     seafileAPI.listDir(repoID, filePath).then(res => {
       let direntList = [];
-      res.data.forEach(item => {
+      res.data.data.forEach(item => {
         let dirent = new Dirent(item);
         direntList.push(dirent);
       });
       this.setState({
         direntList: direntList,
         isDirentListLoading: false,
+        dirID: res.data.oid,
       });
     });
   }
@@ -835,6 +837,7 @@ 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/seahub/api2/views.py b/seahub/api2/views.py
index c2d2e9892e..d9ffa275a8 100644
--- a/seahub/api2/views.py
+++ b/seahub/api2/views.py
@@ -2047,10 +2047,14 @@ def get_dir_entrys_by_id(request, repo, path, dir_id, request_type=None):
     else:
         dentrys = dir_list + file_list
 
-    response = HttpResponse(json.dumps(dentrys), status=200,
+    data = dict()
+    data["data"] = dentrys
+    data["oid"] = dir_id
+    data["dir_perm"] = seafile_api.check_permission_by_path(repo.id, path, username)
+    response = HttpResponse(json.dumps(data), status=200,
                             content_type=json_content_type)
-    response["oid"] = dir_id
-    response["dir_perm"] = seafile_api.check_permission_by_path(repo.id, path, username)
+    # response["oid"] = dir_id
+    # response["dir_perm"] = seafile_api.check_permission_by_path(repo.id, path, username)
     return response
 
 def get_shared_link(request, repo_id, path):