如何使用jQuery將值傳入coffescript ActionCable

Question

我正在嘗試創建動態頻道以供用戶聊天，但我無法將room_id傳入room.coffee文件中的App.cable.subscriptions.create調用。任何幫助澄清爲什麼我不能使用jQuery來獲取值是非常有幫助的。

這是我收到回控制檯：

RoomChannel is transmitting the subscription confirmation 
RoomChannel is streaming from room__channel 

RoomsController

class RoomsController < ApplicationController 
    before_action :authenticate_user! 

    def show 
    other_user = User.find(params[:id]) 
    title = [other_user.id.to_s, current_user.id.to_s].sort!.join("-") 
    @room = Room.where(title: title).first 
    if @room.nil? 
     @room = Room.create! title: title 
    else 
     @messages = Message.where(room_id: @room[:id]) 
    end 
    end 

end 

show.html.erb

<h1>Chat Room</h1> 
<div id="messages"> 
    <% if @messages.blank? %> 
    <div id="no_messages_yet"> 
     <p>No messages yet...</p> 
    </div> 
    <% else %> 
     <%= render @messages %> 
    <% end %> 
</div> 
<form> 
    <label>Say something:</label><br> 
    <input type="text" data-behavior="room_speaker"> 
    <input type="hidden" value="<%= @room[:id] %>" id="room_id"> 
    <input type="hidden" value="<%= current_user[:id] %>" id="user_id"> 
</form> 

視圖/消息/ _message.html.erb

<div class="message"> 
    <p><%= message.content %></p> 
</div> 

room.coffee

$(document).ready -> 
    room_id = $("#room_id").val() 
    console.log(room_id) 
    // => 1 
    // When I try and pass 'room_id' as the value for room_id:, I get an error stating the variable is not recognized. 
App.room = App.cable.subscriptions.create {channel: "RoomChannel", room_id: $('#room_id').val()}, 
    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, room_id, user_id) -> 
    @perform 'speak', message: message, room_id: room_id, user_id: user_id 

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

RoomChannel

class RoomChannel < ApplicationCable::Channel 
    def subscribed 
    stream_from "room_#{params[:room_id]}_channel" 
    end 

    def unsubscribed 
    # Any cleanup needed when channel is unsubscribed 
    end 

    def speak(data) 
    m = Message.new 
    m.user_id = data["user_id"] 
    m.room_id = data["room_id"] 
    m.content = data["message"] 
    m.save! 
    end 
end 

message.rb

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

作業/ message_broadcast_job.rb

class MessageBroadcastJob < ApplicationJob 
    queue_as :default 

    def perform(message) 
    ActionCable.server.broadcast "room_#{message.room_id}_channel", message: render_message(message) 
    end 

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

Answer 1

放置$(document).ready調用中的功能。記住咖啡標記對於縮進和空格非常敏感。

$(document).ready -> 
    room_id = $('#room_id').val() 
    App.room = App.cable.subscriptions.create {channel: "RoomChannel", room_id: room_id}, 

    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, room_id, user_id) -> 
     @perform 'speak', message: message, room_id: room_id, user_id: user_id 

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

Answer 2

最簡單的方法是將傳遞值轉換成HTML數據作爲屬性。然後從JScript的CoffeeScript中讀回來。

您可以將它添加到messages格或表格。事情是這樣的：

<div id="messages" data-room-id="<%= params[:id] %>"> 

而在JavaScript中，有閱讀：

$('#messages').data('room-id') 

在香草的JavaScript：

document.getElementById('messages').dataset.roomId