ActionCableは複数回ユーザーを登録します

Question

Sitepoint's tutorialによると、私はロールプレーのチャットルームとして機能するように設計されたRoRアプリケーションでActionCableを使用しています。私はそれを設定しました。メッセージは、作成されるたびにブロードキャストされます。ただし、チャットルームのページが読み込まれるたびに、同じユーザーに対して新しいサブスクリプションが作成され、メッセージが複数回表示されます。

アプリ/資産/ JavaScriptの/チャンネル/ roleplays.coffee：重複したサブスクリプションを回避するために

jQuery(document).on 'turbolinks:load', -> 
    messages = $('#messages') 
    if $('#messages').length > 0 


    App.global_chat = App.cable.subscriptions.create { 
     channel: "RoleplaysChannel" 
     roleplay_id: messages.data('roleplay-id') 
    }, 
     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) -> 
     messages.append(data) 
     console.log(data) 


     send_message: (message, roleplay_id) -> 
     @perform 'send_message', message: message, roleplay_id: roleplay_id 


    $('#new_message').submit (e) -> 
     $this = $(this) 
     textarea = $this.find('#message_body') 
     e.preventDefault() 

     if $.trim(textarea.val()).length > 1 
     App.global_chat.send_message textarea.val(), messages.data('roleplay-id') 
     textarea.val('') 

     return false 

Answer 1

は、ユーザーがすでに接続されているかどうかを決定するいくつかの方法が必要になります。

単純なアプローチは、次のような何かをするかもしれません：

(-> 
    connected = false 

    jQuery(document).on 'turbolinks:load', -> 
    messages = $('#messages') 

    if $('#messages').length > 0 && !connected 
     App.global_chat = App.cable.subscriptions.create { 
     channel: "RoleplaysChannel" 
     roleplay_id: messages.data('roleplay-id') 
     }, 
     connected: -> 
      connected = true 

     disconnected: -> 
      connected = false 

     # … 
)() 

これは、単一のロールプレイ（またはチャットルーム）のために動作します。ユーザーが以前に訪問したロールプレイとは異なるロールプレイを試みると、新しいロールプレイングにサブスクライブされません。これを修正するには、サブスクリプションを管理する方法が必要です。

次のようなものは、うまくいくかもしれない：

(-> 
    connections = [] 

    addConnection = (id) -> 
    connections.push(id) 

    removeConnection = (id) -> 
    index = connections.indexOf(id) 
    connections.splice(index, 1) if index > -1 

    connectedTo = (id) -> 
    connections.indexOf(id) > -1 

    jQuery(document).on 'turbolinks:load', -> 
    messages = $('#messages') 
    roleplayID = messages.data('roleplay-id') 

    if $('#messages').length > 0 && !connectedTo(roleplayID) 
     App.global_chat = App.cable.subscriptions.create { 
     channel: "RoleplaysChannel" 
     roleplay_id: roleplayID 
     }, 
     connected: -> 
      addConnection(roleplayID) 

     disconnected: -> 
      removeConnection(roleplayID) 

     # … 
)()