Actualmente estoy trabajando en una aplicación node/express que muestra varias informaciones sobre la ISS. Estoy usando una API compartida por la NASA que devuelve datos JSON.
Quiero que los datos se actualicen dinámicamente en mi página usando EJS, sin necesidad de actualizarlos. digamos cada 1000ms.
Aquí está mi código real para obtener la longitud y latitud actuales de la ISS:
Lado del servidor:
app.get("/iss", function(req, res){ var url = "http://api.open-notify.org/iss-now.json"; request(url, function(err, response, body){ if (!err && response.statusCode == 200){ var data = JSON.parse(body); res.render("ISS", {data: data}); } }); });Lado del cliente :
<div class="ui main text inverted container segment"> <div class="ui huge header">Where is the ISS ?</div> <p>Longitude : <%= data["iss_position"].longitude %> </p> <p>Latitude : <%= data["iss_position"].latitude %> </p> </div> Escuché sobre Socket.io pero no sé si estaría optimizado para mis necesidades. Además, ¿puedo hacer que funcione usando la función setInterval() ? Si es así, ¿puedes ayudarme con eso?
Gracias por tu ayuda.
Llamada api de muestra para el punto final iss
app.get("/iss", function(req, res){ var url = "http://api.open-notify.org/iss-now.json"; request(url, function(err, response, body){ if (!err && response.statusCode == 200){ var data = JSON.parse(body); res.send(data); } }); });Código del lado del cliente-
<div class="ui main text inverted container segment"> <div class="ui huge header">Where is the ISS ?</div> <p>Longitude :<span id="longitude"> <%= data["iss_position"].longitude %> </span></p> <p>Latitude : <%= data["iss_position"].latitude %> </p> </div>Asumiendo que estás usando jQuery
<script> $.ajax({ "url":<base_url>+"/iss", "success":function(data){ $("#longitude").html(data.iss_position.longitude); }, "error":function(error){ //handle error here } }) </script>Quiero que los datos se actualicen dinámicamente en mi página usando EJS, sin necesidad de actualizarlos. digamos cada 1000ms.
Es posible que deba llamar a la función Ajax usando setInterval para actualizar el envío de la solicitud cada 1000 ms
Código para setInterval
<script> setInterval(function(){ $.ajax({ "url":<base_url>+"/iss", "success":function(data){ $("#longitude").html(data.iss_position.longitude); }, "error":function(error){ //handle error here } }) }, 1000); </script> $(document).ready(function() { setInterval(function() { $.ajax({ "url": "http://api.open-notify.org/iss-now.json", "success": function(data) { $("#longitude").html(data.iss_position.longitude); }, "error": function(error) { console.log(error); } }) }, 1000); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="longitude"> </span>Puede consultar el fragmento anterior y ver la actualización de longitud.