WIP: transplant websocket processes to WebsocketContainer

config/logger/config.dev.js

@@ -27,4 +27,5 @@ module.exports = {
    * configure level for client
    */
   'growi:app': 'debug',
+  'growi:services:*': 'debug',
 };

src/client/js/app.js

@@ -51,7 +51,6 @@ import CommentContainer from './services/CommentContainer';
 import EditorContainer from './services/EditorContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 
-
 const logger = loggerFactory('growi:app');
 
 if (!window) {
@@ -107,6 +106,8 @@ const injectableContainers = [
 ];
 window.appContainer = appContainer;
 
+logger.info('unstated containers have been initialized');
+
 // backward compatibility
 const crowi = appContainer;
 window.crowi = appContainer;
@@ -115,8 +116,6 @@ if (isLoggedin) {
   appContainer.fetchUsers();
 }
 
-const socket = appContainer.getWebSocket();
-
 const crowiRenderer = new GrowiRenderer(crowi, null, {
   mode: 'page',
   isAutoSetup: false, // manually setup because plugins may configure it
@@ -484,65 +483,6 @@ if (adminGrantSelectorElem != null) {
   );
 }
 
-socket.on('page:create', (data) => {
-  // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
-    return;
-  }
-
-  logger.debug({ obj: data }, `websocket on 'page:create'`); // eslint-disable-line quotes
-
-  // update PageStatusAlert
-  if (data.page.path === pagePath) {
-    pageContainer.setLatestRemotePageData(data.page, data.user);
-  }
-});
-socket.on('page:update', (data) => {
-  // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
-    return;
-  }
-
-  logger.debug({ obj: data }, `websocket on 'page:update'`); // eslint-disable-line quotes
-
-  if (data.page.path === pagePath) {
-    // update PageStatusAlert
-    pageContainer.setLatestRemotePageData(data.page, data.user);
-    // update PageEditorByHackmd
-    const pageEditorByHackmd = appContainer.getComponentInstance('PageEditorByHackmd');
-    if (pageEditorByHackmd != null) {
-      const page = data.page;
-      pageEditorByHackmd.setRevisionId(page.revision._id, page.revisionHackmdSynced);
-      pageEditorByHackmd.setHasDraftOnHackmd(data.page.hasDraftOnHackmd);
-    }
-  }
-});
-socket.on('page:delete', (data) => {
-  // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
-    return;
-  }
-
-  logger.debug({ obj: data }, `websocket on 'page:delete'`); // eslint-disable-line quotes
-
-  // update PageStatusAlert
-  if (data.page.path === pagePath) {
-    pageContainer.setLatestRemotePageData(data.page, data.user);
-  }
-});
-socket.on('page:editingWithHackmd', (data) => {
-  // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
-    return;
-  }
-
-  logger.debug({ obj: data }, `websocket on 'page:editingWithHackmd'`); // eslint-disable-line quotes
-
-  if (data.page.path === pagePath) {
-    pageContainer.setState({ isHackmdDraftUpdatingInRealtime: true });
-  }
-});
-
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
   ReactDOM.render(

src/client/js/services/AppContainer.js

@@ -1,7 +1,6 @@
 import { Container } from 'unstated';
 
 import axios from 'axios';
-import io from 'socket.io-client';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
 
@@ -52,8 +51,6 @@ export default class AppContainer extends Container {
 
     this.recoverData();
 
-    this.socket = io();
-
     this.containerInstances = {};
     this.componentInstances = {};
   }
@@ -136,10 +133,6 @@ export default class AppContainer extends Container {
     return this.isDocSaved;
   }
 
-  getWebSocket() {
-    return this.socket;
-  }
-
   getEmojiStrategy() {
     return emojiStrategy;
   }

src/client/js/services/PageContainer.js

@@ -1,7 +1,11 @@
 import { Container } from 'unstated';
 
+import loggerFactory from '@alias/logger';
+
 import * as entities from 'entities';
 
+const logger = loggerFactory('growi:services:PageContainer');
+
 /**
  * Service container related to Page
  * @extends {Container} unstated Container
@@ -17,6 +21,7 @@ export default class PageContainer extends Container {
     const mainContent = document.querySelector('#content-main');
 
     if (mainContent == null) {
+      logger.debug('#content-main element is not exists');
       return;
     }
 
@@ -29,7 +34,7 @@ export default class PageContainer extends Container {
       revisionId,
       revisionCreatedAt: +mainContent.getAttribute('data-page-revision-created'),
       revisionIdHackmdSynced: mainContent.getAttribute('data-page-revision-id-hackmd-synced'),
-      path: mainContent.getAttribute['data-path'],
+      path: mainContent.getAttribute('data-path'),
 
       templateTagData: mainContent.getAttribute('data-template-tags') || '',
 
@@ -50,6 +55,9 @@ export default class PageContainer extends Container {
 
     this.initStateMarkdown();
     this.initStateGrant();
+
+    this.addWebSocketEventHandlers = this.addWebSocketEventHandlers.bind(this);
+    this.addWebSocketEventHandlers();
   }
 
   initStateMarkdown() {
@@ -100,4 +108,74 @@ export default class PageContainer extends Container {
     });
   }
 
+  addWebSocketEventHandlers() {
+    const appContainer = this.appContainer;
+    const pageContainer = this;
+    const websocketContainer = this.appContainer.getContainer('WebsocketContainer');
+    const socket = websocketContainer.getWebSocket();
+
+    socket.on('page:create', (data) => {
+      // skip if triggered myself
+      if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
+        return;
+      }
+
+      logger.debug({ obj: data }, `websocket on 'page:create'`); // eslint-disable-line quotes
+
+      // update PageStatusAlert
+      if (data.page.path === pageContainer.state.path) {
+        this.setLatestRemotePageData(data.page, data.user);
+      }
+    });
+
+    socket.on('page:update', (data) => {
+      // skip if triggered myself
+      if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
+        return;
+      }
+
+      logger.debug({ obj: data }, `websocket on 'page:update'`); // eslint-disable-line quotes
+
+      if (data.page.path === pageContainer.state.path) {
+        // update PageStatusAlert
+        pageContainer.setLatestRemotePageData(data.page, data.user);
+        // update PageEditorByHackmd
+        const pageEditorByHackmd = appContainer.getComponentInstance('PageEditorByHackmd');
+        if (pageEditorByHackmd != null) {
+          const page = data.page;
+          pageEditorByHackmd.setRevisionId(page.revision._id, page.revisionHackmdSynced);
+          pageEditorByHackmd.setHasDraftOnHackmd(data.page.hasDraftOnHackmd);
+        }
+      }
+    });
+
+    socket.on('page:delete', (data) => {
+      // skip if triggered myself
+      if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
+        return;
+      }
+
+      logger.debug({ obj: data }, `websocket on 'page:delete'`); // eslint-disable-line quotes
+
+      // update PageStatusAlert
+      if (data.page.path === pageContainer.state.path) {
+        pageContainer.setLatestRemotePageData(data.page, data.user);
+      }
+    });
+
+    socket.on('page:editingWithHackmd', (data) => {
+      // skip if triggered myself
+      if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
+        return;
+      }
+
+      logger.debug({ obj: data }, `websocket on 'page:editingWithHackmd'`); // eslint-disable-line quotes
+
+      if (data.page.path === pageContainer.state.path) {
+        pageContainer.setState({ isHackmdDraftUpdatingInRealtime: true });
+      }
+    });
+
+  }
+
 }

src/client/js/services/WebsocketContainer.js

@@ -1,5 +1,7 @@
 import { Container } from 'unstated';
 
+import io from 'socket.io-client';
+
 /**
  * Service container related to options for WebSocket
  * @extends {Container} unstated Container
@@ -12,10 +14,16 @@ export default class WebsocketContainer extends Container {
     this.appContainer = appContainer;
     this.appContainer.registerContainer(this);
 
+    this.socket = io();
     this.socketClientId = Math.floor(Math.random() * 100000);
 
     this.state = {
     };
+
+  }
+
+  getWebSocket() {
+    return this.socket;
   }
 
   getCocketClientId() {