createConsumer is not a function

[dagumak]

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.

[som4ik]

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

[dagumak]

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.

[som4ik]

@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.

[mgoggin]

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>
    );
}

[dagumak]

@mgoggin Thanks!

[betiol]

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
};