ruby-on-rails - 订阅 Action Cable channel 时如何设置参数

Question

几个月以来，我一直在努力了解操作电缆。请帮忙。

我有一个“连接” - 我无法设置 identified_by :current_user因为此端点还需要由使用 WebSocket 的外部 API 使用。无法使用浏览器 cookie 来验证 API 端点。

文件和支持

连接:/app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base

  end
end

channel :/app/channels/application_cable/channel.rb

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end

我有一个特定的访问 channel :/app/channels/visits_channel.rb

class VisitChannel < ApplicationCable::Channel
  def subscribed
    stream_from "visit_#{params[:visit_id]}"
  end
end

然后我就有了我的 Coffeescript channel :/app/assets/javascripts/channels/visit.coffee

App.visit = App.cable.subscriptions.create { channel: 'VisitChannel', visit_id: '42' },
  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) ->
    console.log data

  push: ->
    @perform 'push'

然后我的访问模型有一个回调:/app/models/visit.rb

class Visit < ApplicationRecord

  after_save  :push_to_action_cable

  **** detail of model removed ****

  def push_to_action_cable
    ActionCable.server.broadcast("visit_#{self.id}", self)
  end

end

这工作得很好，它每次都会将对象放入控制台，并且只将 ID 为 42 的对象放入控制台

这是我的问题:

在 CoffeeScript channel 内:位于 /app/assets/javascripts/channels/visit.coffee - 如何设置visit_id这样我就可以只在我想要的访问中“监听”更改？

App.visit = App.cable.subscriptions.create { channel: 'VisitChannel', visit_id: 'HOW_DO_I_SET_THIS?' },
  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) ->
    console.log data

  push: ->
    @perform 'push'

我尝试过的:

我尝试过各种变化，例如:

App.visit = App.cable.subscriptions.create { channel: 'VisitChannel', visit_id: <%= @visit.id %> }

结果:

ExecJS::RuntimeError in Visits#action_cable
Showing /Users/johnsalzarulo/code/uvohealth/app/views/layouts/application.html.erb where line #9 raised:

SyntaxError: [stdin]:1:81: unexpected <

和

App.visit = App.cable.subscriptions.create (channel: 'VisitChannel', visit_id: "#{ params[:id] }")

结果:

ExecJS::RuntimeError in Visits#action_cable
Showing /Users/johnsalzarulo/code/uvohealth/app/views/layouts/application.html.erb where line #9 raised:

SyntaxError: [stdin]:1:93: unexpected :

和

App.visit = App.cable.subscriptions.create (channel: 'VisitChannel', visit_id: "#{ @visit.id }")

结果:

visit.self-e04de4513d06884493c48f4065f94d23255be682f915e26766c54bb9d17ef305.js?body=1:4 Uncaught TypeError: Cannot read property 'id' of undefined
    at visit.self-e04de4513d06884493c48f4065f94d23255be682f915e26766c54bb9d17ef305.js?body=1:4
    at visit.self-e04de4513d06884493c48f4065f94d23255be682f915e26766c54bb9d17ef305.js?body=1:18
(anonymous) @ visit.self-e04de4513d06884493c48f4065f94d23255be682f915e26766c54bb9d17ef305.js?body=1:4
(anonymous) @ visit.self-e04de4513d06884493c48f4065f94d23255be682f915e26766c54bb9d17ef305.js?body=1:18

和

App.visit = App.cable.subscriptions.create (channel: 'VisitChannel', visit_id: "#{ visit.id }")

结果:

visit.self-b636f38376edc085c15c2cfc4d524bafc5c5163a8c136b80ba1dda12813fc0b5.js?body=1:4 Uncaught ReferenceError: visit is not defined
    at visit.self-b636f38376edc085c15c2cfc4d524bafc5c5163a8c136b80ba1dda12813fc0b5.js?body=1:4
    at visit.self-b636f38376edc085c15c2cfc4d524bafc5c5163a8c136b80ba1dda12813fc0b5.js?body=1:18
(anonymous) @ visit.self-b636f38376edc085c15c2cfc4d524bafc5c5163a8c136b80ba1dda12813fc0b5.js?body=1:4
(anonymous) @ visit.self-b636f38376edc085c15c2cfc4d524bafc5c5163a8c136b80ba1dda12813fc0b5.js?body=1:18

结束时

我尝试了很多很多组合。唯一有效的就是扔一个 <script>进入明确订阅访问的页面的 View 模板，但后来我没有得到回调的好处，而且我知道这不是“rails 方式”。

我们花了几个小时阅读这些文档并尝试让这项工作成功。谁能告诉我我在这里缺少什么吗？

Answer 1

这里需要考虑一些事情:

1. 脚本全部加载的顺序。
2. ruby 变量“实例化”的具体时间(在何处/何时可以访问它们)。
3. 认识到普通的 JavaScript 可以在愚蠢的 CoffeeScript 中使用。

也就是说 - 这是对我有用的解决方案:

文件和支持

除以下内容外，上述问题中使用的所有文件均未更改。要使其正常工作，您需要引用上面的文件和下面的文件以获得完整的堆栈。

我的应用程序的主模板:app/views/layouts/application.html.erb 请注意 head 标记中的行yield(:head_attributes)

<!DOCTYPE html>
<html>
  <head <%= yield(:head_attributes) %> >
    <title>Uvo Health</title>
    <%= action_cable_meta_tag %>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body  <%= yield(:body_attributes) %> >
    <%= render 'layouts/navbar' unless @hide_nav %>
    <%= render 'shared/flash_messages' %>
    <%= yield %>
    <%= yield :page_js %>
  </body>

</html>

我尝试使用 actioncable 的页面 View 。就我而言，它是: app/views/visits/action_cable.html.erb - 大多数时候它可能是您的 show.html.erb 或 index.html .erb 注意content_for

<%= content_for(:head_attributes) do %>data-visit-id="<%= @visit.id %>"<% end %>

<div class='container'>
  <%= render 'visits/visit_overview' %>
</div>

然后在我的访问 channel /app/assets/javascripts/channels/visit.coffee

App.visit = App.cable.subscriptions.create { channel: 'VisitChannel', visit_id: document.querySelector('head').dataset.visitId },
  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) ->
    console.log data

  push: ->
    @perform 'push'

发生了什么:

1. 当页面加载时， View 会将 data-visit-id 的数据属性添加到页面的头部。
2. visit.coffee 的 channel 从页面头部读取此属性。
3. 然后visit.coffee可以使用这个变量来订阅适当的 channel 。

其他解决方案不起作用，因为我试图以错误的“顺序”访问事物，即在实例化变量之前加载变量。希望这对其他人有帮助。这个问题困扰了我整整 5 个小时。 🙄