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

webapp/action_creators/global_actions.jsx

@@ -10,6 +10,7 @@ const ActionTypes = Constants.ActionTypes;
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Client from 'utils/client.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as Websockets from './websocket_actions.jsx';
 import * as I18n from 'i18n/i18n.jsx';
 
 import en from 'i18n/en.json';
@@ -97,10 +98,21 @@ export function emitLoadMorePostsFocusedBottomEvent() {
     AsyncClient.getPostsAfter(latestPostId, 0, Constants.POST_CHUNK_SIZE);
 }
 
-export function emitPostRecievedEvent(post) {
+export function emitPostRecievedEvent(post, websocketMessageProps) {
+    if (ChannelStore.getCurrentId() === post.channel_id) {
+        if (window.isActive) {
+            AsyncClient.updateLastViewedAt();
+        } else {
+            AsyncClient.getChannel(post.channel_id);
+        }
+    } else {
+        AsyncClient.getChannel(post.channel_id);
+    }
+
     AppDispatcher.handleServerAction({
         type: ActionTypes.RECEIVED_POST,
-        post
+        post,
+        websocketMessageProps
     });
 }
 
@@ -261,3 +273,21 @@ export function viewLoggedIn() {
     // Clear pending posts (shouldn't have pending posts if we are loading)
     PostStore.clearPendingPosts();
 }
+
+var lastTimeTypingSent = 0;
+export function emitLocalUserTypingEvent(channelId, parentId) {
+    const t = Date.now();
+    if ((t - lastTimeTypingSent) > Constants.UPDATE_TYPING_MS) {
+        Websockets.sendMessage({channel_id: channelId, action: 'typing', props: {parent_id: parentId}, state: {}});
+        lastTimeTypingSent = t;
+    }
+}
+
+export function emitRemoteUserTypingEvent(channelId, userId, postParentId) {
+    AppDispatcher.handleViewAction({
+        type: Constants.ActionTypes.USER_TYPING,
+        channelId,
+        userId,
+        postParentId
+    });
+}

webapp/action_creators/websocket_actions.jsx

@@ -0,0 +1,227 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import UserStore from 'stores/user_store.jsx';
+import PostStore from 'stores/post_store.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+import BrowserStore from 'stores/browser_store.jsx';
+import ErrorStore from 'stores/error_store.jsx';
+
+import * as Utils from 'utils/utils.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
+import * as GlobalActions from 'action_creators/global_actions.jsx';
+
+import Constants from 'utils/constants.jsx';
+const SocketEvents = Constants.SocketEvents;
+
+const MAX_WEBSOCKET_FAILS = 7;
+const WEBSOCKET_RETRY_TIME = 3000;
+
+var conn = null;
+var connectFailCount = 0;
+var pastFirstInit = false;
+
+export function initialize() {
+    if (window.WebSocket && !conn) {
+        let protocol = 'ws://';
+        if (window.location.protocol === 'https:') {
+            protocol = 'wss://';
+        }
+
+        const connUrl = protocol + location.host + ((/:\d+/).test(location.host) ? '' : Utils.getWebsocketPort(protocol)) + '/api/v1/websocket';
+
+        if (connectFailCount === 0) {
+            console.log('websocket connecting to ' + connUrl); //eslint-disable-line no-console
+        }
+
+        conn = new WebSocket(connUrl);
+
+        conn.onopen = () => {
+            if (connectFailCount > 0) {
+                console.log('websocket re-established connection'); //eslint-disable-line no-console
+                AsyncClient.getChannels();
+                AsyncClient.getPosts(ChannelStore.getCurrentId());
+            }
+
+            if (pastFirstInit) {
+                ErrorStore.clearLastError();
+                ErrorStore.emitChange();
+            }
+
+            pastFirstInit = true;
+            connectFailCount = 0;
+        };
+
+        conn.onclose = () => {
+            conn = null;
+
+            if (connectFailCount === 0) {
+                console.log('websocket closed'); //eslint-disable-line no-console
+            }
+
+            connectFailCount = connectFailCount + 1;
+
+            if (connectFailCount > MAX_WEBSOCKET_FAILS) {
+                ErrorStore.storeLastError(Utils.localizeMessage('channel_loader.socketError', 'Please check connection, Mattermost unreachable. If issue persists, ask administrator to check WebSocket port.'));
+            }
+
+            ErrorStore.setConnectionErrorCount(connectFailCount);
+            ErrorStore.emitChange();
+
+            setTimeout(
+                () => {
+                    initialize();
+                },
+                WEBSOCKET_RETRY_TIME
+            );
+        };
+
+        conn.onerror = (evt) => {
+            if (connectFailCount <= 1) {
+                console.log('websocket error'); //eslint-disable-line no-console
+                console.log(evt); //eslint-disable-line no-console
+            }
+        };
+
+        conn.onmessage = (evt) => {
+            const msg = JSON.parse(evt.data);
+            handleMessage(msg);
+        };
+    }
+}
+
+function handleMessage(msg) {
+    // Let the store know we are online. This probably shouldn't be here.
+    UserStore.setStatus(msg.user_id, 'online');
+
+    switch (msg.action) {
+    case SocketEvents.POSTED:
+    case SocketEvents.EPHEMERAL_MESSAGE:
+        handleNewPostEvent(msg);
+        break;
+
+    case SocketEvents.POST_EDITED:
+        handlePostEditEvent(msg);
+        break;
+
+    case SocketEvents.POST_DELETED:
+        handlePostDeleteEvent(msg);
+        break;
+
+    case SocketEvents.NEW_USER:
+        handleNewUserEvent();
+        break;
+
+    case SocketEvents.USER_ADDED:
+        handleUserAddedEvent(msg);
+        break;
+
+    case SocketEvents.USER_REMOVED:
+        handleUserRemovedEvent(msg);
+        break;
+
+    case SocketEvents.CHANNEL_VIEWED:
+        handleChannelViewedEvent(msg);
+        break;
+
+    case SocketEvents.PREFERENCE_CHANGED:
+        handlePreferenceChangedEvent(msg);
+        break;
+
+    case SocketEvents.TYPING:
+        handleUserTypingEvent(msg);
+        break;
+
+    default:
+    }
+}
+
+export function sendMessage(msg) {
+    if (conn && conn.readyState === WebSocket.OPEN) {
+        conn.send(JSON.stringify(msg));
+    } else if (!conn || conn.readyState === WebSocket.Closed) {
+        conn = null;
+        this.initialize();
+    }
+}
+
+export function close() {
+    if (conn && conn.readyState === WebSocket.OPEN) {
+        conn.close();
+    }
+}
+
+function handleNewPostEvent(msg) {
+    const post = JSON.parse(msg.props.post);
+    GlobalActions.emitPostRecievedEvent(post, msg.props);
+}
+
+function handlePostEditEvent(msg) {
+    // Store post
+    const post = JSON.parse(msg.props.post);
+    PostStore.storePost(post);
+    PostStore.emitChange();
+
+    // Update channel state
+    if (ChannelStore.getCurrentId() === msg.channel_id) {
+        if (window.isActive) {
+            AsyncClient.updateLastViewedAt();
+        }
+    }
+}
+
+function handlePostDeleteEvent(msg) {
+    const post = JSON.parse(msg.props.post);
+    GlobalActions.emitPostDeletedEvent(post);
+}
+
+function handleNewUserEvent() {
+    AsyncClient.getProfiles();
+    AsyncClient.getChannelExtraInfo();
+}
+
+function handleUserAddedEvent(msg) {
+    if (ChannelStore.getCurrentId() === msg.channel_id) {
+        AsyncClient.getChannelExtraInfo();
+    }
+
+    if (UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannel(msg.channel_id);
+    }
+}
+
+function handleUserRemovedEvent(msg) {
+    if (UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannels();
+
+        if (msg.props.remover_id !== msg.user_id &&
+                msg.channel_id === ChannelStore.getCurrentId() &&
+                $('#removed_from_channel').length > 0) {
+            var sentState = {};
+            sentState.channelName = ChannelStore.getCurrent().display_name;
+            sentState.remover = UserStore.getProfile(msg.props.remover_id).username;
+
+            BrowserStore.setItem('channel-removed-state', sentState);
+            $('#removed_from_channel').modal('show');
+        }
+    } else if (ChannelStore.getCurrentId() === msg.channel_id) {
+        AsyncClient.getChannelExtraInfo();
+    }
+}
+
+function handleChannelViewedEvent(msg) {
+    // Useful for when multiple devices have the app open to different channels
+    if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) {
+        AsyncClient.getChannel(msg.channel_id);
+    }
+}
+
+function handlePreferenceChangedEvent(msg) {
+    const preference = JSON.parse(msg.props.preference);
+    GlobalActions.emitPreferenceChangedEvent(preference);
+}
+
+function handleUserTypingEvent(msg) {
+    GlobalActions.emitRemoteUserTypingEvent(msg.channel_id, msg.user_id, msg.props.parent_id);
+}

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();
+        GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId);
-        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;
-        }
     }
     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();
