Quiero actualizar una interfaz html simple con datos que ingresan esporádicamente desde el servidor a través de un websocket (estoy usando socket.io). Para cada dato, quiero crear un elemento <p> con texto dentro sobre los datos y agregarlo como elemento secundario dentro de <div> . Luego quiero que el navegador actualice automáticamente la página para mostrarla.

El backend está enviando los datos como debería cuando lo registré en la consola. Sin embargo, mi interfaz no se está procesando correctamente. Después de enviar los datos, el navegador no se actualiza, por lo que no muestra el elemento <p> . Sin embargo, cuando lo actualizo manualmente, el primer elemento <p> se muestra y parpadea muy rápido. No muestra elementos <p> adicionales a medida que ingresan datos.

Aquí está el código frontend en cuestión:

 <div id="names"></div> <script src="/socket.io/socket.io.js"></script> <script> let socket = io(); let nameDiv = document.getElementById('names'); socket.on('message', data => { let newName = document.createElement('p'); newName.textContent = data.name; nameDiv.appendChild(newName); location.reload(); }); </script>