PHP+Mysql+jQuery compte le nombre actuel d'utilisateurs en ligne

Cet article présente principalement PHP+Mysql+jQuery pour compter le nombre actuel d'utilisateurs en ligne. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

HTML

Nous plaçons un p#total sur la page pour afficher le nombre actuel de personnes en ligne et une liste #onlinelist pour afficher la répartition régionale des visiteurs par défaut. , nous sommes dans la liste Placer une image avec animation de chargement, et plus tard nous utilisons jQuery pour contrôler la liste détaillée à afficher lorsque la souris glisse dessus.

<p class="demo"> 
  <p id="total">当前在线：<span id="onlinenum"></span></p> 
  <ul id="onlinelist"> 
    <li><img src="loader.gif"></li> 
  </ul> 
</p>

CSS
Nous utilisons CSS pour rendre l'effet d'affichage. Afin de ne pas rendre notre exemple laid, dans le code suivant, nous utilisons CSS3. Ah, il est donc recommandé d'utiliser un navigateur moderne pour prévisualiser l'effet.

.demo{width:150px; margin:20px auto; font-size:14px} 
#total{padding:6px 10px; background:#090 url(arr.png) no-repeat right top; color:#fff; 
cursor:pointer; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 
-moz-box-shadow:0 0 3px #ccc; -webkit-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc;} 
#onlinelist{background:#f7f7f7; border:1px solid #d3d3d3; display:none; -moz-border-radius:5px; 
-webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 3px #ccc; 
-webkit-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc;} 
#onlinelist li{height:20px; line-height:20px;padding:4px 6px;border-bottom:1px dotted #d9d9d9} 
#onlinelist li span{float:right} 
#onlinelist li:hover{background:#fff}

Mysql
Nous devons préparer un tableau de données en ligne pour enregistrer l'adresse IP des visiteurs, la région et l'heure d'accès. L'ensemble du processus de statistiques d'échantillonnage repose sur ce tableau, dont la structure est la suivante :

CREATE TABLE IF NOT EXISTS `online` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `ip` varchar(30) NOT NULL, 
 `province` varchar(64) NOT NULL, 
 `addtime` int(10) NOT NULL DEFAULT '0', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

PHPonline.php est utilisé pour enregistrer les informations sur les visiteurs, y compris l'adresse IP et la région. Tout d'abord, vérifiez s'il existe un enregistrement IP de visiteur dans le tableau de données. Si tel est le cas, mettez uniquement à jour l'heure d'accès. Sinon, obtenez la province et la région de l'utilisateur et insérez l'adresse IP de l'utilisateur, c'est-à-dire la province et la région dans le tableau. Ici, vous pouvez déterminer si l'enregistrement de cookie du visiteur existe. S'il n'existe pas, demandez à la base de données d'adresses IP Sina d'obtenir les informations régionales du visiteur et définissez la valeur du cookie et le délai d'expiration. Enfin, nous supprimons les enregistrements expirés dans le tableau, comptons le nombre total d'enregistrements et les extrayons. Veuillez consulter les commentaires du code pour plus de détails.

include_once('connect.php'); //连接数据库 
 
$ip = get_client_ip(); //获取客户端IP 
$time = time(); 
//查询表中是否有ip为当前访客IP的记录 
$query = mysql_query("select id from online where ip='$ip'"); 
if(!mysql_num_rows($query)){//如果不存在访客IP 
  if($_COOKIE['geoData']){//如果存在cookie，则获取用户的区域 
    $province = $_COOKIE['geoData']; //区域（省份） 
  }else{ 
    $api = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=$ip"; 
    $json = file_get_contents($api);//
    $arr = json_decode($json,true);//解析json 
    $province = $arr['province'];//获取省份 
    setcookie('geoData',$province,$time+600); //设置cookie，设置过期时间为10分钟 
  } 
  //将访客信息插入到数据表中 
  mysql_query("insert into online (ip,province,addtime) values ('$ip','$province','$time')"); 
}else{//如果存在，则更新该用户访问时间 
  mysql_query("update online set addtime='$time' where ip='$ip'"); 
} 
//删除已过期的记录 
$outtime = $time-600; 
mysql_query("delete from online where addtime<$outtime"); 
//统计总记录数，即在线用户数 
list($totalOnline) = mysql_fetch_array(mysql_query("select count(*) from online")); 
echo $totalOnline;//输出在线总数 
mysql_close();

La fonction get_client_ip() est utilisée pour obtenir la véritable IP de l'utilisateur.

function get_client_ip() { 
  if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) 
    $ip = getenv("HTTP_CLIENT_IP"); 
  else if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), 
"unknown")) 
    $ip = getenv("HTTP_X_FORWARDED_FOR"); 
  else if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) 
    $ip = getenv("REMOTE_ADDR"); 
  else if (isset ($_SERVER['REMOTE_ADDR']) && 
$_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) 
    $ip = $_SERVER['REMOTE_ADDR']; 
  else 
    $ip = "unknown"; 
  return ($ip); 
}

geo.php est utilisé pour compter la répartition du nombre de visiteurs dans chaque province (région). Il suffit d'interroger la base de données et de trier par province. Notez que nous générerons l'ensemble de données final sous forme de JSON pour faciliter l'interaction ajax frontale.

include_once('connect.php');//连接数据库 
//查询区域统计 
$sql = "select province,count(*) as total from online group by province order by total desc"; 
$result = mysql_query($sql); 
while($row=mysql_fetch_array($result)){ 
  $list[] = array( 
    'province' => $row['province'], 
    'total' => $row['total'] 
  );  
} 
echo json_encode($list);//以json格式输出

jQuery
Ce que la page frontale doit faire, c'est afficher le nombre total de visiteurs lorsque la page se charge, c'est-à-dire utiliser ajax pour demander en ligne. php. Ensuite, lorsque la souris glisse sur la flèche des statistiques, geo.php est demandé via ajax pour obtenir le nombre de personnes en ligne dans chaque région et province, et l'effet est affiché sous forme de liste déroulante.

$(function(){ 
  $("#onlinenum").load("online.php"); 
   
  $(".demo").hover(function(){ 
    $("#onlinelist").slideDown("fast"); 
    var str = ''; 
    $.getJSON("geo.php",function(json){ 
      $.each(json,function(index,array){ 
        str = str + "<li><span>"+array[&#39;total&#39;]+"</span>"+array[&#39;province&#39;]+"</li>"; 
      }); 
      $("#onlinelist").html(str); 
    }); 
  },function(){ 
    $("#onlinelist").slideUp("fast"); 
  }); 
});

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Tutoriel détaillé étape par étape sur l'installation modulaire de PHP

PHP implémente le compte officiel WeChat pour envoyer automatiquement du rouge API d'enveloppe

Explication détaillée des méthodes et exemples de fonctionnement des fichiers php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!