onReceived is never called

[Patrick Edgar Müller]

What I'm trying to do?

I'm trying to use the backend with some background jobs to notify user about the "processing" time of some CSV file. For that, I'm notifying the frontend about the processed rows of the file, but, onReceived function is never called. What I'm doing wrong?

Backend

(this is working, tested manually)

# frozen_string_literal: true

class ImportedBatchChannel < ApplicationCable::Channel
  def subscribed
    stream_for ImportedBatch.find(params[:room])
  end

  def receive(data)
    puts '*****************************'
    puts data
    puts '*****************************'
  end
end

Frontend

(this is not working, OnReceived is never called)

App.js (REACT_APP_WS_URL is localhost:3001/cable for development)

<ActionCableProvider url={process.env.REACT_APP_WS_URL}>
  <MuiThemeProvider theme={theme}>
    <CssBaseline />
    <Navbar />
    <Router />
    <Footer />
  </MuiThemeProvider>
</ActionCableProvider>

ProgressBar.js

import React, { Component, Fragment } from 'react'
import { ActionCable } from 'react-actioncable-provider'
import LinearProgress from '@material-ui/core/LinearProgress'

export default class extends Component {
  state = {
    total: this.props.total,
    processed: this.props.processed,
  }

  onReceived(data) {
    console.log('Recebi', data)
    this.setState({
      total: data.totalRows,
      processed: data.processedRows,
    })
  }

  sendMessage = () => {
    this.refs.ImportedBatchChannel.perform('receive', { message: 'olha essa mensagem' })
  }

  render() {
    return (
      <Fragment>
        <ActionCable
          ref={'ImportedBatchChannel'}
          channel={{
            channel: 'ImportedBatchChannel',
            room: this.props.batchId,
          }}
          onReceived={this.onReceived}
        />

        <div className={this.props.classes.progressBar}>
          <LinearProgress
            variant="determinate"
            value={(this.state.processed / this.state.total) * 100}
          />
        </div>
        <button onClick={this.sendMessage}>Mandar Mensagem</button>
      </Fragment>
    )
  }
}

[Nikita Miloserdov]

Same problem

[Patrick Edgar Müller]

@nmiloserdov check if you're using "async" on backend and change to "redis". Worked for me.
but yeah, I think its bugged anyway.

[Nikita Miloserdov]

@patrickemuller I use 'redis' by default. What do you mean by using "async" on the backend?

[Patrick Edgar Müller]

There is and option on cable.yml that solved my problem, using redis instead os 'async' adapter.
you're using redis already, so there is nothing to change.

[Nikita Miloserdov]

@patrickemuller I found the problem. ActilnCable rejected my connection because of the custom validation of the user id. onConnected and onDisconnected callbacks helped me to figured this out.

[Nikita Miloserdov]

@cpunion you just need to describe these methods on documentation :)

[Patrick Edgar Müller]

@nmiloserdov @cpunion Also, I added .bind for those methods on my frontend code. I think that was missed from the beginning.