471 Шаг 4 — PHP
Именно здесь творятся чудеса. PHP должен сохранять базу данных пользователей онлайн соответственно времени их пребывания на сайте и использовать их IP-данные о местоположении из API Hostip's. Потом, все это кэшируется для будущего использования в cookie на ПК пользователей.
who-is-online/online.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
require "connect.php"; require "functions.php"; // Мы не хотим, чтобы боты попадали в статистику: if(is_bot()) die(); $stringIp = $_SERVER['REMOTE_ADDR']; $intIp = ip2long($stringIp); // Проверка на существование пользователя онлайн на сайте: $inDB = mysql_query("SELECT 1 FROM tz_who_is_online WHERE ip=".$intIp); if(!mysql_num_rows($inDB)) { // Если пользователя нет в базе данных, то // забираем geoip данные и вставляем их в таблицу онлайн: if($_COOKIE['geoData']) { // Если "geoData" cookie был ранее проставлен скриптом, то используем его // list($city,$countryName,$countryAbbrev) = explode('|',mysql_real_escape_string(strip_tags($_COOKIE['geoData']))); } else { // Создаем API для вызова Hostip: $xml = file_get_contents('http://api.hostip.info/?ip='.$stringIp); $city = get_tag('gml:name',$xml); $city = $city[1]; $countryName = get_tag('countryName',$xml); $countryName = $countryName[0]; $countryAbbrev = get_tag('countryAbbrev',$xml); $countryAbbrev = $countryAbbrev[0]; // Устанавливаем cookie с данными, срок жизни, которых месяц: setcookie('geoData',$city.'|'.$countryName.'|'.$countryAbbrev, time()+60*60*24*30,'/'); } $countryName = str_replace('(Unknown Country?)','UNKNOWN',$countryName); mysql_query("INSERT INTO tz_who_is_online (ip,city,country,countrycode) VALUES(".$intIp.",'".$city."','".$countryName."', '".$countryAbbrev."')"); } else { // Если пользователь онлайн, просто обновляем поле dt в таблице _who_is_online: mysql_query("UPDATE tz_who_is_online SET dt=NOW() WHERE ip=".$intIp); } // Удаляем вхождения, которые не обновлялись более 10 минут: mysql_query("DELETE FROM tz_who_is_online WHERE dt < SUBTIME( NOW(),'0 0:10:0' ) "); // Считаем всех пользователей онлайн: list($totalOnline) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM tz_who_is_online")); // Выводим число: echo $totalOnline; |
Этот PHP скрипт вызывается с помощью jQuery, чтобы создать необходимое количество Div-ов в соответствии с текущим числом посетителей онлайн. Однако, за кулисами, этот скрипт записывает IP посетителя в базу данных и выдает его местоположение на основе IP адреса.
Использование jQuery — есть самая лучшая стратегия для данного виджета, потому что время исполнения скрипта очень «дорого».
Другой метод работы скрипта заключается в том, чтобы хранить в БД только IP-адреса посетителей, а Geo данные вызывать при показе панели. Это означает, что количество посетителей онлайн, влияет на время работы скрипта, так как пришлось бы за один показ панели обрабатывать необходимое количество IP-адресов. А это не хорошо).
Вы можете посмотреть на работу API, набрав в командной строке: http://api.hostip.info/?ip=128.128.128.128. Запрос вернет XML документ, который содержит все типы данных, включая страну и город, имя, связанное с IP, аббревиатуру страны и даже абсолютные координаты. Мы извлекаем данные из XML с помощью PHP функции file_get_contents () и получаем нужные данные.
who-is-online/geodata.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
require "connect.php"; require "functions.php"; // Нам не нужны боты: if(is_bot()) die(); // Выбираем топ 15 стран с наибольшим количеством посетителей онлайн: $result = mysql_query(" SELECT countryCode,country, COUNT(*) AS total FROM tz_who_is_online GROUP BY countryCode ORDER BY total DESC LIMIT 15"); while($row=mysql_fetch_assoc($result)) { echo ' <div class="geoRow"> <div class="flag"><img src="who-is-online/img/famfamfam-countryflags/'.strtolower($row['countryCode']).'.gif" width="16" height="11" /></div> <div class="country" title="'.htmlspecialchars($row['country']).'">'.$row['country'].'</div> <div class="people">'.$row['total'].'</div> </div> '; } |
Geodata.php вызывается через jQuery для создания выдвижной панели с данными о местоположении. В этом файле выполняется один запрос к базе данных, в котором данные о посетителях группируются по странам, в порядке убывания популярности страны (с наибольшим онлайн к наименьшему)
Для иконок флагов стран, мы используем сервис FAMFAMFAM. Потрясающей вещью в Hostip API, является то, что она возвращает код страны в стандартном двухбуквенном формате, который как раз поддерживается сервисом FAMFAMFAM. Это означает, что мы избавляемся от циклов перебора иконок флагов.
Шаг 5 — jQuery
JavaScript управляет AJAX запросами и выдвижением панели. Это будет непростой задачей с чистым JS, и именно поэтому мы используем новейшие версии библиотеки jQuery.
Теперь давайте взглянем на то, как выглядит код.
who-is-online/widget.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(document).ready(function(){ // Эта функция выполняется один раз при загрузке документа // Кэшируем jQuery селекторы: var count = $('.onlineWidget .count'); var panel = $('.onlineWidget .panel'); var timeout; // Загружаем число пользователей онлайн в count div с помощью AJAX: count.load('who-is-online/online.php'); $('.onlineWidget').hover( function(){ // Устанавливаем событие 'open' на выдвижной панели: clearTimeout(timeout); timeout = setTimeout(function(){panel.trigger('open');},500); }, function(){ // Событие 'close': clearTimeout(timeout); timeout = setTimeout(function(){panel.trigger('close');},500); } ); var loaded=false; // Флаг предотвращающий множественные AJAX запросы к geodata.php; // panel.bind('open',function(){ panel.slideDown(function(){ if(!loaded) { // Загружаем страны и флаги // как только панель откроется: panel.load('who-is-online/geodata.php'); loaded=true; } }); }).bind('close',function(){ panel.slideUp(); }); }); |
Вы может быть несколько озадачены использованием в меню SetTimeout. Это делается для того, чтобы подождать пока откроется панель. Таким образом, непреднамеренное перемещение курсора мыши на виджете, не будет прерывать событие открытия панели, и как только открыли, не будет ее закрывать, если курсор мыши покинет панель.
Виджет готов!
Пример
На этом этапе вы, вероятно, захотите поставить виджет к себе на сайт. Для того, чтобы виджет работал, вам необходимо выполнить SQL код из table.sql в архиве. SQL скрипт создаст таблицу tz_who_is_online, которая используется в виджете.
Потом вы должны загрузить файлы на сервер и прописать widget.js в разделе head страницы (вместе с библиотекой jQuery). После этого, вы должны заполнить данные доступа к MySQL базе в connect.php и, наконец, добавить разметку из demo.html в Вашу веб-страницу.
Выводы
Иметь доступ к данным онлайн посетителей сайта — это мечта любого веб-мастера. Такие инструменты, как Google Analytics представляют такой функционал Вашему сайту, но отсутствие данных реального времени несколько отталкивает и делает наш виджет очень привлекательным и интересным.
Что вы думаете на счет кода? Как бы вы его изменили? Что бы еще добавили?
AJAX я не учил, а вот про php могу сказать что делается все проще и быстрее. База данных тут совсем не нужна, кто онлайн, проверяем через файлы сессий, которые хранятся на web-сервере. Все просто, получаем дату последнего обновления сессии, если она меньше 1-3 минут, то посетитель на сайте, если нет, то нет. :-). AJAX можно прикрутить.
код в студию
to Talker
Ajax это не язык, его не нужно учить