Basic client action cable connection

action_cable_client.js

// somewhere in ./app.js
if (this.state.authenticated) {
  this.cable = connectWS(accessToken, client, uid);
}

// ./channels/connection.js
import ActionCable from 'actioncable';
import { env } from '../env_vars';

export function connectWS(accessToken, client, uid) {
  return ActionCable.createConsumer(`${env().REACT_APP_WS_URL}/?access-token=${accessToken}&client=${client}&uid=${uid}`);
}

// ./channels/messages_channel.js
import { truncate } from '../utils';

export default class MessagesChannel {
  constructor(props) {
    this.props = props;
  }

  subscribe() {
    const { cable } = this.props;
    if (cable) {
      this.messages = cable.subscriptions.create('MessagesChannel');
      this.messages.connected = () => this.handleConnected();
      this.messages.disconnected = () => this.handleDisconnected();
      this.messages.received = (d) => this.handleReceived(d);
    }
  }

  handleConnected() {
    // console.log('connected messagfes ws');
  }


  handleDisconnected() {
    console.log("handling disconnect");
    if (this.messages) {
      const { cable } = this.props;
      cable.subscriptions.remove(this.messages);
      console.log("removing subscriptions");
    }
  }


  handleReceived(data) {
    if (data.action !== 'destroy' && data.message && data.message.active) {
      // do something (in this case it creates a notification)
      new Notification('Nuevo mensaje!', {
        body: truncate(data.message.message, 20)
      });
    }
    this.props.handleReceivedData(data);
  }
}