ajax-обновление кол-ва новых сообщений.

В продолжение полезных трудов skif'a хотелось бы добавить еще один ajax-tip
Внимание, в IE были замечены глюки. Сегодня вечером пофикшу

Итак, автоматическое обновление кол-ва новых сообщений.

Описание: У пользователя открыта любая страничка livestreet, на которой отображается сколько непрочитанных сообщений находится в почтовом ящике. Данный tip автомтически обновляет этот блок каждые 5 секунд. После 60 запросов, если страница не была обновлена скрипт останавливается (после 5 минут). Это сделано для того чтобы если пользователь забыл закрыть браузер на ночь, неделю, не было лишних запросов. После загрузки страницы скрипт опять запускается.

1. Загружаем этот файл и кидаем его в /include/ajax/
Данный файл будет делать запрос к базе данных и возвращать кол-во новых сообщений для авторизированного пользователя
2. Добавляем javascript. Открываем main.js и вставляем в самый конец код:

    var requestMessages = new JsHttpRequest();    
    requestMessages.onreadystatechange = function() {
        if (requestMessages.readyState == 4) {         
            if (requestMessages.responseJS.bStateError) {
            	msgErrorBox.alert('Ошибка','Возникли технические проблемы при получении сообщений');            	
            } else { 
				if (requestMessages.responseJS.iCountTalkNew>0) {
					$('new_message').style.display="block";
					$('no_messages').style.display="none";
					$('new_msg_count').innerHTML = requestMessages.responseJS.iCountTalkNew;
				} 
				else
				{
					$('new_message').style.display="none";
					$('no_messages').style.display="block";				
				}
            }
        }
    };

Данный код создает объект request, который при вызове обрабатывает ответ (если новые собщения есть, блок new_message становится видимым и в new_msg_count вставляется кол-во новых сообщений.
3. Редактируем header.tpl: после куска кода, где устанавливается переменная DIR_WEB_ROOT:

	<script>var DIR_WEB_ROOT='{$DIR_WEB_ROOT}';</script>

вставялем следующий код:

{literal}
<script>
	var reqCount = 60;
	function reqMessages() {
		reqCount -= 1;
		if(reqCount>1) {
			requestMessages.open(null, DIR_WEB_ROOT+'/include/ajax/requestNewMessages.php', true);    
			requestMessages.send();
		}
	};
	
	reqMessages.periodical(5000);
</script>
{/literal}

Тут мы задаем функцию reqMessages(), которая вызывает наш объект requestMessages и задаем периодичность вызова (5 секунд)
4. Редактируем html-шаблон в header.tpl
Открываем строку номер 62 и заменяем блок

 	                {if $iUserCurrentCountTalkNew}
 	                <nobr><IMG vspace="0" title="Проверьте почту!" align="middle" height=12 alt="" src="{$DIR_STATIC_SKIN}/img/mail.gif" width=12 border=0> <A class=hello_exit href="{$DIR_WEB_ROOT}/talk/">{$aLang.user_privat_messages_new}({$iUserCurrentCountTalkNew})</a></nobr>
 	                {else}
 	                <nobr><A class=hello_exit href="{$DIR_WEB_ROOT}/talk/">{$aLang.user_privat_messages}</a></nobr>
 	                {/if}
на

<span id="new_messages" {if !$iUserCurrentCountTalkNew} style="display:none" {/if}>
			<nobr>
			{$aLang.user_privat_messages_new_1} 
			<IMG vspace="0" title="Проверьте почту!" align="middle" height=12 alt="" src="{$DIR_STATIC_SKIN}/i/mail.gif" width=12 border=0> 
			<A class="login_m_link" href="{$DIR_WEB_ROOT}/talk/">
				{$aLang.user_privat_messages_new} 
				(<span id="new_msg_count">{$iUserCurrentCountTalkNew}</span>)
			</a>
			</nobr>
		</span>
		<span id="no_messages" {if $iUserCurrentCountTalkNew} style="display:none" {/if}>
			<nobr>
			{$aLang.user_privat_messages_1} 
			<A class="login_m_link" href="{$DIR_WEB_ROOT}/talk/">
				{$aLang.user_privat_messages}
			</a>
			</nobr>
		</span>		
.

Всё.

24 комментария

avatar
круто, спасибо! работает! :)
avatar
типстриксы атакуют =)
  • ort
  • +5
avatar
очень, ну просто очень полезная вещь!!!
предлагаю вставить эту функцию по-умолчанию.
avatar
Я недоумеваю почему вы не юзаете mootools?
avatar
я тоже могу парить мульку и умничать что у меня проект с 8к топиков и 40к коментов, простите это всё напарсеное или просто подразнить людей… уж извините за офф топ, надоело. и эти понты что юзать что не юзать. Вот решение! Оно оптимально! Не нравиться? — проходите мимо! Меня больше всего бесят эти обстракции: Я недоумеваю почему вы не юзаете mootools? Где конкретные факты? где статья с подробным описанием и примерами? — БРЕД!
avatar
Я думаю он имел в виду зачем дополнительный плагин request для mootools используется вместо стандартного…
Плагин интереснее стандартного решения mootools тем что параметры просто возвращать:)
avatar
я это прекрасно поняла, вопрос не в этом
avatar
Сколько желчи.

Про 8к постов было не здесь сказано, да и просто перенесли всё из БД старого движка. Сейчас создается дизайн, за основу был взят вот такой.

Где примеры? Да вот же. Request, HTML Request, JSON Request, Form Send. Свои конкретные рецепты выложу как только до них дойду. Обещать не стану, но постараюсь не забыть.
avatar
avatar

requestMessages.responseJS.iCountTalkNew; Дошло.Через mootools я возвращал бы JSON объект. Это сложнее на пару строчек. Просто я в начале своего JS пути очень долго не понимал почему нельзя совместо юзать JQuery и Mootools. Я почти их скрестил, и до меня начало доходить ЧЕМ я всё это время занимался. :) Буквально прочел весь код обоих библиотек. Теперь стойкое отторжение к таким скрещиваниям, плюс осознанный выбор Моотулса и неплохое его понимание :)
avatar
если ты предложишь вариант проще без использования плагинов — я уверен что его примут.
Текущая реализация выполнена так исключительно из желания сделать как-то чтоб работало (ибо на шаблоне пока никто не заморачивался)
avatar
автор забыл отметить что при определенном кол-ве онлайн данный скрипт положит сервер.
извините, но это же не чат, чтоб каждые 5 секунд проверять личные сообщения.
avatar

выставите любой нужное вам время в миллисекундах.
reqMessages.periodical(5000);

можете поставить минуту
reqMessages.periodical(60000);
avatar
если у вас есть реальная необходимость как можно быстрее уведомлять пользователя о новом личном сообщении, то лучше используйте для этого icq, в инете можно найти несколько классов для отправки сообщений.
делать из сайта чат считаю неправильным.
avatar
icq используется далеко не везде. Зачем усложнять систему?
avatar
Решается это вдумя способами:
1. Кеширование.
2. Увеличение времени м-у запросами.

И причем вообще тут чат?
avatar
а как же тогда на одноклассниках? :)
avatar
Прикольно но я считаю что это лишение.
avatar
ИМХО, бесполезная опция.
avatar
Комментарии почему-то постятся с перезагрузкой страницы только.
avatar
рекоммендую получше почитать топик
avatar
еще не реализована данная функция
avatar

в main.js $('new_message'), а в header.tpl id="new_messages"… вобщем это надо согласовать… чтоб без ошибок было.
avatar
для новой версии движка подходит?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.