How to make data feed c javascript for ruby ​​on rails 4?

Question

JavaScript

DD, the problem is the following, there is data displayed in a block as in the picture, how to write javascript for ruby ​​so that this data on the page when a new record is added to the database, the new record changes the first one, and so on
, you need to update, a kind of live feed (as on twitter), now a new element has been added to the database, js has removed the old element on the page and inserted a new one, 8 elements per page
Please help.
Controller

class StaticPagesController < ApplicationController

  def home
    @feed_items = Post.order('id DESC').limit(8)
  end
end

/static_pages/home.erb

<div class="all_post_main"> 
        <ul>  
          <% if @feed_items.any? %>
          <%= render partial: 'posts/feed_item1', collection: @feed_items %>
          <% end %>
        </ul>
        </div>
<code lang="javascript">
<script>
setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'script',
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId }
 })
}, 5000);
</script>
</code>

/posts/_feed_item1.html.erb

<li <li class="feed-item" data-id="<%= feed_item1.id %>">
  <div class="row post_name">
    <div class="col-md-2">
    <%= avatar_for feed_item1.user, :size => "50x50" %>
    </div>
    <div class="col-md-6">
    <%= link_to (truncate feed_item1.name, :length => 90), feed_item1 %>
    </div>
    <div class="col-md-4">
    <div class="feed_price pull-right">
    <% if feed_item1.price.to_f == 0 %>
                 цена
                <% else %>
                <%= number_to_currency feed_item1.price %>
    <% end %>
    </div>
    </div>
    
  </div>
  <div class="row post_user">
    <div class="col-md-12">

      <%= truncate feed_item1.content, :length => 90 %>
    </div>
  </div>

</li>

/posts/feed1.html.erb

<% if @feed_items.any? %>
    <%= render partial: 'posts/feed_item1', collection: @feed_items %>
<% end %>

/static_pages.js.erb This alert works, but I don’t know what to do next ... and what was done with the participation of a Wonderful person was done)
alert('aaa');

Answer 1

gem 'sync' was the best solution in the end

Answer 2

The question is not entirely clear. How to use js to insert data in the right place? Well, you change the DOM in accordance with your markup. And so that when the page is reloaded, sorting by new data is added in the request order by created_at.

def home
    @feed_items = Post.order('created_at DESC').paginate(page: params[:page])
end

Answer 3

You have already written almost everything yourself.

setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'script',
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId }
 })
}, 5000);

You only need to add a callback.

setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'JSON', //<---------
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId },
   success: function(response) //<---------------
{
if (response != null)
{
$(response).each(function(i,o){
$(".container").append("<div>" + o.Name + "<br/> + o.Comment + "</div>");
});

}
 }), 5000);

div.container - a list of already existing entries that are displayed to users
response is a JSON object that the server generates. Judging by the screenshot, it should contain the fields price, name, text, etc.
Or websockets to all fields.

Answer 4

It's better to already use Server-sent events ActionController::Live for this than to touch the server every 5 seconds. When the record is added, through ActionController::Liveyou can pull the client and update the data. Google it this way.
railscasts.com/episodes/401-actioncontroller-live