chat app demo code snippets

snippets.txt

> rails g controller home index
> rails g channel chat

-------
config/routes.rb:
-------
root 'home#index'



-------
app/views/home/index.html.erb:
-------

Chat:
<br>
<span id='chat'></span>
<hr>
Message:
<br>
<textarea id='msg'></textarea>
<hr>
<button id='send'>Send Message</button>

<script>
  document.addEventListener("DOMContentLoaded", function(){
    const msg  = document.getElementById('msg')
    const chat = document.getElementById('chat')
    const send = document.getElementById('send')
    
    // overrides received method in chat.js
    App.chat.received = function(data) {
      chat.append(data['message'])
      chat.appendChild(document.createElement('br'))
    }
    send.addEventListener('click', function(){
      App.chat.speak(msg.value)
      msg.value = ''
      msg.focus()
    });
  });
</script>



-------
app/assets/javascripts/channels/chat.js
-------

App.chat = App.cable.subscriptions.create("ChatChannel", {
  ...

  speak: function(data) {
    return this.perform('speak', { message: data })
  }
});



-------
app/channels/chat_channel.rb
-------

  def subscribed
    stream_from "some_channel"
  end
  
  ...

  def speak(data)
    ActionCable.server.broadcast 'some_channel', message: data['message']
  end
end