Action Cable + Stimulus

application.js

require('@rails/ujs').start()
require('turbolinks').start()

import { Controller, Application } from 'stimulus'
import HomeChannel from './home_channel'

class HomeController extends Controller {
  static targets = [
    'message'
  ]

  initialize() {
    this.channel = new HomeChannel(this)
  }

  get message() {
    return this.messageTarget.textContent
  }

  set message(msg) {
    this.messageTarget.textContent = msg
  }

  append() {
    this.channel.append(this.message + '+')
  }

  appended(data) {
    this.message = data
  }
}

const application = Application.start()
application.register('home', HomeController)

channel.js

import consumer from './consumer'

class Channel {
  constructor(channel, options = {}) {
    this.subscription = consumer.subscriptions.create(
      { channel, ...options },
      { received: (data) => this.received(data) }
    )
  }

  // data = {action: 'action_name', paylpad: 'payload of some data'}
  received(data) {
    if (this[data.action]) {
      this[data.action](data.payload)
    }
  }
}

export default Channel

consumer.js

import { createConsumer } from '@rails/actioncable'

const consumer = createConsumer()

export default consumer

my_channel.js

import Channel from './channel'

class MyChannel extends Channel {
  constructor(listener, options = {}) {
    super('MyChannel', options)

    this.listener = listener
  }

  // outgoing function
  append(text) {
    this.subscription.perform('append', { payload: text })
  }

  // incomming function
  appended(payload) {
    this.listener.appended(payload)
  }
}

export default HomeChannel