Rails ActionCable/Turbolinksチャットの問題：重複したメッセージの投稿

Question

ActionCableとTurbolinksに問題があります。 example chat app shared by DHHに似たチャットアプリを設定しました。しかし

$(document).on("turbolinks:load",function(){ 
    var pod_slug = $("#pod_slug_value").val(); 
    App.pods = App.cable.subscriptions.create(
    { channel: 'PodsChannel', pod_slug: pod_slug }, 
    { 
    received: function(data) { 
     if ($(".chat-stream").length){ 
     $(data.message).appendTo($(".chat-stream")); 
     $(".chat-stream").scrollTop($(".chat-stream")[0].scrollHeight); 
     } 
    }, 

    speak: function(message, pod_slug) { 
     return this.perform('speak',{ 
     message: message, 
     pod_slug: pod_slug 
     }); 
    } 
    }); 

    // captures text input from input field 
    captureMessage(); 

}); 

、私はページに戻ってアプリの周りをクリックして来る：複数のチャットルームがあり、ActionCableサブスクリプションの初期化にチャットルームのIDを渡すために

は、私はこのような何かを持っていますTurbolinksはサブスクリプションハンドラを複数回バインドしているようですが、メッセージを送信すると、チャットストリームに重複したメッセージが表示されます。

私はあらゆる方法でこの問題をスライスしてみました。私は、サブスクリプション・ハンドラを前書きしていないとき、私は問題を持っていない：

$(document).on("turbolinks:load",function(){... 

しかし、ドキュメントのDOMが前にロードされませんので、私は、チャットルームID（pod_slug）を取得することができませんjavascriptが実行されます。

ActionCableとTurbolinksの両方がBasecampによって大きくサポートされているため、この問題のような単純な解決策があるようです。 demo chat tutorialsの多くは、この方法でチャットを設定することを推奨しています。私はここに何かを逃していますか

Answer 1

App.cable.subscriptions.createによって返されたサブスクリプションを削除するには、App.cable.subscriptions.removeを使用できます。したがって、App.podsが設定されているかどうかを確認し、もしそうなら、再度購読する前に削除してください。

Answer 2

私は同じ問題を持っていたし、このよう

if (!App.pods) { 
    App.pods = App.cable.subscriptions.create(
    { channel: 'PodsChannel', pod_slug: pod_slug }, 
    { ... /* and so on */ } 
} 

にページをリロードするたびに、それを修正し、「turbolinks：ロード」イベントは動作しますが、あなたがApp.podsオブジェクトが既にされているかどうかを確認する必要がありますので作成した。

希望すると、これが役立ちます。

Answer 3

私はあなたのアプローチが好きです。MaruniakSコンシューマオブジェクトを調べると、切断されているかどうかを確認するテストがあるようです。最初の行だけを変更すると、次のようにすることもできます：

if (!App.pods || App.pods.consumer.connection.disconnected) { 
    App.pods = App.cable.subscriptions.create(
    { channel: 'PodsChannel', pod_slug: pod_slug }, 
    { ... /* and so on */ } 
}