add WebsocketContainer

src/client/js/app.js

@@ -49,6 +49,7 @@ import AppContainer from './services/AppContainer';
 import PageContainer from './services/PageContainer';
 import CommentContainer from './components/PageComment/CommentContainer';
 import EditorContainer from './services/EditorContainer';
+import WebsocketContainer from './services/WebsocketContainer';
 
 
 const logger = loggerFactory('growi:app');
@@ -97,6 +98,7 @@ const isLoggedin = document.querySelector('.main-container.nologin') == null;
 
 // create unstated container instance
 const appContainer = new AppContainer();
+const websocketContainer = new WebsocketContainer(appContainer);
 const pageContainer = new PageContainer(appContainer);
 const commentContainer = new CommentContainer(appContainer);
 const editorContainer = new EditorContainer(appContainer, defaultEditorOptions, defaultPreviewOptions);
@@ -111,7 +113,6 @@ if (isLoggedin) {
 }
 
 const socket = appContainer.getWebSocket();
-const socketClientId = appContainer.getSocketClientId();
 
 const crowiRenderer = new GrowiRenderer(crowi, null, {
   mode: 'page',
@@ -212,7 +213,7 @@ const saveWithShortcut = function(markdown) {
   let revisionId = pageRevisionId;
   // get options
   const options = pageContainer.getCurrentOptionsToSave();
-  options.socketClientId = socketClientId;
+  options.socketClientId = websocketContainer.getCocketClientId();
   options.pageTags = pageTags;
 
   if (editorMode === 'hackmd') {
@@ -250,7 +251,7 @@ const saveWithSubmitButton = function(submitOpts) {
   let revisionId = pageRevisionId;
   // get options
   const options = pageContainer.getCurrentOptionsToSave();
-  options.socketClientId = socketClientId;
+  options.socketClientId = websocketContainer.getCocketClientId();
   options.pageTags = pageTags;
 
   // set 'submitOpts.overwriteScopesOfDescendants' to options
@@ -606,7 +607,7 @@ function updatePageStatusAlert(page, user) {
 }
 socket.on('page:create', (data) => {
   // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === socketClientId) {
+  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
     return;
   }
 
@@ -619,7 +620,7 @@ socket.on('page:create', (data) => {
 });
 socket.on('page:update', (data) => {
   // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === socketClientId) {
+  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
     return;
   }
 
@@ -639,7 +640,7 @@ socket.on('page:update', (data) => {
 });
 socket.on('page:delete', (data) => {
   // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === socketClientId) {
+  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
     return;
   }
 
@@ -652,7 +653,7 @@ socket.on('page:delete', (data) => {
 });
 socket.on('page:editingWithHackmd', (data) => {
   // skip if triggered myself
-  if (data.socketClientId != null && data.socketClientId === socketClientId) {
+  if (data.socketClientId != null && data.socketClientId === websocketContainer.getCocketClientId()) {
     return;
   }
 

src/client/js/legacy/crowi.js

@@ -270,8 +270,12 @@ Crowi.getCurrentEditorMode = function() {
 };
 
 $(() => {
-  const crowi = window.crowi;
-  const config = JSON.parse(document.getElementById('crowi-context-hydrate').textContent || '{}');
+  const appContainer = window.appContainer;
+  const websocketContainer = appContainer.getContainer('WebsocketContainer');
+  const config = appContainer.getConfig();
+
+  // backward compatibility
+  const crowi = appContainer;
 
   const pageId = $('#content-main').data('page-id');
   // const revisionId = $('#content-main').data('page-revision-id');
@@ -358,7 +362,7 @@ $(() => {
     $(this).serializeArray().forEach((obj) => {
       nameValueMap[obj.name] = obj.value; // nameValueMap.new_path is renamed page path
     });
-    nameValueMap.socketClientId = crowi.getSocketClientId();
+    nameValueMap.socketClientId = websocketContainer.getSocketClientId();
 
     $.ajax({
       type: 'POST',
@@ -396,7 +400,7 @@ $(() => {
     $(this).serializeArray().forEach((obj) => {
       nameValueMap[obj.name] = obj.value; // nameValueMap.new_path is duplicated page path
     });
-    nameValueMap.socketClientId = crowi.getSocketClientId();
+    nameValueMap.socketClientId = websocketContainer.getSocketClientId();
 
     $.ajax({
       type: 'POST',
@@ -432,7 +436,7 @@ $(() => {
     $('#delete-page-form').serializeArray().forEach((obj) => {
       nameValueMap[obj.name] = obj.value;
     });
-    nameValueMap.socketClientId = crowi.getSocketClientId();
+    nameValueMap.socketClientId = websocketContainer.getSocketClientId();
 
     $.ajax({
       type: 'POST',

src/client/js/services/AppContainer.js

@@ -32,7 +32,6 @@ export default class AppContainer extends Container {
     const userAgent = window.navigator.userAgent.toLowerCase();
     this.isMobile = /iphone|ipad|android/.test(userAgent);
 
-    this.socketClientId = Math.floor(Math.random() * 100000);
     this.page = undefined;
     this.pageEditor = undefined;
     this.isDocSaved = true;
@@ -141,10 +140,6 @@ export default class AppContainer extends Container {
     return this.socket;
   }
 
-  getSocketClientId() {
-    return this.socketClientId;
-  }
-
   getEmojiStrategy() {
     return emojiStrategy;
   }

src/client/js/services/WebsocketContainer.js

@@ -0,0 +1,25 @@
+import { Container } from 'unstated';
+
+/**
+ * Service container related to options for WebSocket
+ * @extends {Container} unstated Container
+ */
+export default class WebsocketContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+    this.appContainer.registerContainer(this);
+
+    this.socketClientId = Math.floor(Math.random() * 100000);
+
+    this.state = {
+    };
+  }
+
+  getCocketClientId() {
+    return this.socketClientId;
+  }
+
+}