import React, { PureComponent } from 'react'
import { ActionCable } from 'actioncable-client-react'
 
class chatRoom extends PureComponent {
    state = {
        messages = [],
        message
    }
 
    handleReceived = message => {
        this.setState({
            messages: [
                ...this.state.messages,
                message
            ]
        })
    }
 
    sendMessage = () => {
        this.props.send(this.state.message)
    }
 
    onChange = e => {
        this.setState({message: e.target.value})
    }
 
    render() {
        return (
            <div>
                <ActionCable
                    channel={'ChatRoom'}
                    room={1}
                    onReceived={this.handleReceived}
                />
                <h2>Chat Room 1</h2>
                <h5>Messages</h5>
                <ul>
                {this.state.messages.map((message) =>
                    <li key={message.id}>{message.body}</li>
                )}
                </ul>
                <input onChange={this.onChange} type='text' />
                <button onClick={this.sendMessage} type='button'>
                    Send
                </button>
            </div>
        )
    }
}
 
export default chatRoom

import { ActionCableProvider } from "actioncable-client-react";
import ChatRoom from "./chatRoom";
 
// With jwt authentication
const WSS_URL = `wss://example.com/cable?${YOUR_TOKEN}`;
 
// Without authentication
const WSS_URL = `wss://example.com/cable`;
 
export default function Container(props) {
  return (
    <ActionCableProvider url={WSS_URL}>
      <ChatRoom />
    </ActionCableProvider>
  );
}

import { ActionCableProvider } from "actioncable-client-react";
import { ActionCable } from "actioncable";
import ChatRoom from "./chatRoom";
 
// With jwt authentication
const WSS_URL = `wss://example.com/cable?${YOUR_TOKEN}`;
 
// Without authentication
const WSS_URL = `wss://example.com/cable`;
 
const cable = ActionCable.createConsumer(WSS_URL);
 
export default function Container(props) {
  return (
    <ActionCableProvider cable={cable}>
      <ChatRoom />
    </ActionCableProvider>
  );
}