Почему не обновляются локальные данные внутри setInterval?

Question

[rvitalia]

Добрый день!

Есть интервал установленный на 10 секунд.

export function checkTime() {
    //делаем интервал запроса через каждые 10 секунды и отслеживаем изменение файла.
    setInterval(function () {

        jQuery.ajax({
            url: 'receiveData.php',
            type: 'POST',
            data: {},
            success: function () { 
            },
            error: function () {
                console.log('ERROR');
            }
        })
        receiveTxt();
    }, 10000);
}

Здесь в коде через php получаются некоторые данные с сервера и сохраняются в локальный файл.
Внизу запускается функция (receiveTxt());

Она следующим образом получает данные из файла

function readTextFile(file) {
    let rawFile = new XMLHttpRequest();
    let allText;
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
                // alert(allText);
                console.log(allText);                
            }
        }
    }
    rawFile.send(null);
    // console.log(allText);

    return allText;
}

ну и дальше полученный код парсится по нуждам..

Проблема возникла в том, что файл обновляется по факту, а вот в полученных данных нет. Т.е. как он считал первый раз полученные данные, так они и крутятся. Где я ошибся, или что упустил? Заранее спасибо.....

Comments

[Rsa97]

А где функция receiveTxt()?

[rvitalia]

Rsa97, в ней первый вызов идёт function readtextfile - то есть второй фрагмент кода.

Answer 1

[Stalker_RED]

Как-то все запутано у вас, непонятно зачем.
Отдельно пост через jQuery.ajax, и вместо того чтобы в ответе передать ваш message вы запрашиваете его отдельно. Почему-то уже не через jQuery, а через hxr.

Через fetch не?

fetch('/path/to/message.txt')
  .then((response) => response.text())
  .then((text) => {
    console.log(text);
  });

При необходимости можно и заголовки, и прочие параметры настроить
Наверное единственное преимущество которое осталось у XHR, и которго нет у fetch - возможность отследить прогресс передачи большого файла, чтобы отрисовать полосочку.

А вообще, в целом, ваш код работает.

Добавил пример с fetch, немного логирования, и пришлось заменить в jQuery.ajax post на get, так как plunker не поддерживает POST.

Comments

[rvitalia]

Да вы безусловно правы. Я просто уже не знаю в какую сторону извернуться, проблема в том что как только вставляю в сэтинтервал, все перестает работать...поэтому уже нагородил такой велосипед. Фетч да,не пробовал...хотя на нем больше всего запросов писал..сейчас попробую.

[Stalker_RED]

rvitalia, дополнил. Если все работает, значит проблема не в том коде, который вы показали.
И постарайтесь не писать код типа "if error console.log('ERROR')", выводите саму ошибку.

[rvitalia]

Stalker_RED, я все понял. Сейчас буду заново стирать все и писать, так как уже ничего не работает)) путаница полная. Сейчас обновлю код отпишусь....

[rvitalia]

Stalker_RED, вообщем вот что получилось. Весь код теперь такой.

export function checkTime() {

    setInterval(function () {
        let response = fetch('https://url...../message.txt')
            .then((response) => response.text())
            .then((text) => console.log(text));

    },10000)
}

Осталось одно но. Когда я принудительно обновляю список файлов в файловом менеджере на хостинге, то у меня в message.txt уже новые данные. А здесь все также крутятся старые данные и никак не обновляются. Осталось найти способ их как то обновить...

[Stalker_RED]

rvitalia, вы что-нибудь слышали о том, как работает кеширование в браузерах?

[Stalker_RED]

rvitalia, ну и чтоб добить: в ряде случаев выгоднее не спамить сервер проверками каждые 10 секунд с каждого клиента, а рассылать уведомления с сервера, только в том случае, когда файл изменился.
push-сообщения, server sent events, websockets, long polling, вот это все.

[rvitalia]

Stalker_RED, Про кеш то я знаю, но в рамках своей задачи, столкнулся впервые...

[Stalker_RED]

rvitalia, данные не обновляются потому, что браузер берет их из кеша. Посмотрите вкладку network (сеть) в браузере, скорее всего там будет видно что запрос на самом деле не происходит.
Либо запрос происходит, но какой-то из промежуточных узлов отдает кешированный ответ. Это все потому, что они уверены, что этот контент МОЖНО кешировать, и у них есть на это свободное место.

Самый нормальный и честный путь - подправить заголовки этому файлу так, чтобы он прекратил кешироваться полностью. Еще лучше - добавить ETag.

Если это непосильная задача, то есть грязные хаки - запрашивать через POST, или добавлять в GET-запрос каждый раз какой-нибудь мусорный "хвост", типа '...url/mesaage.txt?bullshit=' + Math.random(); но в последнее время этот способ перестал быть надежным, некоторые браузеры это просекли.

[rvitalia]

Stalker_RED, да, вы правы. Первое сообщение проходит, дальше пишет
Код статуса: 200 (источник: кеш диска).
Направление движение понятно. Спасибо. Буду лопатить инфу...

[rvitalia]

Stalker_RED, спасибо огромное. Решил вопрос следующим образом:

let response = fetch('https://url/message.txt',{
            headers: {
                'Cache-Control' : 'no-cache'
            }
        })

Осталось уйти от SetInterval....

Answer 2

[Сергей delphinpro]

А - Асинхронность

jQuery.ajax({ // 1. Выполнится этот код
            url: 'receiveData.php',
            type: 'POST',
            data: {},
            success: function () { 
                 // 3. А уже после окончания запроса выполнится этот код
                 // Именно в это время данные будут получены и сохранены.
            },
            error: function () {
                console.log('ERROR');
            }
        })
receiveTxt(); // 2. Потом сразу же выполнится этот код

Отсюда следует простой вывод. Вызов функции receiveTxt следует перенести в коллбэк success

Comments

[rvitalia]

Так и делал вначале,но от туда почему то не работает функция. Не считывает данные. Что не так может быть?

[Сергей delphinpro]

rvitalia, ну вот там и нужно искать проблему.

[rvitalia]

Сергей delphinpro, не совсем понимаю, ведь код работает,считывает и парсит...но стоит перенести success, перестает... Пустое значение возвращает...

[Сергей delphinpro]

rvitalia, ну я без кода тоже ничего не пойму =)

[rvitalia]

Сергей delphinpro, так нет, я же приложил все. Второй фрагмент кода не выводит уже данные,когда вставляю в success.. то есть там console.log уже пустой.

[Сергей delphinpro]

rvitalia, ну во-первых, во второй функции абсолютно та же проблема с асинхронностью.

function readTextFile(file) {
    let rawFile = new XMLHttpRequest(); // раз
    let allText;
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText; // четыре
                // alert(allText);
                console.log(allText);                
            }
        }
    }
    rawFile.send(null); // два
    // console.log(allText);

    return allText; // три
}

Эта функция всегда будет возвращать пустое значение. Впростом варианте можно переписать так

function readTextFile(file, callback) {
    let rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                callback(rawFile.responseText)
            }
        }
    }
    rawFile.send(null);
}

// Использовать так

readTextFile('file', function(response) {
  console.log(response);
});

Во-вторых, не совсем понятно, зачем второй раз дергать запрос.
В том же receiveData.php можно сохранить файл и сразу выплюнуть ответ с этими данными клиенту и получить их в success

success: function (response) { 
  console.log(response);
},

[rvitalia]

Сергей delphinpro, спасибо за разъяснения. Буду пробовать.

[rvitalia]

Сергей delphinpro, сделал как все написано выше первый фрагмент кода.

export function checkTime() {
    //делаем интервал запроса через каждые 10 секунды и отслеживаем изменение файла.
    setInterval(function () {

        jQuery.ajax({
            url: 'receiveData.php',
            type: 'POST',
            data: {},
            success: function () { 
                readTextFile("url..../message.txt", function(response){console.log(response)});
            },
            error: function () {
                console.log('ERROR');
            }
        })
       
    }, 10000);
}

и второй фрагмент кода.

export function readTextFile(file,callback) {
    let rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                callback(rawFile.responseText);             
            }
        }
    }
    rawFile.send(null);
}

Ничего в итоге не поменялось. В локальном файле данные есть, а сюда никак получить не может....