使用PHP、Mysql和jQuery搭建一个简易的在线用户统计功能
要搭建一个简单的在线统计用户数功能,我们需要完成以下步骤: 1. 创建一个MySQL数据库,用于存储用户信息。 2. 使用PHP连接到MySQL数据库,并查询用户数量。 3. 使用jQuery发送Ajax请求,获取用户数量。 4. 在前端页面上显示用户数量。 以下是具体的实现代码: 1. 创建MySQL数据库和表: ```sql CREATE DATABASE user_count; USE user_count; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL ); ``` 2. PHP代码(connect_db.php): ```php <?php $servername = "localhost"; $username = "username";
我们要统计在一段时间内访问站点的人数,有多种解决方案,你可以使用Cookie,session结合文本或者数据库来记录用户访问数。本文将使用PHP,结合Mysql以及jQuery,展示一个统计在线人数以及访客地区分布的示例。
通常,当访客访问网站时,页面记录用户的cookie信息,当cookie过期即认为用户不在线。本文中我们使用PHP记录访客IP,并在客户端记录cookie及过期时间,同时通过新浪IP地址接口,获取访客的地理位置(本例只记录省份),一并写入mysql表中,即可统计一段时间内的访客总数,也可以查看访客的地区分布。
HTML代码
我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向时展示详细列表。
<divclass="demo"><divid="total">当前在线:<spanid="onlinenum"></span></div><ulid="onlinelist"><li><imgsrc="loader.gif"></li></ul></div>
CSS代码
我们用CSS来渲染显示效果,为了就是不让我们的示例很难看,下面的代码中,我们使用了CSS3,时代在进步啊,所以建议使用现代浏览器预览效果。
.demo{width:150px;margin:20pxauto;font-size:14px}#total{padding:6px10px;background:#090url(arr.png)no-repeatrighttop;color:#fff;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:003px#ccc;-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;}#onlinelist{background:#f7f7f7;border:1pxsolid#d3d3d3;display:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:003px#ccc;-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;}#onlinelistli{height:20px;line-height:20px;padding:4px6px;border-bottom:1pxdotted#d9d9d9}#onlinelistlispan{float:right}#onlinelistli:hover{background:#fff}
Mysql代码
我们要准备一张数据表online,用来记录访客IP、地区及访问时间。整个示例统计过程都依赖这张表,其结构如下:
CREATETABLEIFNOTEXISTS`online`(`id`int(11)NOTNULLAUTO_INCREMENT,`ip`varchar(30)NOTNULL,`province`varchar(64)NOTNULL,`addtime`int(10)NOTNULLDEFAULT'0',PRIMARYKEY(`id`))ENGINE=MyISAMDEFAULTCHARSET=utf8;
php代码
online.php用来记录访客信息,包括IP地址和地区。首先检测数据表中是否有访客IP记录,如果有,则只更新访问时间,否则,获取用户省份区域,并将用户IP即省份区域插入到表中。在此,可以判断是否存在访客的cookie记录,如果不存在则向新浪IP地址库请求获取访客的区域信息,并设置cookie值和过期时间。最后,我们删除表中已经过期的记录,统计总记录数并输出,详细请看代码注释。
include_once('connect.php');//连接数据库$ip=get_client_ip();//获取客户端IP$time=time();//查询表中是否有ip为当前访客IP的记录$query=mysql_query("selectidfromonlinewhereip='$ip'");if(!mysql_num_rows($query)){//如果不存在访客IPif($_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);//调用新浪IP地址库$arr=json_decode($json,true);//解析json$province=$arr['province'];//获取省份setcookie('geoData',$province,$time+600);//设置cookie,设置过期时间为10分钟}//将访客信息插入到数据表中mysql_query("insertintoonline(ip,province,addtime)values('$ip','$province','$time')");}else{//如果存在,则更新该用户访问时间mysql_query("updateonlinesetaddtime='$time'whereip='$ip'");}//删除已过期的记录$outtime=$time-600;mysql_query("deletefromonlinewhereaddtime<$outtime");//统计总记录数,即在线用户数list($totalOnline)=mysql_fetch_array(mysql_query("selectcount(*)fromonline"));echo$totalOnline;//输出在线总数mysql_close();
关于新浪IP地址库的调用,您也可以参阅helloweba.com文章根据IP定位用户所在城市信息的介绍。
函数get_client_ip()用来获取用户真实IP。
functionget_client_ip(){if(getenv("HTTP_CLIENT_IP")&&strcasecmp(getenv("HTTP_CLIENT_IP"),"unknown"))$ip=getenv("HTTP_CLIENT_IP");elseif(getenv("HTTP_X_FORWARDED_FOR")&&strcasecmp(getenv("HTTP_X_FORWARDED_FOR"),"unknown"))$ip=getenv("HTTP_X_FORWARDED_FOR");elseif(getenv("REMOTE_ADDR")&&strcasecmp(getenv("REMOTE_ADDR"),"unknown"))$ip=getenv("REMOTE_ADDR");elseif(isset($_SERVER['REMOTE_ADDR'])&&$_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],"unknown"))$ip=$_SERVER['REMOTE_ADDR'];else$ip="unknown";return($ip);}
geo.php用来统计各省份(区域)访客人数分布。通过查询数据库,并按省份分组排序即可,注意我们将最终的数据集以JSON的形式输出,便于前端AJAX交互。
include_once('connect.php');//连接数据库//查询区域统计$sql="selectprovince,count(*)astotalfromonlinegroupbyprovinceorderbytotaldesc";$result=mysql_query($sql);while($row=mysql_fetch_array($result)){$list[]=array('province'=>$row['province'],'total'=>$row['total']);}echojson_encode($list);//以json格式输出
jQuery代码
前端页面需要做的是,页面加载时展示访客总数,即使用ajax请求online.php即可。然后当鼠标滑向统计箭头时,通过ajax请求geo.php获取各区域省份的在线人数,并以下拉的方式展现效果。
$(function(){代码片段$("#onlinenum").load("online.php");$(".demo").hover(function(){$("#onlinelist").slideDown("fast");varstr='';$.getJSON("geo.php",function(json){$.each(json,function(index,array){str=str+"<li><span>"+array['total']+"</span>"+array['province']+"</li>";});$("#onlinelist").html(str);});},function(){$("#onlinelist").slideUp("fast");});});