Page-specific ActionCable

Question

Curious what the best practice is for using ActionCable with Turbolinks, when you want to tie a channel with the page being viewed.

The classic example, of course, if you had an article with comments -- how can you stream only those comments related to the article in view and then subscribe to a different channel when viewing a different article?

I've played around with using turbolinks:loaded event on JQuery, but cant figure out what to link that to. Do I want to resubcribe every time? How is that possible without reloading the JS?

Answer 1

I managed that by doing something like this:

(Live streaming task output)

$(document).on 'turbolinks:load', -> # use page:change if your on turbolinks < 5
  if document.getElementById("task-output") # if a specific field is found 
    App.task = App.cable.subscriptions.create { channel: "TaskChannel", task_id: task_id },
      received: (data) ->
        # do something with your data
  else if App.task # if I'm not on the page where I want to be connected, unsubscribe and set it to null
    App.task.unsubscribe()
    App.task = null