onReceived is never called
patrickemuller opened this issue · 7 comments
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>
)
}
}
Same problem
@nmiloserdov check if you're using "async" on backend and change to "redis". Worked for me.
but yeah, I think its bugged anyway.
@patrickemuller I use 'redis' by default. What do you mean by using "async" on the backend?
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.
@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.
@nmiloserdov @cpunion Also, I added .bind
for those methods on my frontend code. I think that was missed from the beginning.