Salve a tutti,
sono un neofita di Js. Prima di andare al cuore del problema vi illustro cosa devo fare.
Ho un file di testo su cui ogni x secondi vengono scritti ordinatamente alcuni dati, principalmente coordinate.
Il mio obiettivo è quello di inserire ad ogni aggiornamento del file di testo, un marker su una mappa di Google per ogni coppia di coordinate letta dal file.
Per fare tutto questo ho ovviamente progettato un web server locale.
Dunque i file da programmare sono due: un file .js relativo al server locale e un altro file .html in cui si interviene sulla mappa.
Il file .js è questo (ometto l'implementazione della funzione che processa i dati presi dal file):
const express = require('express');
const fs=require('fs');
const app = express();
app.use(express.static('public'))
const port = 3000;
const ip = '127.0.0.1';
app.get('/', function(req, res)
{
res.sendFile(__dirname+'/index.html'); //risponde con il file "index.html");
})
app.get('/prova', function(req,res){
fs.readFile("public/data_set.txt", "utf-8", function(err,data){
if (err) {
console.log(err);
}
else{
//codice relativo all'estrazione dei dati di interesse dal file (è corretto).
//creazione oggetto con chiavi e valori corrispondenti
let misure={day:calendario, hour:ora, latitude: latit, longitude:long};
//risposta HTML contenente l'oggetto "misure"
res.send(misure);
}
}
})
});
i problemi invece si presentano sul file .html con cui il server risponde al client quando instaura connessione con localhost.
Il file .html è il seguente:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h1>PERCORSO</h1>
<script src=personale></script>
<div id="map"></div>
<script>
// Inizializzazione e aggiunta mappa
function initMap() {
let città = {lat: 53.789132, lng: 33.350162};
// mappa centrata su città
let map = new google.maps.Map( document.getElementById('map'), {zoom: 10, center: città});
}
//chiamata Ajax HTTP di tipo GET
let loop = setInterval($.get(percorso file .js, function(data){
console.log(data);
let latitude=data.latitude;
let longitude=data.longitude;
let coords={ lat: latitude, lng: longitude };
let marker = new google.maps.Marker({position: coords, map:map});
}),500);
</script>
<script async defer src=myGoogleApiKey></script>
</body>
</html>
in pratica ogni 500 ms viene effettuata una chiamata Ajax di tipo get che dovrebbe "riferire" al server di leggere nuovamente l'ultima riga del file di testo per vedere se ci sono nuove coordinate.
Aprendo il browser all'indirizzo localhost:3000 mi si presentano due errori:
1)
http://127.0.0.1:3000/favicon.ic not found.
2) compare un errore ad ogni ciclo di "setInterval" che mi dice "missing ] after element list" in corrispondenza della funzione setInterval.
Qualcuno può darmi indicazioni o suggerimenti per risolvere i problemi?