带Actioncable的Rails应用：JS文件的更新未反映在服务器上的源中

问题描述

我已经尝试了3个小时。本质上，我正在构建一个带有聊天组件的Rails应用程序。用户创建消息时，它会立即显示。一切正常，但是现在我要做的下一件事是每次出现新消息时将屏幕滚动到底部。

执行此IMO的逻辑方法是进入room_channel.js文件，并将Javascript添加到receive（data）下面。

这是我在VScode中为room_channel.js编写的代码

import consumer from "./consumer"
// I'm trying to make this refresh the element 

function updateScroll(){
  var element = document.getElementById("chatmessages");
  element.scrollTop = element.scrollHeight;
  console.log("update scroll is firing")
}

consumer.subscriptions.create("RoomChannel",{
  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) {
    var node = document.createElement("P"); 
    var textnode = document.createTextNode(data.content.message); 
    node.id = data.content.id;
    node.appendChild(textnode); 
    document.getElementById("new_message").appendChild(node);
    
    // DEBUGGING
    console.log("this is firing");
    alert("ahoy");



 document.getElementById('chat_message').value= '';

//  //Why wont this work?!
 updateScroll();

//     // Called when there's incoming data on the websocket for this channel
  }
});

但这是我在浏览器中查看源代码时的代码：

import consumer from "./consumer"

consumer.subscriptions.create("RoomChannel",received(data) {
    var node = document.createElement("P"); 

    var textnode = document.createTextNode(data.content.message); 
    node.id = data.content.id;
    node.appendChild(textnode); 

    document.getElementById("new_message").appendChild(node);
 document.getElementById('chat_message').value= ''

    // Called when there's incoming data on the websocket for this channel
  }
});

在我尝试进行新的更改以强制滚动之前，它实际上是一个较旧的版本。

我曾尝试杀死服务器，重置服务器，重新打包-我不确定我还能做些什么来使这些更改正确反映出来。

如果删除room_channels.js，我的应用程序仍然可以运行，并且浏览器上的“源”仍然显示原始版本。

任何帮助表示赞赏。预先感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

actioncable javascript ruby-on-rails