Вывод данных без перезагрузки страницы при добавлении нового сообщения

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Есть идея для гостевой книги, реализовать обновление списка сообщений у всех пользователей, при добавлении кем-либо новой записи. Как в ВК сделано. Никто не сталкивался с подобной реализацией? Сейчас у меня реализована функция добавления сообщений без перезагрузки страницы:

HTML5
1
2
3
4
5
6
7
echo"<table   class=\"list\"  style=\"width:100%\">";
            echo"<tr class=\"alter\"><td colspan=2>";
           echo"Добавить сообщение";
           echo"</td></tr>";
           echo"<tr class=\"alter\"><td colspan=2>";
           echo"Введите Текст сообщения<br />";
echo"<TEXTAREA id=\"msg\" NAME=\"msg\" cols=100 rows=8 class=\"t_area\"></TEXTAREA><br />";

PHP
1
2
3
if(!$ret){
    getCap();  // Выводим каптчу
}

HTML5
1
2
3
4
5
<img title="Нажмите, чтобы добавить сообщение" src="images/send.png"  onClick="return getData1('add_guest',document.getElementById('msg').value<?if(!$ret){?>+'^'+document.getElementById('keystring').value<?}?>,'comments','dy4y6ag4d3yhgcuqa9hk')">
 
 
          </td></tr>
        </table>

Это форма, она при отправке вызывает функцию getData1:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// функция, срабатываемая на основном интервале
function getData1(curvar,data,obj,sess) {
    var senddata = curvar+"|"+data;
    // запросим сервер
    if(curvar=="var") {
        return(getXMLDocumentSite(senddata,sess,obj));
    } else {
        if(obj!="") {
            document.getElementById(obj).innerHTML = "<img src='images/ajax.gif' />";
 
 
        }
        var newData=getXMLDocumentSite(senddata,sess,obj);
        // проверим - если равна null
        if(newData!="null" || newData!="") {
            if(obj=="") {
                return(newData);
            } else {
                document.getElementById(obj).innerHTML = newData;
                
            }
        }
    }
}

а она в свою очередь вызывает другую функцию, которая методом XMLHttpRequest(); обращается к php файлу где происходит запись комментария к БД и возвращает на исходную страницу, без перезагрузки, в определенный див блок вывод обновленного списка комментариев. Но это происходит для того кто добавлял этот комментарий. А как это реализовать для всех, кто есть в гостевой?
Кому интересно о чем речь, то можно посмотреть здесь http://mirdj.ru/guest.php

@kalabuni · 07.04.2014, 10:26

Сообщение от MirDj

Это форма, она при отправке вызывает функцию getData1:

форма - это теги <form></form> и всё то, что находится между ними

в приведённом вами коде тегов <form></form> как раз таки нет (а есть всякая фуйня, написанная к тому же не в виде HTML-кода, как это нужно, а ~~через попу~~ в PHP-виде)

кроме того, необходимо видеть, как и когда вызывается функция getData1 () - ибо есть много умников, которые сабмитят форму с загрузкой в текущее окно страницы, указанной в атрибуте ACTION тега <form>, а потом удивляются - почему это их функция не срабатывает

@MirDj · 07.04.2014, 10:53 **[ТС]**

Хорошо, может я не совсем корректно выразился. Вызывается функция getData1(); кликом по картинке(Отправить). В коде это видно должно быть

Вот эта кнопка.

HTML5
1
<img title="Нажмите, чтобы добавить сообщение" src="images/send.png"  onClick="return getData1('add_guest',document.getElementById('msg').value<?if(!$ret){?>+'^'+document.getElementById('keystring').value<?}?>,'comments','dy4y6ag4d3yhgcuqa9hk')">

При клике передаются данные:
add_guest - в php файле определенный раздел, который должен обработаться сделан методом :

PHP
1
2
3
4
5
6
7
8
switch($mod) {
 
 
 case "add_guest":
 
break;
 
}

Здесь берутся данные из текстареа и если пользователь не авторизованный то из каптчи тоже.

HTML5
1
document.getElementById('msg').value<?if(!$ret){?>+'^'+document.getElementById('keystring').value<?}?>

comments - див блок в который вернется ответ из php файла

ну а dy4y6ag4d3yhgcuqa9hk - просто кэш

@kalabuni · 07.04.2014, 11:47

идея ваша была сформулирована в топе: "реализовать обновление списка сообщений у всех пользователей, при добавлении кем-либо новой записи. Как в ВК сделано."

вопрос стоит в том, как любому - и желательно побыстрей - узнать, что в БД появилась новая запись

разумеется, сервер здесь - пассивная сторона и разослать новую запись пользователям не может

надо организовать систему, при которой:
-- во-первых, любое обращение любого юзера к серверу будет инициировать проверку БД на предмет появления новой записи, кою и нужно ему передать [в том числе и автор новой записи сам получит обновление своей страницы]
-- и, во-вторых, если какой-либо юзер долго неактивен - принудительно связать его страницу с сервером, а это делается только через тайм-аут

правильно ли я понял, то, о чём вы тут пишете - это всего лишь ваша попытка реализовать "во-первых" в части обновления содержимого для самого автора новой записи?

@MirDj · 07.04.2014, 12:06 **[ТС]**

Нет. Не правильно. Зайдите по ссылке и Вы убедитесь что это у меня уже реализовано. Пользователь вводит текст сообщения, нажимает отправить и сообщение тут же появляется на странице. Без перезагрузки.
Мне надо, чтобы для пользователей находящихся в данный момент в гостевой, произошла такая же перезагрузка. А вот как это реализовать, я пока не могу сообразить. Мысленно понимаю что требуется, а вот кодом пока не могу.

@kalabuni · 07.04.2014, 12:17

Сообщение от MirDj

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

выше я указал вам путь решения:
сервер не может быть инициатором отсылки данных во все браузеры, где в настоящий момент открыта ваша страница
сервер может только ответить на запрос каждой конкретной страницы

отсюда, проверка БД на новую запись производится:
-- либо по иницативе юзера (когда он сам связывается с сервером, отсылая ему какой-то запрос)
-- либо принудительно через тайм-аут страница этот запрос серверу отсылает

иного не дано

@MirDj · 07.04.2014, 12:39 **[ТС]**

Т.е по сути это получается обычная автоматическая перезагрузка страницы через определенное время?

@kalabuni · 07.04.2014, 12:54

ну по сути - да... почитайте тему Динамическое обновление контента аля Facebook, Vkontakte и прочее

@MirDj · 07.04.2014, 14:04 **[ТС]**

Спасибо, ознакомлюсь

Добавлено через 28 минут
Почитал я конечно и попытался реализовать таким образом, делаю тоже самое что делает нажатие на кнопку Отправить, только через setInterval и без добавления сообщения в БД:

JavaScript
1
2
3
4
setInterval('showMsg()', 20000);
   function showMsg() {
   return getData1('add_guest','upd','comments','dy4y6ag4d3yhgcuqa9hk')
    }

Ну как же "Не красиво" выглядит это постоянное обновление контента. На том же ВК это не видно глазу, а просто видно результат того что появилось новое сообщение в списке.

Пример можно посмотреть все по тому же адресу

Добавлено через 12 минут
Если только не делать обновление, а например сверять кол-во выведенных уже сообщений и кол-во в БД на текущий момент запроса и если их больше, то просто добавлять в новый див элемент эти сообщения.

Добавлено через 5 минут
Но просто счетчик сообщений не поможет определить какие новые, а какие старые сообщения. А только поможет узнать есть ли вообще новые сообщения. Как вариант в массив записывать идентификаторы всех сообщений и в php скрипте указывать что выводить все, кроме полученных идентификаторов из массива? Как вообще по нагрузке такая реализация?

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.04.2014, 11:47
	идея ваша была сформулирована в топе: "реализовать обновление списка сообщений у всех пользователей, при добавлении кем-либо новой записи. Как в ВК сделано." вопрос стоит в том, как любому - и желательно побыстрей - узнать, что в БД появилась новая запись разумеется, сервер здесь - пассивная сторона и разослать новую запись пользователям не может надо организовать систему, при которой: -- во-первых, любое обращение любого юзера к серверу будет инициировать проверку БД на предмет появления новой записи, кою и нужно ему передать [в том числе и автор новой записи сам получит обновление своей страницы] -- и, во-вторых, если какой-либо юзер долго неактивен - принудительно связать его страницу с сервером, а это делается только через тайм-аут правильно ли я понял, то, о чём вы тут пишете - это всего лишь ваша попытка реализовать "во-первых" в части обновления содержимого для самого автора новой записи? 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	07.04.2014, 12:06 [ТС]
	Нет. Не правильно. Зайдите по ссылке и Вы убедитесь что это у меня уже реализовано. Пользователь вводит текст сообщения, нажимает отправить и сообщение тут же появляется на странице. Без перезагрузки. Мне надо, чтобы для пользователей находящихся в данный момент в гостевой, произошла такая же перезагрузка. А вот как это реализовать, я пока не могу сообразить. Мысленно понимаю что требуется, а вот кодом пока не могу. 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	07.04.2014, 12:39 [ТС]
	Т.е по сути это получается обычная автоматическая перезагрузка страницы через определенное время? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.04.2014, 12:54
	ну по сути - да... почитайте тему Динамическое обновление контента аля Facebook, Vkontakte и прочее 0