simple chat

simple-chat.hbs

{{input value=username}}
{{input value=body}}
<button {{action 'sendMessage'}} data-turbo="false">
  Send
</button>

{{#each this.messages as |message|}}
  <p>{{message.username}} -> {{message.body}}</p>
{{/each}}

simple-chat.js

import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import ActionCable from "actioncable"

/**
 * @typedef {Object} AppointmentActionsComponentArgs
 * @property {string} username
 * @property {string} body
 */

/**
 * @typedef {Object} AppointmentActionsComponentSignature
 * @property {AppointmentActionsComponentArgs} Args
 */

/**
 * @extends {Component<AppointmentActionsComponentSignature>}
 */
export default class AppointmentActionsComponent extends Component {
  subscription = null

  @tracked messages = []

  constructor() {
    super(...arguments)
    this.#setupSubscription()
  }
  
  sendMessage = () => {
    this.subscription.send({
      username: this.args.username,
      body: this.args.body,
    })
  }

  #setupSubscription() {
    const consumer = ActionCable.createConsumer("ws://app.rails.localhost:3000/cable")
    console.log(consumer)

    this.subscription = consumer.subscriptions.create({
      channel: 'MessageChannel',
      room: 'messages'
    }, {
      received: (data) => {
        console.log(data)
        this.messages.push({
          username: data.username,
          body: data.body,
        })
      },
    })
  }
}