Ruby on Rails, ActionCable, Messages don't show up

Question

thanks for helping in advance!

I'm new to rails, and have been trying to follow this guide: https://www.youtube.com/watch?v=tyNepRO_ERc&feature=youtu.be

I've implemented ActionCable in the past before school got busy, and not without some trouble then--and now it is causing me trouble yet again. I reach 17:00mins in that video with no problem, and everything makes sense--however when I send in the command it does not bring up any message.

So, what I do see:

"hello world" is showing up, but not any given input (not even upon reloading the page)

First in my terminal:

Started GET "/cable" for ::1 at 2016-05-23 21:45:00 -0600

Started GET "/cable/" [WebSocket] for ::1 at 2016-05-23 21:45:00 -0600

Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)

RoomChannel is transmitting the subscription confirmation

RoomChannel is streaming from room_channel

RoomChannel#speak({"message"=>"Travis: Neat!"})

[ActionCable] Broadcasting to room_channel: "Travis: Neat!"

RoomChannel transmitting "Travis: Neat!" (via streamed from room_channel)

Web Console:

App.room.speak('Travis: Neat!')

true

I could post some code, I should post some code, but I am fairly sure that all of my code follows the video. I'll be sorting through it for awhile still, I'm just more looking for any tips/insight/help for other ideas/things to check. I've had a similar problem before in my previous attempts of implementing ActionCable, where the messages will even be sent in and processed, but not showing up until reloading the web page.

Thank you for any help,

... okay, I guess I better put some code first:

javascripts/channels/room.coffee

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

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

# Called when there's incoming data on the websocket for this channel
received: (data) ->
$('#messages').append "<div>#{data}</div>"

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

javascripts/cable.coffee

#= require action_cable
#= require_self
#= require_tree ./channels
#
@App ||= {}
App.cable = ActionCable.createConsumer()

channels/room_channel.rb

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

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

/controllers/rooms_controller.rb

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

/models/message.rb

class Message < ApplicationRecord
    after_create_commit { BroadcastMessageJob.perform_later self  }
end

/views/messages/_message.html.erb

<p> <%= message.content %> </p>

/views/rooms/show.html.erb

<h1>ActionCable Chat</h1>

    <%= render @messages %>

/config/environments/development.rb (Here I have inserted this line, which actually fixed the problem for me last time I tried using ActionCable months ago)

ActionCable.server.config.disable_request_forgery_protection = true

/config/cable.yml

production:
  adapter: redis
  url: redis://localhost:6379/1

/config/database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5
  timeout: 5000
development:
  <<: *default
  database: [InsertNameOfMyAppHere]_development

Honestly, I know, my Gemfile is a mess:

   ruby '2.3.1'
    source 'https://rubygems.org'
    
    
    # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
    gem 'rails','>= 5.0.0.rc1'
    gem 'pg'
    # Use sqlite3 as the database for Active Record
    
    #gem 'sqlite3'
    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 5.0'
    # Use Uglifier as compressor for JavaScript assets
    gem 'uglifier', '>= 1.3.0'
    # Use CoffeeScript for .coffee assets and views
    gem 'coffee-rails', '~> 4.1'
    # See https://github.com/rails/execjs#readme for more supported runtimes
    # gem 'therubyracer', platforms: :ruby
    
    # Use jquery as the JavaScript library
    gem 'jquery-rails'
    # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
    gem 'turbolinks'
    # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
    gem 'jbuilder', '~> 2.0'
    # bundle exec rake doc:rails generates the API under doc/api.
    gem 'sdoc', '~> 0.4.0', group: :doc
    
    # Use ActiveModel has_secure_password
    # gem 'bcrypt', '~> 3.1.7'
    
    # Use Unicorn as the app server
    # gem 'unicorn'
    
    # Use Capistrano for deployment
    # gem 'capistrano-rails', group: :development
    
    group :development, :test do
      # Call 'byebug' anywhere in the code to stop execution and get a debugger console
      gem 'byebug'
    end
    
    group :development do
      # Access an IRB console on exception pages or by using <%= console %> in views
      gem 'web-console', '~> 2.0'
    
      # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
      gem 'spring'
    end
    
    gem 'devise', '>= 4.0.0.rc1'
    gem 'sass', '~> 3.4', '>= 3.4.20'
    gem 'acts_as_votable', '~> 0.10.0'
    #comments/discussions:
    gem 'simple_form', '~> 3.2', '>= 3.2.1'
    gem 'puma'
    gem 'actioncable', '~> 5.0.0.rc1'
    gem 'therubyracer'
    gem 'execjs'
    gem 'record_tag_helper'
    gem 'redis'

My terminal upon starting the server

Array values in the parameter to `Gem.paths=` are deprecated.
Please use a String or nil.
An Array ({"GEM_PATH"=>["/Users/Kegan/.rvm/gems/ruby-2.3.1", "/Users/Kegan/.rvm/gems/ruby-2.3.1@global"]}) was passed in from bin/rails:3:in `load'
=> Booting Puma
=> Rails 5.0.0.rc1 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
[Simple Form] Simple Form is not configured in the application and will use the default values. Use `rails generate simple_form:install` to generate the Simple Form configuration.
Puma starting in single mode...
* Version 3.4.0 (ruby 2.3.1-p112), codename:
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

[In response to Graham Slick]

App.room.speak(‘Does This Work?’) true

———————————————————————

Does This Work?

———————————————————————

Added Code: (Javascripts/channels/room.coffee)

  received: (data) ->
    console.log(data)
    $('#messages').append "<div>#{data}</div>"

can you add a console.log(data) in your received action (javascripts/channels/room.coffee) ? what do you see in chrome's console when you send a message with that console.log added ? — Graham Slick
Web Console: ( App.room.speak(‘Does This Work?’) true ) Response from Log: ( Does This Work? ) Added Code: received: (data) -> console.log(data) $('#messages').append "<div>#{data}</div>" — Kegan

Graham Slick Graham Slick · Accepted Answer · 2016-05-25T17:44:15

You don't have any div with a #messages id so:

$('#messages').append "<div>#{data}</div>"

Will not work. Add it to your html in your views/rooms/show.html.erb:

 <h1>ActionCable chat</h1>
 <div id="messages">
   <%= render @messages %>
 </div>

Also, your jquery isn't right, it should be:

 $('#messages').append("<div>" + data + "</div>")

Ruby on Rails, ActionCable, Messages don't show up

1 Answers