Open dagumak opened 5 years ago
I totally confirm that the example is not functional, i fixed the issue by doing this:
import ActionCableProvider from 'react-actioncable-provider'
import {ActionCable} from 'react-actioncable-provider'
....
return(
<ActionCableProvider url='ws://localhost:3000/cable' >
<ActionCable ref='filterChannel' channel={{channel: 'FilterResultsChannel'}} onReceived={this.onReceived} >
</ActionCable>
</ActionCableProvider>
)
but any way my consumer not receiving data that i broadcast even that ActionCable clinet is subscribing to my channel @cpunion can you support us with solution please
So is there an actual way to instantiate the cable at a later life cycle of the application? Ex, after authentication. I currently just have the provider loaded on my authenticated pages.
@cpunion data is received and i confirm the plugging is working as expected, my redis was down :/ @dagumak Frankly, I am not sure that you comment is related to the opened issue, but any way as i understand where do you define your ActionCableProvider it will do the handshake with socket.
Where does ActionCable come from? I tried importing it, but it's a component.
@dagumak, you can import ActionCable
from the actioncable
package to manually instantiate a consumer.
import ActionCable from 'actioncable';
import { ActionCableProvider } from 'react-actioncable-provider';
import App from 'app';
const cable = ActionCable.createConsumer('ws://locahost:3000/cable'); // <-------
export default function Container(props) {
return (
<ActionCableProvider cable={cable}>
<App />
</ActionCableProvider>
);
}
@mgoggin Thanks!
This worked for me.
/**
* @flow
*/
import React from 'react';
import { node, oneOfType, arrayOf, number } from 'prop-types';
import ActionCable from 'actioncable';
import { ActionCableProvider } from 'react-actioncable-provider';
const cable = ActionCable.createConsumer('ws://localhost:3000/cable');
function newOrderChannel(companyId: number) {
return cable.subscriptions.create(
{ channel: 'NewOrderChannel', company: companyId },
{
received: function(value) {
console.log(value);
}
}
);
}
export default class ActionCableContainer extends React.Component {
componentDidMount = () => newOrderChannel(this.props.companyId);
render() {
return <ActionCableProvider cable={cable}>{this.props.children}</ActionCableProvider>;
}
}
ActionCableContainer.propTypes = {
children: oneOfType([ arrayOf(node), node ]).isRequired,
companyId: number.isRequired
};
In this example in the README:
Where does
ActionCable
come from? I tried importing it, but it's a component.