+        GlobalActions.emitLocalUserTypingEvent(this.state.channelId, '');
-        if ((t - this.lastTime) > Constants.UPDATE_TYPING_MS) {
-            SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {parent_id: ''}, state: {}});
-            this.lastTime = t;
-        }
     }
     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
+        // Initalize websockets
-        SocketStore.addChangeListener(this.onSocketChange);
+        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 UserTypingStore from 'stores/user_typing_store.jsx';
-import UserStore from 'stores/user_store.jsx';
 
-import Constants from 'utils/constants.jsx';
+import {FormattedMessage} from 'react-intl';
-
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
-
-const SocketEvents = Constants.SocketEvents;
-
-const holders = defineMessages({
-    someone: {
-        id: 'msg_typing.someone',
-        defaultMessage: 'Someone'
-    }
-});
 
 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() {
+    componentWillMount() {
-        SocketStore.addChangeListener(this.onChange);
+        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) {
+            this.updateTypingText(UserTypingStore.getUsersTyping(nextProps.channelId, nextProps.parentId));
-                if (!this.typingUsers.hasOwnProperty(u)) {
-                    continue;
-                }
-
-                clearTimeout(this.typingUsers[u]);
-            }
-            this.typingUsers = {};
-            this.setState({text: ''});
         }
     }
 
