使用 Rails ActionCable 创建实时聊天但 .scrollTop jQuery 不起作用

Question

在 javascripts/channels 中，我有这个 messages.js 文件，它有两个功能 - 1) 用于将数据附加到视图，清除表单，并确保 div 向下滚动显示最近发送的消息，以及 2) 消息内容的助手。

文件如下所示：

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
  return $('#messages').append(this.renderMessage(data));
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我的问题是正在追加消息，但未执行 scrollTop。为什么是这样？此外 - 如果我将此文件更改为 js.erb 并使用 simple_format 帮助程序，则会完全阻止附加。数据仍然存在并且发送和接收 websockets 订阅，但是视图不会更新附加到 div 底部的新消息。我应该在别处定义这种行为吗？视图如下所示：

<div class="column">
 <div class="conversation" id="conversation-main">
  <div id="conversation-body" data-conversation-id="<%= @conversation.id %>">
   <div id="messages">
    <% @messages.each do |message| %>
     <% if message.body %>
      <%= render "message", message: message %>
     <% end %>
    <% end %>
   </div>
  </div>
 </div>
</div>

<div class="column">
 <div class="ui form"> 
  <%= form_for [@conversation, @message], remote: true do |f| %>
   <div class="field">
    <%= f.label :message %>
    <%= f.text_area :body, placeholder: "Your message", id:"response" %>
   </div>
   <%= f.submit "Submit" %>
  <% end %>
 </div>
</div>

Answer 1

您正在 scrollTop 之后附加邮件。尝试做

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $('#messages').append(this.renderMessage(data));
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我认为您不需要 return 退出第一个函数。但是您肯定需要知道 div 的高度，包括最新的消息，以便在消息输入后看到滚动到 div 的末尾。

使用 Rails ActionCable 创建实时聊天但 .scrollTop jQuery 不起作用

using Rails ActionCable to create a live chat but .scrollTop jQuery is not working

jquery

ruby-on-rails

actioncable