The action cable does not work. I need to refresh both tabs to see the message.

Question

Here is the room.coffee code:

App.room = App.cable.subscriptions.create "RoomChannel",
  connected: -> 
  disconnected: -> 

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

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

cable.coffee:

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

rooms.coffee:

$ ->
    $messages = $('messages')
    $messages.scrollTop $messages.prop('scrollHieght')
    $('#message_input').focus()

$(document).on 'keypress','message_input','e'->
    if e.keycode == 13 and e.target.value
    App.room.speak(e.target.value)
    e.target.value = ''
    e.preventDefault()

roomchannel:

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

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    message.create content: data['message']
  end
end

Broadcostmessage:

 def perform(message)
    Actioncable.server.broadcast 'room_channel',render_message(message)
  end
  private
  def render_message(message)
    ApplicationController.renderer.render_message
  end

when creating a new message, it will not automatically download all messages of my browser until the page is reloaded.

Answer 1

I had a similar problem. Try including cable.coffee/js in the room view.

<%= javascript_include_tag 'cable', 'data-turbolinks-track': 'reload' %>

You will also want to add cable.js to /config/initializers/assets.rb.

Rails.application.config.assets.precompile += %w( cable.js )

Answer 2

This is an old question that arose in a Google search, but someone mentioned a typo in:

$messages.scrollTop $messages.prop('scrollHieght')

It should be:

$messages.scrollTop $messages.prop('scrollHeight')