Javascript 使用Rails中的jQuery实时更新日志记录活动/事件

我的应用程序中有一个事件记录器功能，它的工作方式很有魅力。但我的清单上的下一件事是让事件日志生效，这意味着每5秒更新一次事件日志

我计划使用

setInterval

功能。但在5秒内加载所有日志是个坏主意。所以我想，为什么不从页面中获取最新的事件日志id（

EventLog.where（“id>？”），从堆栈中获取最新的事件日志id），然后推送它检索到的事件日志

因此，我现在的问题是如何每5秒钟推送和显示最新的事件，以避免重做整个事件日志表

以下是一些与事件记录器相关的文件

#/app/controllers/events_logs_controller.rb
class EventLogsController < ApplicationController
    before_action :is_admin, only: :index

    def index
        @event_logs = EventLog.all.order("created_at DESC")
        @latest_log_id_from_stack = @event_logs.first.id
        respond_to do |format|
            format.html
            format.json { render json: @event_logs }
        end
    end

    def get_latest_events
        @event_logs = EventLog.where("id > ?", latest_log_id_from_stack)
        @latest_log_id_from_stack = @event_logs.first.id
        respond_to do |format|
            format.html
            format.json{ render json: @event_logs }
        end
    end
end

#/app/views/event_logs/index.html.erb
<% provide(:title, "Event Logs") %>
<h1>Event Logs</h1>
<div class="row">
    <div id="event_logs" class="col-md-12" style="max-height: 500px; overflow-y: scroll;">
        <%= render 'event_logs' %>
    </div>
</div>

#/app/views/event_logs/_event_logs.html.erb
<table class="table table-bordered">
    <tr>
        <th class="col-md-3">Timestamp</th>
        <th class="col-md-2">Subject</th>
        <th class="col-md-1">User</th>
        <th class="col-md-6">Description</th>
    </tr>
    <% @event_logs.each do |event_log| %>
    <tr>
        <td><%= event_log.created_at %></td>
        <td><%= event_log.event_source_type.titleize %></td>
        <td><%= event_log.user.last_name %></td>
        <td><%= event_log.description %></td>
    </tr>
    <% end %>
</table>

更新2：我通过使用jquery中的
prepend
方法在事件日志表中使用，成功地每5秒对发生的最新事件进行预处理

setInterval(function(){
    latest_id = $("#latest_id").val();
    $.getJSON("/event_logs/get_latest_events/"+latest_id, function(data){
        if(data.logs != null){
            $.each(data.logs, function(i,item){
                $("#event_logs_table").prepend("<tr><td>"+item.created_at+"</td><td>"+item.event_source_type+"</td><td>"+item.user_id+"</td><td>"+item.description+"</td>");
            });
        }
        $("#latest_id").val(data.latest_id);
    });
},5000);

#/views/event_logs/_event_logs.html.erb
<table id="event_logs_table" class="table table-bordered">
    <% event_logs.each do |event_log| %>
    <tr>
        <td class="col-md-3"><%= event_log.created_at %></td>
        <td class="col-md-2"><%= event_log.event_source_type.titleize %></td>
        <td class="col-md-1"><%= event_log.user.last_name %></td>
        <td class="col-md-6"><%= event_log.description %></td>
    </tr>
    <% end %>
</table>

setInterval（函数（）{
latest_id=$（“#latest_id”）.val（）；
$.getJSON（“/event\u logs/get\u latest\u events/”+最新的\u id，函数（数据）{
if（data.logs！=null）{
$.each（data.log，函数（i，项）{
$（“#事件#日志#表”）。前置（“+item.created_at+”+item.event#source_type+”+item.user#id+“+item.description+”）；
});
}
$（“#latest_id”）.val（data.latest_id）；
});
},5000);
#/视图/event_logs/_event_logs.html.erb

现在，我的下一个问题是如何使它与will_paginate一起工作，这样我就不会再在事件日志表中使用垂直滚动条了。
您是否也可以发布您的jQuery代码以查看您迄今为止的尝试？@User089247 Hi，请参阅我的更新。谢谢。
setInterval(function(){
    latest_id = $("#latest_id").val();
    $.getJSON("/event_logs/get_latest_events/"+latest_id, function(data){
        if(data.logs != null){
            $.each(data.logs, function(i,item){
                $("#event_logs_table").prepend("<tr><td>"+item.created_at+"</td><td>"+item.event_source_type+"</td><td>"+item.user_id+"</td><td>"+item.description+"</td>");
            });
        }
        $("#latest_id").val(data.latest_id);
    });
},5000);

#/views/event_logs/_event_logs.html.erb
<table id="event_logs_table" class="table table-bordered">
    <% event_logs.each do |event_log| %>
    <tr>
        <td class="col-md-3"><%= event_log.created_at %></td>
        <td class="col-md-2"><%= event_log.event_source_type.titleize %></td>
        <td class="col-md-1"><%= event_log.user.last_name %></td>
        <td class="col-md-6"><%= event_log.description %></td>
    </tr>
    <% end %>
</table>