Fixing websocket connection issue. Refactoring websockets into an action creator.

webapp/components/create_comment.jsx

@@ -6,7 +6,6 @@ import ReactDOM from 'react-dom';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as Client from 'utils/client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
-import SocketStore from 'stores/socket_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
@@ -17,6 +16,7 @@ import MsgTyping from './msg_typing.jsx';
 import FileUpload from './file_upload.jsx';
 import FilePreview from './file_preview.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as GlobalActions from 'action_creators/global_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -196,11 +196,7 @@ class CreateComment extends React.Component {
             }
         }
 
-        const t = Date.now();
-        if ((t - this.lastTime) > Constants.UPDATE_TYPING_MS) {
-            SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {parent_id: this.props.rootId}});
-            this.lastTime = t;
-        }
+        GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId);
     }
     handleUserInput(messageText) {
         let draft = PostStore.getCommentDraft(this.props.rootId);

webapp/components/create_post.jsx

@@ -19,7 +19,6 @@ import ChannelStore from 'stores/channel_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-import SocketStore from 'stores/socket_store.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -213,11 +212,7 @@ class CreatePost extends React.Component {
             }
         }
 
-        const t = Date.now();
-        if ((t - this.lastTime) > Constants.UPDATE_TYPING_MS) {
-            SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {parent_id: ''}, state: {}});
-            this.lastTime = t;
-        }
+        GlobalActions.emitLocalUserTypingEvent(this.state.channelId, '');
     }
     handleUserInput(messageText) {
         this.setState({messageText});

webapp/components/logged_in.jsx

@@ -5,12 +5,12 @@ import $ from 'jquery';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 import UserStore from 'stores/user_store.jsx';
-import SocketStore from 'stores/socket_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 import ErrorBar from 'components/error_bar.jsx';
+import * as Websockets from 'action_creators/websocket_actions.jsx';
 
 import {browserHistory} from 'react-router';
 
@@ -66,11 +66,6 @@ export default class LoggedIn extends React.Component {
             }
         }
     }
-    onSocketChange(msg) {
-        if (msg && msg.user_id && msg.user_id !== UserStore.getCurrentId()) {
-            UserStore.setStatus(msg.user_id, 'online');
-        }
-    }
     componentWillMount() {
         // Emit view action
         GlobalActions.viewLoggedIn();
@@ -78,8 +73,8 @@ export default class LoggedIn extends React.Component {
         // Listen for user
         UserStore.addChangeListener(this.onUserChanged);
 
-        // Add listner for socker store
-        SocketStore.addChangeListener(this.onSocketChange);
+        // Initalize websockets
+        Websockets.initialize();
 
         // Get all statuses regularally. (Soon to be switched to websocket)
         this.intervalId = setInterval(() => AsyncClient.getStatuses(), CLIENT_STATUS_INTERVAL);
@@ -178,7 +173,7 @@ export default class LoggedIn extends React.Component {
         $(window).off('focus');
         $(window).off('blur');
 
-        SocketStore.removeChangeListener(this.onSocketChange);
+        Websockets.close();
         UserStore.removeChangeListener(this.onUserChanged);
 
         $('body').off('click.userpopover');

webapp/components/msg_typing.jsx

@@ -1,21 +1,9 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import SocketStore from 'stores/socket_store.jsx';
-import UserStore from 'stores/user_store.jsx';
+import UserTypingStore from 'stores/user_typing_store.jsx';
 
-import Constants from 'utils/constants.jsx';
-
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
-
-const SocketEvents = Constants.SocketEvents;
-
-const holders = defineMessages({
-    someone: {
-        id: 'msg_typing.someone',
-        defaultMessage: 'Someone'
-    }
-});
+import {FormattedMessage} from 'react-intl';
 
 import React from 'react';
 
@@ -23,69 +11,40 @@ class MsgTyping extends React.Component {
     constructor(props) {
         super(props);
 
-        this.onChange = this.onChange.bind(this);
+        this.onTypingChange = this.onTypingChange.bind(this);
         this.updateTypingText = this.updateTypingText.bind(this);
         this.componentWillReceiveProps = this.componentWillReceiveProps.bind(this);
 
-        this.typingUsers = {};
         this.state = {
             text: ''
         };
     }
 
-    componentDidMount() {
-        SocketStore.addChangeListener(this.onChange);
+    componentWillMount() {
+        UserTypingStore.addChangeListener(this.onTypingChange);
+        this.onTypingChange();
+    }
+
+    componentWillUnmount() {
+        UserTypingStore.removeChangeListener(this.onTypingChange);
     }
 
     componentWillReceiveProps(nextProps) {
         if (this.props.channelId !== nextProps.channelId) {
-            for (const u in this.typingUsers) {
-                if (!this.typingUsers.hasOwnProperty(u)) {
-                    continue;
-                }
-
-                clearTimeout(this.typingUsers[u]);
-            }
-            this.typingUsers = {};
-            this.setState({text: ''});
+            this.updateTypingText(UserTypingStore.getUsersTyping(nextProps.channelId, nextProps.parentId));
         }
     }
 
-    componentWillUnmount() {
-        SocketStore.removeChangeListener(this.onChange);
+    onTypingChange() {
+        this.updateTypingText(UserTypingStore.getUsersTyping(this.props.channelId, this.props.parentId));
     }
 
-    onChange(msg) {
-        let username = this.props.intl.formatMessage(holders.someone);
-        if (msg.action === SocketEvents.TYPING &&
-            this.props.channelId === msg.channel_id &&
-            this.props.parentId === msg.props.parent_id) {
-            if (UserStore.hasProfile(msg.user_id)) {
-                username = UserStore.getProfile(msg.user_id).username;
-            }
-
-            if (this.typingUsers[username]) {
-                clearTimeout(this.typingUsers[username]);
-            }
-
-            this.typingUsers[username] = setTimeout(function myTimer(user) {
-                delete this.typingUsers[user];
-                this.updateTypingText();
-            }.bind(this, username), Constants.UPDATE_TYPING_MS);
-
-            this.updateTypingText();
-        } else if (msg.action === SocketEvents.POSTED && msg.channel_id === this.props.channelId) {
-            if (UserStore.hasProfile(msg.user_id)) {
-                username = UserStore.getProfile(msg.user_id).username;
-            }
-            clearTimeout(this.typingUsers[username]);
-            delete this.typingUsers[username];
-            this.updateTypingText();
+    updateTypingText(typingUsers) {
+        if (!typingUsers) {
+            return;
         }
-    }
 
-    updateTypingText() {
-        const users = Object.keys(this.typingUsers);
+        const users = Object.keys(typingUsers);
         let text = '';
         switch (users.length) {
         case 0:
@@ -129,9 +88,8 @@ class MsgTyping extends React.Component {
 }
 
 MsgTyping.propTypes = {
-    intl: intlShape.isRequired,
     channelId: React.PropTypes.string,
     parentId: React.PropTypes.string
 };
 
-export default injectIntl(MsgTyping);
+export default MsgTyping;