simple chat

simple-chat.hbs

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

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

simple-chat.js

import Ember from 'ember';
import ActionCable from "actioncable";

export default Ember.Component.extend({

  setupSubscription: Ember.on('init', function () {
    const consumer = ActionCable.createConsumer("ws://app.rails.localhost:3000/cable");
    console.log(consumer);

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

    this.set('subscription', subscription);
  }),

  actions: {
    sendMessage() {
      this.get('subscription').send({
        username: this.get('username'),
        body: this.get('body'),
      });
    },
  },
});