为Rails前端实现轮询以进行呼叫更新 [英] Implementing polling for Rails Frontend to call update

问题描述

我想在我的显示"视图中实现一个系统，每10秒钟将在控制器中调用update，然后异步更新视图而不刷新页面.

I want to implement a system where my 'show' view, every 10 seconds will call update in the controller, then asynchronously updates the view without refreshing the page.

我在异步更新的时候拥有它.但是我需要对其进行轮询.

I have it at the point where it updates asynchronously. However I need to get it polling.

我的方法是:

• 控制器显示动作使用JS响应

• controller show action responds with JS

def show
    @simulation = Simulation.find(params[:id])
end

然后是像这样的JS.

Then JS that does somthing like this..

`

// starts the polling on page load
$(function() {
    setTimeout(callUpdate, 10000);
});

// Continues to poll, making ajax calls 
function callUpdate() {
    if ($(this).hasClass("update")) {
      $.ajax({
        type: "PUT",
        url: "/simulations/<%= @simulation.id %>"
      });
    } else {
      alert("An error occured updating record.");
    }
    $('#sim_div').html("<%= j (render @simulation) %>");
    setTimeout(callUpdate, 10000);
}

这样做的正确方法是什么?我尝试在资产中使用coffeescript，但在每个控制器元素上都调用它，我尝试将其嵌入html或尝试将其作为部分内容包括在内，但在渲染所需的ruby代码时也遇到了问题，或没有获得足够的访问权限，我尝试做respond_to，但它只给我html.谁能帮我解决这个问题?

What the correct way of doing this? I've tried using coffeescript in the assets, but it is called on every controller element, I've tried embedding it in the html or trying to include it as a partial but I either get issues with rendering the ruby code I need too, or not getting access to enough of it, I've tried doing respond_to but it only gives me html. Can anyone help me solve this?

这是我的表演视图:

<%= render 'simulation' %>

<%= link_to 'Back', simulations_path %>

以及随附的partial:

and the included partial :

<div id="sim_div">
  <h1><%= @simulation.identifier %></h1>
  <h4 class="offset-col-sm-1">Dimensions: <%= @simulation.x_size %>x<%= @simulation.y_size %></h4>
  <h4 class="offset-col-sm-1">Verdict: <%= @simulation.verdict %></h4>

  <table class="table table-bordered">
    <thead>
      <tr>
      </tr>
    </thead>

    <tbody>
      <% @simulation.state.each do |row| %>
        <tr>
        <% row.each do |current| %>        
            <td class="text-center"><%= current %></td>        
          <% end%>
        </tr>
      <% end %>
    </tbody>
  </table>
  <br>
</div>

推荐答案

我的解决方案是:

$.ajax({ method: "PUT", url: $(".some-element").data("url") })
.done(function(data) {
  //here you can use the new data
});

更改是，您具有一个元素为"some-element"类，其属性data-url设置为rails为更新路线自动生成的路径.在您的html中，您将:

Changes are that you have an element with class "some-element" with the attribute data-url set to the path that rails generate automatically for the update route. In your html you will have:

<div class='some-element' data-url="<%= simulations_path(@simulation) %>">
  ...
</div>

在您的控制器中，您应该将@simulation作为json返回.

In your controller you should return @simulation as json.

此解决方案的其他优点是您可以避免将ruby嵌入到javascript中，这意味着服务器会为每个请求发送文件.

Other advantages of this solution is that you can avoid embedding ruby in javascript which implies that the server sends the file for every request.

轮询是正确的，但是其他方法可以通过Web套接字进行.在Rails中，您可以做到这一点，并且在不久的将来，Rails 5将与ActionCable一起提供.无论如何，我将继续进行轮询，因为它比websockets简单得多.

The polling is right, but other ways to do it would be with web sockets. In Rails you have some gems to do that, and in the near future Rails 5 will come along with ActionCable. Anyway I would continue with polling since it is way simpler than websockets.

此解决方案的工作方式:

The way this solution works:

1. 您请求显示视图，服务器以html，js和css文件作为响应.
2. 开始轮询，每10秒钟将请求发送到Simulations#update(模拟控制器/更新操作).您可以在其中更新和保存模拟并返回新值.
3. 在jquery的ajax.done中，您可以获得新数据，并且可以更新客户端数据.

希望有帮助，

圣地亚哥

这篇关于为Rails前端实现轮询以进行呼叫更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！