From 9239a7353af2c67a6778ff4cabd164db62087bde Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Wed, 23 Mar 2016 10:20:52 -0400 Subject: Fixing websocket connection issue. Refactoring websockets into an action creator. --- webapp/components/create_comment.jsx | 8 +--- webapp/components/create_post.jsx | 7 +--- webapp/components/logged_in.jsx | 13 ++---- webapp/components/msg_typing.jsx | 78 +++++++++--------------------------- 4 files changed, 25 insertions(+), 81 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 0aeb70c57..177f282d3 100644 --- a/webapp/components/create_comment.jsx +++ b/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); diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 36bfbf22d..e5e99debd 100644 --- a/webapp/components/create_post.jsx +++ b/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}); diff --git a/webapp/components/logged_in.jsx b/webapp/components/logged_in.jsx index 6d35ff8c2..7ddb6b83d 100644 --- a/webapp/components/logged_in.jsx +++ b/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'); diff --git a/webapp/components/msg_typing.jsx b/webapp/components/msg_typing.jsx index b1781623c..b2d414287 100644 --- a/webapp/components/msg_typing.jsx +++ b/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); \ No newline at end of file +export default MsgTyping; -- cgit v1.2.3-1-g7c22