createConsumer is not a function
dagumak opened this issue · 6 comments
In this example in the README:
import { ActionCableProvider } from 'react-actioncable-provider'
const cable = ActionCable.createConsumer('ws://localhost:3000/cable')
export default function Container (props) {
return (
<ActionCableProvider cable={cable}>
<MyApp />
</ActionCableProvider>
)
}
Where does ActionCable
come from? I tried importing it, but it's a component.
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.
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>
);
}
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
};