-    componentWillUnmount() {
+    onTypingChange() {
-        SocketStore.removeChangeListener(this.onChange);
+        this.updateTypingText(UserTypingStore.getUsersTyping(this.props.channelId, this.props.parentId));
     }
 
-    onChange(msg) {
+    updateTypingText(typingUsers) {
-        let username = this.props.intl.formatMessage(holders.someone);
+        if (!typingUsers) {
-        if (msg.action === SocketEvents.TYPING &&
+            return;
-            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() {
+        const users = Object.keys(typingUsers);
-        const users = Object.keys(this.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;

webapp/root.jsx

@@ -24,11 +24,11 @@ import Sidebar from 'components/sidebar.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
-import SocketStore from 'stores/socket_store.jsx';
 import ErrorStore from 'stores/error_store.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
 import SignupTeam from 'components/signup_team.jsx';
 import * as Client from 'utils/client.jsx';
+import * as Websockets from 'action_creators/websocket_actions.jsx';
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 import SignupTeamConfirm from 'components/signup_team_confirm.jsx';
 import SignupUserComplete from 'components/signup_user_complete.jsx';
@@ -101,11 +101,10 @@ function preRenderSetup(callwhendone) {
         // Do Nothing
     };
 
+    // Make sure the websockets close
     $(window).on('beforeunload',
          () => {
-             if (window.SocketStore) {
+             Websockets.close();
-                 SocketStore.close();
-             }
          }
     );
 

webapp/stores/notificaiton_store.jsx

@@ -0,0 +1,98 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import EventEmitter from 'events';
+import Constants from 'utils/constants.jsx';
+import UserStore from './user_store.jsx';
+import ChannelStore from './channel_store.jsx';
+import * as Utils from 'utils/utils.jsx';
+const ActionTypes = Constants.ActionTypes;
+
+const CHANGE_EVENT = 'change';
+
+class NotificationStoreClass extends EventEmitter {
+    emitChange() {
+        this.emit(CHANGE_EVENT);
+    }
+
+    addChangeListener(callback) {
+        this.on(CHANGE_EVENT, callback);
+    }
+
+    removeChangeListener(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    }
+
+    handleRecievedPost(post, msgProps) {
+        // Send desktop notification
+        if ((UserStore.getCurrentId() !== post.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) {
+            let mentions = [];
+            if (msgProps.mentions) {
+                mentions = JSON.parse(msgProps.mentions);
+            }
+
+            const channel = ChannelStore.get(post.channel_id);
+            const user = UserStore.getCurrentUser();
+            const member = ChannelStore.getMember(post.channel_id);
+
+            let notifyLevel = member && member.notify_props ? member.notify_props.desktop : 'default';
+            if (notifyLevel === 'default') {
+                notifyLevel = user.notify_props.desktop;
+            }
+
+            if (notifyLevel === 'none') {
+                return;
+            } else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== Constants.DM_CHANNEL) {
+                return;
+            }
+
+            let username = Utils.localizeMessage('channel_loader.someone', 'Someone');
+            if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
+                username = post.props.override_username;
+            } else if (UserStore.hasProfile(post.user_id)) {
+                username = UserStore.getProfile(post.user_id).username;
+            }
+
+            let title = Utils.localizeMessage('channel_loader.posted', 'Posted');
+            if (channel) {
+                title = channel.display_name;
+            }
+
+            let notifyText = post.message.replace(/\n+/g, ' ');
+            if (notifyText.length > 50) {
+                notifyText = notifyText.substring(0, 49) + '...';
+            }
+
+            if (notifyText.length === 0) {
+                if (msgProps.image) {
+                    Utils.notifyMe(title, username + Utils.localizeMessage('channel_loader.uploadedImage', ' uploaded an image'), channel);
+                } else if (msgProps.otherFile) {
+                    Utils.notifyMe(title, username + Utils.localizeMessage('channel_loader.uploadedFile', ' uploaded a file'), channel);
+                } else {
+                    Utils.notifyMe(title, username + Utils.localizeMessage('channel_loader.something', ' did something new'), channel);
+                }
+            } else {
+                Utils.notifyMe(title, username + Utils.localizeMessage('channel_loader.wrote', ' wrote: ') + notifyText, channel);
+            }
+            if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
+                Utils.ding();
+            }
+        }
+    }
+}
+
+var NotificationStore = new NotificationStoreClass();
+
+NotificationStore.dispatchToken = AppDispatcher.register((payload) => {
+    const action = payload.action;
+
+    switch (action.type) {
+    case ActionTypes.RECEIVED_POST:
+        NotificationStore.handleRecievedPost(action.post, action.webspcketMessageProps);
+        NotificationStore.emitChange();
+        break;
+    }
+});
+
+export default NotificationStore;

webapp/stores/socket_store.jsx

@@ -1,343 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-import UserStore from './user_store.jsx';
-import PostStore from './post_store.jsx';
-import ChannelStore from './channel_store.jsx';
-import BrowserStore from './browser_store.jsx';
-import ErrorStore from './error_store.jsx';
-import EventEmitter from 'events';
-
-import * as Utils from 'utils/utils.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
-import * as GlobalActions from 'action_creators/global_actions.jsx';
-
-import Constants from 'utils/constants.jsx';
-const SocketEvents = Constants.SocketEvents;
-
-const CHANGE_EVENT = 'change';
-
-var conn;
-
-class SocketStoreClass extends EventEmitter {
-    constructor() {
-        super();
-
-        this.initialize = this.initialize.bind(this);
-        this.emitChange = this.emitChange.bind(this);
-        this.addChangeListener = this.addChangeListener.bind(this);
-        this.removeChangeListener = this.removeChangeListener.bind(this);
-        this.sendMessage = this.sendMessage.bind(this);
-        this.close = this.close.bind(this);
-
-        this.failCount = 0;
-        this.isInitialize = false;
-
-        this.translations = this.getDefaultTranslations();
-
-        this.initialize();
-    }
-
-    initialize() {
-        if (!UserStore.getCurrentId()) {
-            return;
-        }
-
-        this.setMaxListeners(0);
-
-        if (window.WebSocket && !conn) {
-            var protocol = 'ws://';
-            if (window.location.protocol === 'https:') {
-                protocol = 'wss://';
-            }
-
-            var connUrl = protocol + location.host + ((/:\d+/).test(location.host) ? '' : Utils.getWebsocketPort(protocol)) + '/api/v1/websocket';
-
-            if (this.failCount === 0) {
-                console.log('websocket connecting to ' + connUrl); //eslint-disable-line no-console
-            }
-
-            conn = new WebSocket(connUrl);
-
-            conn.onopen = () => {
-                if (this.failCount > 0) {
-                    console.log('websocket re-established connection'); //eslint-disable-line no-console
-                    AsyncClient.getChannels();
-                    AsyncClient.getPosts(ChannelStore.getCurrentId());
-                }
-
-                if (this.isInitialize) {
-                    ErrorStore.clearLastError();
-                    ErrorStore.emitChange();
-                }
-
-                this.isInitialize = true;
-                this.failCount = 0;
-            };
-
-            conn.onclose = () => {
-                conn = null;
-
-                if (this.failCount === 0) {
-                    console.log('websocket closed'); //eslint-disable-line no-console
-                }
-
-                this.failCount = this.failCount + 1;
-
-                if (this.failCount > 7) {
-                    ErrorStore.storeLastError({message: this.translations.socketError});
-                }
-
-                ErrorStore.setConnectionErrorCount(this.failCount);
-                ErrorStore.emitChange();
-
-                setTimeout(
-                    () => {
-                        this.initialize();
-                    },
-                    3000
-                );
-            };
-
-            conn.onerror = (evt) => {
-                if (this.failCount <= 1) {
-                    console.log('websocket error'); //eslint-disable-line no-console
-                    console.log(evt); //eslint-disable-line no-console
-                }
-            };
-
-            conn.onmessage = (evt) => {
-                const msg = JSON.parse(evt.data);
-                this.handleMessage(msg);
-                this.emitChange(msg);
-            };
-        }
-    }
-
-    emitChange(msg) {
-        this.emit(CHANGE_EVENT, msg);
-    }
-
-    addChangeListener(callback) {
-        this.on(CHANGE_EVENT, callback);
-    }
-
-    removeChangeListener(callback) {
-        this.removeListener(CHANGE_EVENT, callback);
-    }
-
-    handleMessage(msg) {
-        switch (msg.action) {
-        case SocketEvents.POSTED:
-        case SocketEvents.EPHEMERAL_MESSAGE:
-            handleNewPostEvent(msg, this.translations);
-            break;
-
-        case SocketEvents.POST_EDITED:
-            handlePostEditEvent(msg);
-            break;
-
-        case SocketEvents.POST_DELETED:
-            handlePostDeleteEvent(msg);
-            break;
-
-        case SocketEvents.NEW_USER:
-            handleNewUserEvent();
-            break;
-
-        case SocketEvents.USER_ADDED:
-            handleUserAddedEvent(msg);
-            break;
-
-        case SocketEvents.USER_REMOVED:
-            handleUserRemovedEvent(msg);
-            break;
-
-        case SocketEvents.CHANNEL_VIEWED:
-            handleChannelViewedEvent(msg);
-            break;
-
-        case SocketEvents.PREFERENCE_CHANGED:
-            handlePreferenceChangedEvent(msg);
-            break;
-
-        default:
-        }
-    }
-
-    sendMessage(msg) {
-        if (conn && conn.readyState === WebSocket.OPEN) {
-            conn.send(JSON.stringify(msg));
-        } else if (!conn || conn.readyState === WebSocket.Closed) {
-            conn = null;
-            this.initialize();
-        }
-    }
-
-    setTranslations(messages) {
-        this.translations = messages;
-    }
-
-    getDefaultTranslations() {
-        return ({
-            socketError: 'Please check connection, Mattermost unreachable. If issue persists, ask administrator to check WebSocket port.',
-            someone: 'Someone',
-            posted: 'Posted',
-            uploadedImage: ' uploaded an image',
-            uploadedFile: ' uploaded a file',
-            something: ' did something new',
-            wrote: ' wrote: '
-        });
-    }
-
-    close() {
-        if (conn && conn.readyState === WebSocket.OPEN) {
-            conn.close();
-        }
-    }
-}
-
-function handleNewPostEvent(msg, translations) {
-    // Store post
-    const post = JSON.parse(msg.props.post);
-    GlobalActions.emitPostRecievedEvent(post);
-
-    // Update channel state
-    if (ChannelStore.getCurrentId() === msg.channel_id) {
-        if (window.isActive) {
-            AsyncClient.updateLastViewedAt();
-        } else {
-            AsyncClient.getChannel(msg.channel_id);
-        }
-    } else if (UserStore.getCurrentId() !== msg.user_id || post.type !== Constants.POST_TYPE_JOIN_LEAVE) {
-        AsyncClient.getChannel(msg.channel_id);
-    }
-
-    // Send desktop notification
-    if ((UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) {
-        const msgProps = msg.props;
-
-        let mentions = [];
-        if (msgProps.mentions) {
-            mentions = JSON.parse(msg.props.mentions);
-        }
-
-        const channel = ChannelStore.get(msg.channel_id);
-        const user = UserStore.getCurrentUser();
-        const member = ChannelStore.getMember(msg.channel_id);
-
-        let notifyLevel = member && member.notify_props ? member.notify_props.desktop : 'default';
-        if (notifyLevel === 'default') {
-            notifyLevel = user.notify_props.desktop;
-        }
-
-        if (notifyLevel === 'none') {
-            return;
-        } else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== Constants.DM_CHANNEL) {
-            return;
-        }
-
-        let username = translations.someone;
-        if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
-            username = post.props.override_username;
-        } else if (UserStore.hasProfile(msg.user_id)) {
-            username = UserStore.getProfile(msg.user_id).username;
-        }
-
-        let title = translations.posted;
-        if (channel) {
-            title = channel.display_name;
-        }
-
-        let notifyText = post.message.replace(/\n+/g, ' ');
-        if (notifyText.length > 50) {
-            notifyText = notifyText.substring(0, 49) + '...';
-        }
-
-        if (notifyText.length === 0) {
-            if (msgProps.image) {
-                Utils.notifyMe(title, username + translations.uploadedImage, channel);
-            } else if (msgProps.otherFile) {
-                Utils.notifyMe(title, username + translations.uploadedFile, channel);
-            } else {
-                Utils.notifyMe(title, username + translations.something, channel);
-            }
-        } else {
-            Utils.notifyMe(title, username + translations.wrote + notifyText, channel);
-        }
-        if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
-            Utils.ding();
-        }
-    }
-}
-
-function handlePostEditEvent(msg) {
-    // Store post
-    const post = JSON.parse(msg.props.post);
-    PostStore.storePost(post);
-    PostStore.emitChange();
-
-    // Update channel state
-    if (ChannelStore.getCurrentId() === msg.channel_id) {
-        if (window.isActive) {
-            AsyncClient.updateLastViewedAt();
-        }
-    }
-}
-
-function handlePostDeleteEvent(msg) {
-    const post = JSON.parse(msg.props.post);
-    GlobalActions.emitPostDeletedEvent(post);
-}
-
-function handleNewUserEvent() {
-    AsyncClient.getProfiles();
-    AsyncClient.getChannelExtraInfo();
-}
-
-function handleUserAddedEvent(msg) {
-    if (ChannelStore.getCurrentId() === msg.channel_id) {
-        AsyncClient.getChannelExtraInfo();
-    }
-
-    if (UserStore.getCurrentId() === msg.user_id) {
-        AsyncClient.getChannel(msg.channel_id);
-    }
-}
-
-function handleUserRemovedEvent(msg) {
-    if (UserStore.getCurrentId() === msg.user_id) {
-        AsyncClient.getChannels();
-
-        if (msg.props.remover_id !== msg.user_id &&
-                msg.channel_id === ChannelStore.getCurrentId() &&
-                $('#removed_from_channel').length > 0) {
-            var sentState = {};
-            sentState.channelName = ChannelStore.getCurrent().display_name;
-            sentState.remover = UserStore.getProfile(msg.props.remover_id).username;
-
-            BrowserStore.setItem('channel-removed-state', sentState);
-            $('#removed_from_channel').modal('show');
-        }
-    } else if (ChannelStore.getCurrentId() === msg.channel_id) {
-        AsyncClient.getChannelExtraInfo();
-    }
-}
-
-function handleChannelViewedEvent(msg) {
-    // Useful for when multiple devices have the app open to different channels
-    if (ChannelStore.getCurrentId() !== msg.channel_id && UserStore.getCurrentId() === msg.user_id) {
-        AsyncClient.getChannel(msg.channel_id);
-    }
-}
-
-function handlePreferenceChangedEvent(msg) {
-    const preference = JSON.parse(msg.props.preference);
-    GlobalActions.emitPreferenceChangedEvent(preference);
-}
-
-var SocketStore = new SocketStoreClass();
-
-export default SocketStore;
-window.SocketStore = SocketStore;

webapp/stores/user_typing_store.jsx

@@ -0,0 +1,108 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import UserStore from 'stores/user_store.jsx';
+import EventEmitter from 'events';
+import * as Utils from 'utils/utils.jsx';
+
+import Constants from 'utils/constants.jsx';
+const ActionTypes = Constants.ActionTypes;
+
+const CHANGE_EVENT = 'change';
+
+class UserTypingStoreClass extends EventEmitter {
+    constructor() {
+        super();
+
+        // All typeing users by channel
+        // this.typingUsers.[channelId+postParentId].user if present then user us typing
+        // Value is timeout to remove user
+        this.typingUsers = {};
+    }
+
+    emitChange() {
+        this.emit(CHANGE_EVENT);
+    }
+
+    addChangeListener(callback) {
+        this.on(CHANGE_EVENT, callback);
+    }
+
+    removeChangeListener(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    }
+
+    usernameFromId(userId) {
+        let username = Utils.localizeMessage('msg_typing.someone', 'Someone');
+        if (UserStore.hasProfile(userId)) {
+            username = UserStore.getProfile(userId).username;
+        }
+        return username;
+    }
+
+    userTyping(channelId, userId, postParentId) {
+        const username = this.usernameFromId(userId);
+
+        // Key representing a location where users can type
+        const loc = channelId + postParentId;
+
+        // Create entry
+        if (!this.typingUsers[loc]) {
+            this.typingUsers[loc] = {};
+        }
+
+        // If we already have this user, clear it's timeout to be deleted
+        if (this.typingUsers[loc][username]) {
+            clearTimeout(this.typingUsers[loc][username].timeout);
+        }
+
+        // Set the user and a timeout to remove it
+        this.typingUsers[loc][username] = setTimeout(() => {
+            delete this.typingUsers[loc][username];
+            if (this.typingUsers[loc] === {}) {
+                delete this.typingUsers[loc];
+            }
+            this.emitChange();
+        }, Constants.UPDATE_TYPING_MS);
+        this.emitChange();
+    }
+
+    getUsersTyping(channelId, postParentId) {
+        // Key representing a location where users can type
+        const loc = channelId + postParentId;
+
+        return this.typingUsers[loc];
+    }
+
+    userPosted(userId, channelId, postParentId) {
+        const username = this.usernameFromId(userId);
+        const loc = channelId + postParentId;
+
+        if (this.typingUsers[loc]) {
+            clearTimeout(this.typingUsers[loc][username]);
+            delete this.typingUsers[loc][username];
+            if (this.typingUsers[loc] === {}) {
+                delete this.typingUsers[loc];
+            }
+            this.emitChange();
+        }
+    }
+}
+
+var UserTypingStore = new UserTypingStoreClass();
+
+UserTypingStore.dispatchToken = AppDispatcher.register((payload) => {
+    var action = payload.action;
+
+    switch (action.type) {
+    case ActionTypes.RECEIVED_POST:
+        UserTypingStore.userPosted(action.post.user_id, action.post.channel_id, action.post.parent_id);
+        break;
+    case ActionTypes.USER_TYPING:
+        UserTypingStore.userTyping(action.channelId, action.userId, action.postParentId);
+        break;
+    }
+});
+
+export default UserTypingStore;

webapp/utils/constants.jsx

@@ -83,6 +83,8 @@ export default {
 
         SHOW_SEARCH: null,
 
+        USER_TYPING: null,
+
         TOGGLE_IMPORT_THEME_MODAL: null,
         TOGGLE_INVITE_MEMBER_MODAL: null,
         TOGGLE_DELETE_POST_MODAL: null,