Rails 5 tutorial: How to create a Chat with Action Cable

David Heinemeier Hansson recorded a screencast building a chat with Action Cable in Rails 5. Here we have a summary:

gem install rails -v 5.0.0.beta1

rails new chat --skip-spring

cd chat

rails g controller rooms show

rails g model message content:text

rails db:migrate

# app/controllers/rooms_controller.rb

class RoomsController < ApplicationController
  def show
    @messages = Message.all

# app/views/rooms/show.html.erb

<h1>Chat room</h1>
<div id="messages">

  Say something:

# app/view/messages/_message.html.erb

mkdir app/views/messages
<div class="“message”">


rails g channel room speak

# app/channels/room_channel.rb

class RoomChannel  '/cable'

And on app/assets/javascripts/cable.coffee we add:

@App ||= {}
App.cable = ActionCable.createConsumer()

# app/assets/javascripts/channels/room.coffee

App.room = App.cable.subscriptions.create "RoomChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    $('#messages').append data['message']
    # Called when there's incoming data on the websocket for this channel

  speak: (message) ->
    @perform 'speak', message: message

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
  if event.keyCode is 13 # return = send
    App.room.speak event.target.value
    event.target.value = ""

# app/models/message.rb

class Message < ApplicationRecord
  after_create_commit { MessageBroadcastJob.perform_later self }

And finally we create app/jobs/message_broadcast_job.rb:

rails g job MessageBroadcast
class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast 'room_channel', message: render_message(message)

    def render_message(message)
      ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })

The code is on GitHub: https://github.com/HectorPerez/chat-in-rails5

And the video of DHH:

Categories: Ruby on Rails & other tech

4 replies

  1. Hi, thanks for capturing this.
    Have you tried deploying this to AWS? Here is what we did but without success so far: https://keithpblog.wordpress.com/2015/12/30/rails-5-tutorial-chat-app-can-we-deploy-it/


  2. Hi Keith,
    I deployed the code on a single instance hosted on Cloud9 (not AWS).

    To have it working I had to add the following line in the config.ru file (in order to disable cross-site protection):

    ActionCable.server.config.disable_request_forgery_protection = true

    Kind Regards




  1. Como criar um Chat em tempo real usando Action Cable (Rails 5) - One Bit Code
%d bloggers like this: