javascript - ActionCable 多次注册用户

Question

根据 Sitepoint's tutorial，我在我的 RoR 应用程序中使用 ActionCable，旨在用作 Angular 色扮演的聊天室。 .我已经设置好了，并且消息如预期的那样在创建消息时广播。但是，每次加载聊天室页面时，都会为同一用户创建新订阅，从而使消息出现多次。

app/assets/javascripts/channels/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

        # …
)()

这仅适用于单个 Angular 色扮演(或聊天室)。如果用户尝试与之前访问过的 Angular 色扮演不同的 Angular 色扮演，他们将不会订阅新的 Angular 色扮演。要解决此问题，您需要一种管理订阅的方法。

像下面这样的东西可能会起作用:

(->
  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)

        # …
)()