Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App is connecting to action cable multiple times #9

Open
muhsin-k opened this issue Feb 16, 2020 · 11 comments
Open

App is connecting to action cable multiple times #9

muhsin-k opened this issue Feb 16, 2020 · 11 comments

Comments

@muhsin-k
Copy link

ActionCableConnector.js


import { ActionCable, Cable } from '@kesha-antonov/react-native-action-cable';
import { WEB_SOCKET_URL } from '../constants/url';

const connectActionCable = ActionCable.createConsumer(WEB_SOCKET_URL);

const cable = new Cable({});

import { getPubSubToken } from './AuthHelper';

import {
  addConversation,
  addMessageToConversation,
} from '../actions/conversation';

import { store } from '../store';

class ActionCableConnector {
  constructor(pubSubToken) {
    const channel = cable.setChannel(
      'RoomChannel',
      connectActionCable.subscriptions.create({
        channel: 'RoomChannel',
        pubsub_token: pubSubToken,
      }),
    );

    channel.on('received', this.onReceived);

    this.events = {
      'messageCreated': this.onMessageCreated,
    };
  }

  onReceived = ({ event, data } = {}) => {
  
    if (this.events[event] && typeof this.events[event] === 'function') {
      this.events[event](data);
    }
  };

  onMessageCreated = message => {
    store.dispatch(addMessageToConversation({ message }));
  };


}

export async function initActionCable() {
  const pubSubToken = await getPubSubToken();

  const actionCable = new ActionCableConnector(pubSubToken);
  return actionCable;
}

Root Component

import React, { Component } from 'react';
import { initActionCable } from '../../helpers/ActionCable';

class ConversationList extends Component {

  componentDidMount = () => {
    initActionCable();
  };
  render = () => {
    return (
      <Layout>
      </Layout>
    );
  };
}

export default ConversationList;

The connection to action cable is working here. But the problem is that whenever I tried to restart the app, It got connected to action cable again. So multiple events are firing. Is there any way to check the connection is already established or not?

@muhsin-k
Copy link
Author

@kesha-antonov Could you please help me with this?

@kesha-antonov
Copy link
Owner

Hi!
I need to take a look

Did you try disconnect on unmount?

@muhsin-k
Copy link
Author

@kesha-antonov
Copy link
Owner

Did you try to call

connectActionCable.disconnect()

on unmount?

And also to unsubscribe from all channels?

@muhsin-k
Copy link
Author

Yes

@cdesch
Copy link

cdesch commented Mar 1, 2020

@muhzi4u Did you find a solution for this?

@muhsin-k
Copy link
Author

muhsin-k commented Mar 2, 2020

@cdesch No. I couldn't. Are you facing the same issue?

@kesha-antonov
Copy link
Owner

@muhzi4u

...whenever I tried to restart the app...
Is it related to Fast Refresh?

@muhsin-k
Copy link
Author

muhsin-k commented Mar 2, 2020

@kesha-antonov It is happening production version too.

@marvwhere
Copy link

@muhsin-k Did you ever solve this? I am having the same issue right now. Local Development is fine, production I get every message multiple times.

@DSKonstantin
Copy link

Any updates here? Did you solve this? @marvwhere

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants