您的位置：首页 > 编程语言 > PHP开发

[原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（二）

2011-03-15 10:39 761 查看

      接上文，我们提出了实现聊天室必须要解决的问题，下面我们来一起探讨下，这些问题将如何解决。

       1）关于数据存储的问题。数据存储可以采用多种形式，如：xml、写入文件，在其他语言中还是可以用application这个全局变量，而在PHP中没有这个全局变量，需要自己封装，还用使用数据库存储数据。本人比较懒惰，呵呵，使用数据库技术实现对数据的存储，这样即有利于数据的永久保存，更方便我们书写代码。

        2）数据显示的问题。数据显示的问题也可以通过多种方法来实现，比如：可以定时让网页刷新，每次刷新从数据库中读取数据，但是这种方法的最大问题是，每次可能会从数据库中取出所有的聊天信息，这样效率太差了。如果同时有几百个人同时在线，那么这个聊天室就会很慢很卡了，还有一种技术是采用Ajax技术实现局部刷新技术，动态的读取所需要的数据，这里应该说明一点要，实现聊天室一定要考虑性能、效率问题，所以读取数局决不能读取所有数据，而是要每次读取最后一条或者几条最新的数据...

我的这个聊天室已经实现这部分，请大家继续往下看。

       3）判断用户何时在线，何时离线。我们的在线用户列表中显示的是在线的用户，那何时判断用户在线情况的呢，我们这里是这样处理的，首先当用户进入聊天室的时候，需要初始化聊天室信息，以后每隔一段时间读取一次数据库，而我正是利用这点每次把用户的IP插入和当前时间插入到数据库中，当然，当当前用户IP已经存在当前表中，则我直接更新用户的最后一次登录时间，所以当用户没有离开这个页面，我都认为是在线。否则的情况是离线，离线的时候应该从用户在线表中删除当前用户的信息，最后把所有的用户显示到在线列表中。

      4）聊天室的一些特殊的处理。这里特殊处理包括当文字内容特别多的时候，会出现滚动条，让滚动条跟随内容滚动到底部，处理一些快捷键，直接可以发送信息等。

下面直接看源码：

聊天室登录页面

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>欢迎使用AJAX聊天室</title>

</head>



<body>

<form action="chatindex.php" name="form1" method="post">

<table width="400" border="1" align="center">

  <tr>

    <th height="52" colspan="2" scope="col">欢迎使用AJAX聊天室</th>

  </tr>

  <tr>

    <td width="107">用户名：</td>

    <td width="277"><input type="text" name="username" /></td>

  </tr>

  <tr>

    <td>密　码：</td>

    <td><input type="password" name="password" /></td>

  </tr>

  <tr>

    <td> </td>

    <td><input type="submit" value="进入聊天室" /> <input type="reset" value="取消"></td>

  </tr>

</table>

</form>

<p align="center">河北软件职业技术学院CSDN学院PHP方向版权所有 copyright 2011</p>

</body>

</html>

聊天室首页：

Code:

<?php

session_start();

if(!isset($_SESSION['user']))

{

$_SESSION['user']=$_POST['username'];

}



?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>欢迎使用AJAX聊天室</title>

<style>

.content{

height:300px;

width:616px;

font-size:14px;

color:#666666;

overflow:scroll;

background-color:#FFFF99;



}

.sendtext{

color: #009900;

background-color:#CCFFCC;

font-size:14px;

}

.users{

width:170px;

}

.send{

width:60px;

height:50px;

color:#0033CC;}

</style>

</head>



<body>

<table width="800" height="360" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#993399">

  <tr>

    <th width="616" height="31" bgcolor="#FFFFFF" scope="col">欢迎, <?php echo $_SESSION['user']; ?> 进入聊天室

    <input type="hidden" id="user" value="<?php echo $_SESSION['user']; ?>" /></th>

    <th width="184" rowspan="3" valign="middle" bgcolor="#FFFFFF" scope="col"><select id="userlist" class="users" size="27"><option>所有人</option></select></th>

  </tr>

  <tr>

    <td bgcolor="#FFFFFF"><div id="content" class="content"></div></td>

  </tr>

  <tr>

    <td bgcolor="#FFFFFF"><table width="800%" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td width="15%" align="right"><strong>我说：</strong></td>

        <td width="60%"><textarea id="sendtext" class="sendtext" cols="60" rows="3" onkeypress="send1()"></textarea></td>

        <td width="25%" align="center"><input type="button" class="send" value="发送" onclick="sengMsg()" /></td>

      </tr>

    </table></td>

  </tr>

</table>

<p align="center">河北软件职业技术学院CSDN学院PHP方向版权所有 copyright 2011<br>聊天室采用ajax+json技术实现</p>

</body>

</html>

<script language="javascript" type="text/javascript" src="firefoxEvent.js"></script>

<script language="javascript" type="text/javascript" src="../include/ajax.js"></script>

<script language="javascript" type="text/javascript">

/*

将用户输入的信息保存到数据库

*/

  function sengMsg(){



    //定义对象

    var xhr=new XMLHttpRequest();

    //接受用户输入的内容

    var msg=$("sendtext").value;



    //获取当前用户名

    var user=$("user").value;

    //定义请求的URL

    var url=$$("./sendMsg.php?msg="+msg+"&user="+user+"&r="+Math.random());

    //打开请求

    xhr.open("get",url,true);



    xhr.send(null);



    $("sendtext").value="";

  }







  /*

  动态的查询数据库，两秒查询一次

  */

  var maxid=0;



  function getMsg(){

     //获取当前用户名

     var user=$("user").value;



     var url="./getMsg.php";

     var params="maxid="+maxid+"&user="+user;



     ajaxget(url,params,getMsgProcess);



  }



  function getMsgProcess(xhr){



      var msgObj=eval("("+xhr.responseText+")");

      var msg=msgObj.Msgs;



      var msgstr=$("content").innerHTML;

      for(var i=0;i<msg.length;i++){



        msgstr+="  <b>"+msg[i].spkname+"</b> ["+msg[i].theip+"]"+" "+msg[i].createTime+" 说：<br>"+"    <font color='blue'>"+msg[i].content+"</font><br>";



        maxid=msg[i].id;





      }

      //



      $("content").innerHTML=msgstr;

      //设置让滚动条跟随文字滚动

      $("content").scrollTop=$("content").scrollHeight;

  }



setInterval("getMsg()",2000);

/*

捕捉文本框按下或者按住事件

*/

function send1(){

   //重写event事件

   var event = arguments[0]||window.event;

   //获得当前的ASC码

   var curKey = event.charCode||event.keyCode;

   //判断是否等于13，如如果是13则发送信息

   if(curKey==13){

   //调用发送方法

      sengMsg();



   }



}



//****************************处理在线用户信息************************



function getUsers(){

     //获取当前用户名

     var user=$("user").value;



     var url="./getUsers.php";

     var params="aa=1";



     ajaxget(url,params,getUsersProcess);



  }



  function getUsersProcess(xhr){



      var userlist=eval("("+xhr.responseText+")");

                       //重新设置在线用户下拉菜单的长度

      $("userlist").length=1;



      for(var i=0;i<userlist.length;i++){

      //产生一个选项

        var opt=new Option(userlist[i].username,userlist[i].username);

                       //添加选项

        $("userlist").add(opt,null);

      }



  }



setInterval("getUsers()",2000);





</script>



Ajax异步发送聊天信息页面：

Code:

<?php

//连接数据库

include("../include/dbconn.php");

//定义sql

$sql="insert into chat(spkname,theip,content,createTime)

                 values('{$_GET['user']}','{$_SERVER['REMOTE_ADDR']}','{$_GET['msg']}',now())";

//执行插入语句

mysql_query($sql);

?>

Ajax异步读取数据服务端：

Code:

<?php

//连接数据库

include("../include/dbconn.php");



/*

1) 判断一下当前用户是否已经在，useronline中存在，如果存在我们直接更新的他的名称、最后活跃时间

2）如果不存在，我们直接添加一条在线信息

3）判断是否离线，取出最后的时间和当前得时间的时间差，如果是大于设定的时间，表明已经离线，

则我们要删除离线用户的信息

*/

$rs=mysql_query("select id from useronline where theip ='{$_SERVER['REMOTE_ADDR']}'");

//判断

if(mysql_num_rows($rs)){

  //查询到，直接更新数据

  mysql_query("update useronline set username='{$_GET['user']}',lastTime=now() where theip ='{$_SERVER['REMOTE_ADDR']}'");



}else{

  mysql_query(" insert into useronline(username,theip,lastTime) values('{$_GET['user']}','{$_SERVER['REMOTE_ADDR']}',now())");

}

//删除不在线

mysql_query("delete from useronline where TIME_TO_SEC(now())-TIME_TO_SEC(lastTime)>10");







//定义sql

$sql="select id,spkname,theip,content,createTime from chat where id>{$_GET['maxid']}";

//执行插入语句

$rs=mysql_query($sql);



$arr=array();

while($row=mysql_fetch_assoc($rs)){



    $arr[]=$row;



}

$arr2=array("Msgs"=>$arr);

echo json_encode($arr2);

?>

得到当前在线用户列表：

Code:

<?php

//连接数据库

include("../include/dbconn.php");

$sql="select username,theip from useronline";

$rs=mysql_query($sql);



while($row=mysql_fetch_assoc($rs)){

   $arr[]=$row;

}



echo json_encode($arr);

//{{},{},}

?>

以上文件为完整代码，部分包含文件没有贴出，但是能够在我前几篇帖子中找到。敬请查看。

[原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（一）

[原创地址] [源码下载] [更多原创，多多支持多]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 聊天 ajax php json 数据库 mysql

相关文章推荐

新的分享

章节导航