Question

我遇到了ActionCable和Turbolinks的问题。我已经设置了一个类似于example chat app shared by DHH的聊天应用。

为了拥有多个聊天室并将聊天室ID传递给ActionCable订阅初始化程序，我有类似这样的内容：

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

});

然而，当我点击应用程序并返回页面时，Turbolinks似乎多次绑定订阅处理程序，现在当我提交消息时，我在聊天流中收到重复的消息。

我尝试过以这种方式解决这些问题。当我没有在订阅处理程序前面加上：

时，我没有问题

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

但后来我无法获得聊天室ID（pod_slug），因为在javascript执行之前文档DOM没有加载。

看起来这个问题会有一个简单的解决方案，因为Basecamp大力支持ActionCable和Turbolinks。许多demo chat tutorials建议以这种方式设置聊天。我在这里错过了什么吗？

Answer 1

我遇到了同样的问题并以这种方式修复了

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

每次重新加载页面时，＆＃39; turbolinks：load＆＃39;事件有效，所以你必须检查是否已经创建了App.pods对象。

希望这会对你有所帮助。

Answer 2

您可以使用App.cable.subscriptions.remove删除App.cable.subscriptions.create返回的订阅。因此，可以检查是否设置了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 */ }
}

Rails ActionCable / Turbolinks聊天问题：发布重复的消息

3 个答案: