2

Estuve siguiendo este tutorial de AJAX y Rails. En el cual se muestra como guardar, modificar y eliminar posts sin recargar la página mediante Ajax, pero si quisiera que al tener otra pestaña abierta, y elimino un post en una, en las otras pestaña también sean eliminadas, con el código que tengo solo se refresca en la pestaña 1, como podría hacer que todos los clientes reflejen los cambios que realizo sobre el modelo posts.

Post-> index.html.erb

<div class="container">
  <div class="row">
    <div class="text-center">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mynewpost">
        New Post
      </button>
    </div>
  </div>

  <br>
  <br>

  <div class="row" id="container_posts">
    <%= render @posts %><!--carga todos los posts-->
  </div>


  <!-- Modal create action -->
  <%= form_for(@post, remote: true) do |f| %> <!--ajax remote: true-->
    <div class="modal fade" id="mynewpost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Post</h4>
          </div>
          <div class="modal-body">
            <div class="field">
              <%= f.label :title %><br>
              <%= f.text_area :title, class: "form-control post_title" %>
            </div>
            <div class="field">
              <%= f.label :content %><br>
              <%= f.text_area :content, class: "form-control post_content" %>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="mynewpostclose">Close</button>
            <%= submit_tag "Create", class: "btn btn-primary"%>
          </div>
        </div>
      </div>
    </div>
  <%end%>
</div>

El método del controlador es:

def create
  @post = Post.new(post_params)

  respond_to do |format|
    if @post.save
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
      format.json { render :show, status: :created, location: @post }
      format.js #ajax
    else
      format.html { render :new }
      format.json { render json: @post.errors, status: :unprocessable_entity }
      format.js #ajax
    end
  end
end

Y el CREATE.JS.ERB :

$("#mynewpost").modal('hide');
$(".post_title").val('');
$(".post_content").val('');

$("#container_posts").prepend('<%= j render @post %>');
$("#post_<%= @post.id %>").hide().fadeIn(1000);

3 respuestas 3

3

HTTP es un protocolo stateless. Esto es, no guarda estado. En el caso que dices, se hace una petición se busca de datos y se muestra al usuario. Después de eso al navegador no le importa si la base de datos tiene el post que está mostrando o no.

Lo que buscarías es una web stateful, en donde siempre estaría pendiente de ver los cambios en la base de datos y tener siempre conectado el servidor, la base de datos y la vista del usuario.

Puedes hacer varias cosas, una es utilizar los websockets (que algunos navegadores aún no soportan) o la otra es utilizar técnicas cómo long-polling.

2

Cuando el servidor Rails recibe un request hacia uno de sus métodos realiza las consultas necesarias a la base de datos y realiza una acción, en este caso el render de una vista, la cual es devuelta hacia el cliente que lo solicito como parte de la respuesta al request inicial.

Sucede lo mismo con las peticiones json o ajax, cada resultado es enviado como parte de la respuesta del servidor hacia quien hizo la petición, es decir si hiciste el request en la pestaña 1, es esta pestaña quien recibirá la respuesta, mas no la pestaña 2 por que no se realizo ningúna acción.

Lo que buscas realizar se denomina programación reactiva, es decir que la aplicación reaccióne a los cambios en lugar de esperar una acción para devolver un resultado, en una aplicación de este tipo, sin importar quien hizo la actualización de datos todos los clientes reaccionarían y mostrarían los datos actualizados, esto puedes hacerlo en rails de las siguientes formas:

  1. Usar un framework de frontend reactivo (ReactJS) y Flux, para lo que Rails se comportaría como un servidor de API Rest. https://github.com/reactjs/react-rails
  2. Una aplicación isomorfica, usando un framework como volt, que te permite usar ruby tanto para el backend y frontend sin tener que repetir código al replicar, estructuras en el frontend y reaccionando rápidamente a los cambios en los modelos. http://voltframework.com
  3. WebSockets, puedes usar websockets para lanzar un evento en los clientes usando Channels (Canales) de forma que en lugar de ajax, enviarías un evento a un canal con información sobre el mismo para mostrar los cambios en las vistas de todos los clientes. https://github.com/websocket-rails/websocket-rails
  4. Polling, que es la forma mas antigua de hacer ello, haciendo request javascript al servidor consultando los últimos cambios.
7
  • Gracias Joel, a penas estoy iniciando en rails, tengo 2 preguntas: 1)¿si uso alguno de los frameworks de frontend que mencionaste, es posible que haya conflictos con bootstrap?. y 2)De las formas que tu mencionaste ¿cual me recomiendas?
    – LuisC
    Commented el 10 jun. 2016 a las 6:40
  • No, no debería haber ningún conflicto con boostrap. Commented el 10 jun. 2016 a las 15:13
  • Depende mucho de tu nivel de expertise y que tan bien manejes Javascript, si eres fullstack senior, te recomendaría usar React o si solo manejas Ruby bastante bien, podrías usar el método isomorfico. Commented el 10 jun. 2016 a las 15:15
  • Personalmente no recomiendo el polling por que el servidor recibe muchos request innecesarios, esto podría afectar negativamente si tienes alta concurrencia o esto se refleja en costos por uso de servidor. Commented el 10 jun. 2016 a las 15:16
  • Excelente, creo que me iré por la opcion de usar el metodo isomorfico, aun no tengo muchos conocimientos en javascript. oye Joel tengo una duda de novato: si el uso de ajax no me refleja los cambios que otra persona haga en los registros desde otra pc, entonces para que usarlo? entonces seria mejor irse directamente a la programación reactiva sin usar ajax o me equivoco?
    – LuisC
    Commented el 10 jun. 2016 a las 15:55
1

No vas a poder recargar la pestaña 2 puesto que la petición al servidor la haces desde la pestaña 1.

Debes usar un framework para notificar cambios desde el servidor a la página. En tu caso, para no complicar más el tema haría Polling. Es la solución clásica , se trata en realizar cada X tiempo una petición por javascript al servidor. No es lo recomendable hoy en día pero una vez que tienes el proyecto iniciado meter nuevos frameworks puede ser más problemático.

Personalmente uso Polling salvo cuando son desarrollos .net que uso SignalR.

1
  • Gracias @HectorFernandez tengo 1 pregunta: ¿si uso alguno de los frameworks de frontend para notificar cambios del servidor es posible que haya conflictos con bootstrap?.
    – LuisC
    Commented el 10 jun. 2016 a las 13:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.