Как подписаться на канал после загрузки страницы - ActionCable, DelayedJob

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/channelses/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

У меня была такая же проблема. Я бы посоветовал против использования ...

Query(document).on 'turbolinks:load', ->

... как это уже достигнуто при запуске. Это то, что я сделал, чтобы решить эту проблему:

Возвращаясь к вашему javascript/channelses/link.coffee.js ... ... на самом деле переименуйте это в javascripts/channels/link.coffee (-_ ^)

у вас есть метод 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' 

Готовы теперь, мы собираемся загрузить ваш код при запуске.

Итак, вместо использования jQuery(document).on 'turbolinks:load', -> в качестве обертки или любого другого способа, мы будем называть метод refresh:, как только канал имеет ....подключен.

App.link = App.cable.subscriptions.create "LinkChannel", 
    connected: -> 
    App.link.refresh() 

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

    received: (data) -> 
     $("#here").append(data.html) 

    refresh: -> 
    @perform 'refresh' 

Если у вас есть какие-либо вопросы, не стесняйтесь спросить :)