javascript - 实现 Rails Frontend 轮询来调用更新

Question

我想实现一个系统，其中我的“显示” View 每 10 秒就会在 Controller 中调用更新，然后异步更新 View 而不刷新页面。

我已经把它异步更新了。不过我需要让它轮询。

我的方法是:

• Controller 显示 Action 用 JS 响应

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

• 然后 JS 会做这样的事情..

`

// 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);
}

这样做的正确方法是什么？我尝试在 Assets 中使用coffeescript，但它在每个 Controller 元素上被调用，我尝试将它嵌入到html中或尝试将其作为部分包含，但我也遇到了渲染我需要的ruby代码的问题，或者无法访问足够的内容，我尝试过 respond_to 但它只给了我 html。谁能帮我解决这个问题吗？

编辑:

这是我的展示 View :

<%= render 'simulation' %>

<%= link_to 'Back', simulations_path %>

以及包含的部分:

<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>

Answer 1

我的解决方案是这样的:

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

变化是你有一个类为“some-element”的元素，其属性 data-url 设置为 Rails 自动为更新路由生成的路径。在你的 html 中你将有:

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

在你的 Controller 中，你应该以 json 的形式返回 @simulation。

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

轮询是正确的，但其他方法可以使用网络套接字。在 Rails 中，您有一些很棒的功能可以做到这一点，并且在不久的将来，Rails 5 将与 ActionCable 一起出现。不管怎样，我会继续轮询，因为它比 websocket 简单得多。

该解决方案的工作方式:

1. 您请求显示 View ，服务器会使用 html、js 和 css 文件进行响应。
2. 轮询开始，每 10 秒就会将一个请求发送到 models#update(模拟 Controller /更新操作)。您可以在其中更新和保存模拟并返回新值。
3. 在 jquery 的 ajax.done 中，您可以获得新数据，并且可以更新客户端数据。

希望对你有帮助

圣地亚哥