ActionCable Provider for React.
npm install --save react-actioncable-provider
<ActionCableProvider>
</ActionCableProvider>
You can also use following code to specify actioncable url:
<ActionCableProvider url='ws://localhost:3000/cable'>
</ActionCableProvider>
Or custom cable:
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>
)
}
- Recommendation
You can use ActionCable.
import React, { Component, PropTypes } from 'react'
import {ActionCable} from 'react-actioncable-provider'
export default class ChatRoom extends Component {
state = {
messages: []
};
onReceived (message) {
this.setState({
messages: [
...this.state.messages,
message
]
})
}
sendMessage = () => {
const message = this.refs.newMessage.value
// Call perform or send
this.refs.roomChannel.perform('sendMessage', {message})
}
render () {
return (
<div>
<ActionCable ref='roomChannel' channel={{channel: 'RoomChannel', room: '3'}} onReceived={this.onReceived} />
<ul>
{this.state.messages.map((message) =>
<li key={message.id}>{message.body}</li>
)}
</ul>
<input ref='newMessage' type='text' />
<button onClick={this.sendMessage}>Send</button>
</div>
)
}
}
- No recommendation
You also can use this.context.cable to subscript channel, then you can receive or send data.
import React, { Component, PropTypes } from 'react'
import ActionCable from 'actioncable'
export default class ChatRoom extends Component {
static contextTypes = {
cable: PropTypes.object.isRequired
};
componentDidMount () {
this.subscription = this.context.cable.subscriptions.create(
'ChatChannel',
{
received (data) {
console.log(data)
}
}
)
}
componentWillUnmount () {
this.subscription &&
this.context.cable.subscriptions.remove(this.subscription)
}
// ... Other code
}