Tengo un sistema de chat que estoy tratando de desarrollar y estoy jugando con jQuery.

Por el momento, tengo algo como esto para actualizar constantemente el chat para asegurarme de que se cargan nuevos mensajes:

 setInterval(refreshMessages, 1000); function refreshMessages() { console.log("Refreshing messages"); $("#conversation_container").load(location.href+" #conversation_container>*",""); }

Esto garantiza que esto suceda en todos los navegadores, y no solo para el usuario que envió un nuevo mensaje si hubiera anidado esta llamada de función en una solicitud AJAX al hacer clic en el botón "Enviar mensaje".

Obviamente, esto es probablemente ineficiente ya que esto se hace cada 1 segundo. ¿Hay alguna manera de, en lugar de recargar todo el div, simplemente obtener los nuevos <div class="messages"> que se agregaron a la conversación y agregarlos? ¿O alguna otra forma de hacer esto un poco más eficiente? En lugar de obligar a un usuario a recargar la página por sí mismo o consultar la página cada segundo.

 <div id="conversation_container"> <div class="message"> First Message! </div> </div> <form> <input id="conversationID" type="hidden"></input> <input id="messageInput" name="message" placeholder="Type your message here" type="text"></input> <input id="sendMessage" type="submit" value="Send"></input> </form>

(Aquí hay un backend de Ruby para almacenar los mensajes y guardarlos en la matriz de mensajes que se mostrarán en la página).