Question

我有一个带后台作业的控制器来启动ActionCable订阅：

  def result
    LinkBroadcastJob.perform_later(links)
  end

执行此操作以流式传输链接：

  def perform(links)
      links.each do |link|
          ActionCable.server.broadcast "link_channel", html: render_link(link)
      end
  end

我在布局中有一个div id =“here”的视图。

在我的文件javascript / channes / link.coffee.js中，它应该附加到div的所有链接。

  App.link = App.cable.subscriptions.create { channel: "LinkChannel" },
    received: (data) ->
        $("#here").append(data.html)

此代码的问题在于订阅是在页面完全加载之前开始的 - 因此第一个链接不会显示且丢失。

我可以通过延迟作业以一定的时间（5秒）解决它，但这不是最好的体验，我不知道用户加载整页的速度有多快。。我在创建订阅之前尝试使用$（document）.load，但它没有用。

加载div标签后执行订阅的最佳方法是什么？

Answer 1

您应该将客户端代码放在turbolinks:load：

中

jQuery(document).on 'turbolinks:load', ->
   App.link = App.cable.subscriptions.create { channel: "LinkChannel" },
     received: (data) ->
         $("#here").append(data.html)

Answer 2

我遇到了同样的问题。我建议不要使用......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"><b>abc</b></div>

...因为这已经在启动时完成了。这就是我解决这个问题的方法：

回到你的javascript / channes / link.coffee.js ...... ...实际上，将其重命名为javascripts / channels / link.coffee（-_ ^）

您有Query(document).on 'turbolinks:load', ->方法，如下所示：

recieved:

虽然您没有提及它，但您应该有一种向服务器广播消息/请求的方法。我们暂时将其称为App.link = App.cable.subscriptions.create "LinkChannel", received: (data) -> $("#here").append(data.html)，让我们假设当我致电refresh:时，这最终会将您的代码广播回客户端，其中refresh:将被调用拿起你的新数据：

received:

现在，App.link = App.cable.subscriptions.create "LinkChannel", received: (data) -> $("#here").append(data.html) refresh: -> @perform 'refresh'是一个回调，但还有两个在这里有用。这些是recieved:和connected:。当频道分别连接和断开连接时，会调用它们。我们将其添加到代码中：

disconnected:

现在准备就绪，我们将在启动时加载您的代码。

因此，我们不会将App.link = App.cable.subscriptions.create "LinkChannel", 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) -> $("#here").append(data.html) refresh: -> @perform 'refresh'用作包装器或任何其他方式，而是在通道具有.... {strong>连接jQuery(document).on 'turbolinks:load', ->方法>。

refresh:

如果您有任何问题或疑虑，请不要犹豫：）

如何在页面加载后订阅频道 - ActionCable，DelayedJob

2 个答案: