Skip to content

add subscriptions on the fly #2

Description

@beornborn

Hi, you add listeners on componentDidMount.

    componentDidMount: ->
      cable = @props.cable or @context.cable
      @mounted = true

      for channel in channelNames
        if cable.channel(channel)
          cable.channel(channel).on 'connected', @handleConnected if @handleConnected?
          cable.channel(channel).on 'disconnected', @handleDisconnected if @handleDisconnected?
          cable.channel(channel).on 'rejected', @handleDisconnected if @handleDisconnected?
          cable.channel(channel).on 'received', @handleReceived if @handleReceived?

          for action in cable.channel(channel).actions
            actionMethod = "handle#{_capitalize(action)}"
            cable.channel(channel).on action, @[actionMethod] if @[actionMethod]?

I met necessity to add channels on the fly: I need connect to channels when authorize user

var Layout = React.createClass({
  childContextTypes: {
    snackbarCallback: React.PropTypes.func,
    currentUser: React.PropTypes.object,
    cable: React.PropTypes.object
  },

  getChildContext() {
    return {
      snackbarCallback: this.showSnackbar,
      currentUser: this.state.currentUser,
      cable: this.state.cable
    }
  },

  getInitialState() {
    return {currentUser: {}, cable: new Cable({})}
  },

  componentWillMount() {
    CurrentUser.authenticate((response) => {
      this.setState({currentUser: response.current_user})
      let cable = new Cable({
        UsersOnlineChannel: actionCable.subscriptions.create({channel: 'UsersOnlineChannel'}),
        GamesListChannel: actionCable.subscriptions.create({channel: 'GamesListChannel'})
      })
      this.setState({cable: cable})
    })
  },

key detail is that authenticate is async and I am creating subscription on success.

so I did this hack to make it work

var channelName = 'UsersOnlineChannel'
var UsersOnline = React.createClass({
  mixins: [CableMixin(React), ChannelMixin(channelName)],

  componentDidUpdate(prevProps, prevState, prevContext) {
    if (this.context.cable.channels !== prevContext.cable.chanels) {
      ChannelMixin(channelName).componentDidMount.apply(this)
    }
  },

is there more clean way to setup subcriptioins on the fly?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions