Таблица обновления в реальном времени с данными MySQL

#javascript #php #html #jquery #mysql

Вопрос:

У меня есть база данных, которая обновляется новыми строками почти каждые несколько секунд.

У меня есть таблица на моем веб-сайте, которую я хотел бы автоматически обновлять новыми строками, добавленными в начало, без необходимости обновления страницы пользователем.

Я проверял следующее:

         $(document).ready(function(){    
        loadstation();
    });
    function loadstation(){
        $("#data_download").load("/include/data_download.php");
        setTimeout(loadstation, 1000);      
    }
 

Это работает, однако я не могу ничего выбрать в таблице, так как при обновлении функции запрос отменяет выбор всего. Я также столкнулся с другой проблемой масштаба, и через некоторое время на странице я получаю сообщение об ошибке в браузере о проблемах с памятью «SBOX_FATAL_MEMORY_EXCEEDED».

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

Заранее спасибо.

Комментарии:

1. Если вы хотите такую частоту обновлений, вместо этого изучите использование веб-сайтов

Ответ №1:

Вы можете добавить метку времени в свои строки и извлекать (и загружать) только те дополнительные строки, которые произошли с момента последнего обновления.

Допустим, вы загрузили страницу в 00:01, затем извлекаете и добавляете (вместо загрузки) строки, добавленные с 00:01, и обновляете метку времени.

Это решило бы проблему удаления выделения, поскольку оно добавляло бы и загружало только дополнительные строки, а не перезагружало бы полную таблицу при каждом обновлении.

Комментарии:

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

2. Именно, load заменяет весь элемент загруженными данными, поэтому я предлагаю вместо этого использовать append.

3. но добавление оставит поля со старыми данными?

4. вызов success можно использовать для добавления (или добавления) данных вместо их простой замены. Это неправильно задокументировано при загрузке, но вместо этого полная информация находится на странице $.ajax. Тем не менее, существует также грязное решение, добавляющее пустой div и загружающее его внутрь: $('#maintable').append( $('<div/>').load('urlwithnewrows.php') );

Ответ №2:

Лучшим подходом было бы использовать AJAX. Сервер должен отправлять только данные обновленных полей (предпочтительнее формат JSON), а javascript должен просто заменить textContent необходимые поля.