用jquery做了一个ajax聊天室

现要只是实现了聊天室的基本聊天，ajax无刷新显示功能，会员功能 等正在制作中。

演示地址：http://www.ye55.com/chat

下载地址：

chat.rar

数据库sql:

 

SQL代码
  1. CREATE TABLE `message` (   
  2.   `mid` int(20) NOT NULL auto_increment,   
  3.   `msg` varchar(255) NOT NULL,   
  4.   `user` varchar(50) NOT NULL,   
  5.   `time` int(10) NOT NULL,   
  6.   PRIMARY KEY  (`mid`),   
  7.   KEY `user` (`user`)   
  8. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=161 ;   
  9.   
  10.   
  11.   
  12. CREATE TABLE `session` (   
  13.   `id` varchar(32) NOT NULL,   
  14.   `time` int(10) NOT NULL,   
  15.   `timenow` int(10) NOT NULL,   
  16.   `data` text NOT NULL,   
  17.   `ip` varchar(15) NOT NULL,   
  18.   PRIMARY KEY  (`id`)   
  19. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;   
  20.   

现在程序开源，其它的像字体，字色，会员，在线列表等功能将陆续完成。

主要的三个页面的代码

1、 index.php

 

XML/HTML代码
  1. <?php  
  2. //程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  3. require_once("config.php");   
  4. ?>  
  5. <!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7.  <HEAD>  
  8.   <TITLE> chat </TITLE>  
  9.   <META NAME="Generator" CONTENT="EditPlus">  
  10.   <META NAME="Author" CONTENT="">  
  11.   <META NAME="Keywords" CONTENT="">  
  12.   <META NAME="Description" CONTENT="">  
  13.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  14.   <link href="css/global.css" rel="stylesheet" type="text/css" />  
  15.   <SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>  
  16.  </HEAD>  
  17.  <BODY>  
  18.  <div id="main">  
  19.     <div id="main_left" style="float:none;margin:0px auto;">  
  20.         <div id="chat_m" style="width:500px;height:500px;border:#cccccc 1px solid;overflow:auto;">Loading…</div>  
  21.   
  22.          <div id="main_l_from">  
  23.          <FORM METHOD=POST ACTION="javascript:void(0)">  
  24.             昵称：<INPUT TYPE="text" NAME="user" id="user" size="8" value="<?=$_SESSION[‘user’]?>"> 内容:   
  25.             <INPUT TYPE="text" NAME="message" id="message" style="width:250px;"> <INPUT TYPE="submit" name="sub" value="发言" id="sub">  
  26.          </div></FORM>  
  27.     </div>  
  28.     <!–<div id="main_right">  
  29.     <h2>在线会员</h2>  
  30.     </div>—>  
  31. <SCRIPT LANGUAGE="JavaScript">  
  32. <!–   
  33.     $("#chat_m").load("chat.php");   
  34.     $("#sub").click(function(){   
  35.         if($("#user").val()==”){   
  36.             alert("昵称不能为空!");   
  37.         }else if($("#message").val()==”){   
  38.             alert("聊天内容不能为空!");   
  39.         }else{   
  40.                 $.post("ajax.php?act=send",{user:$("#user").val(),msg:$("#message").val()},function(data){   
  41.                     if(data.msg===true){   
  42.                         showmsg();   
  43.                         $("#message").val("");   
  44.                     }else{   
  45.                         alert(data.msg);       
  46.                     }   
  47.                 },"json")   
  48.             }   
  49.     })   
  50. function sc()    
  51. {    
  52. var e=document.getElementById("chat_m")    
  53. ee.scrollTop=e.scrollHeight;    
  54. }    
  55. //var s=setInterval("sc()",200)    
  56. //–>  
  57. </SCRIPT>  
  58. <hr size=1>  
  59. <center>程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com <a href="http://www.phpd.cn">www.phpd.cn</a> </center>  

 

2、chat.php

 

 

XML/HTML代码
  1. <?php  
  2. require_once("config.php");   
  3. //程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  4. $fist=$db->getfirst("select `mid` from `message` order by `mid` desc ");   
  5. $mid=$fist[‘mid’]-40; //初始化聊天记录条数   
  6. $mid=$mid<=0?0:$mid;   
  7. $mid=0;   
  8. ?>  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  10.     <div id="contents"></div>  
  11.     <INPUT TYPE="text" style="display:none" NAME="mid" id="hide_mid" value="<?=$mid?>">  
  12.      <div id="end" style="width:400px;display:none;clear:both;"></div>  
  13.   <SCRIPT LANGUAGE="JavaScript">  
  14.   <!–   
  15.   //alert($("#hide_mid").val());   
  16.         function showmsg(){   
  17.             mids=$("#hide_mid").val();   
  18.                
  19.             $.post("ajax.php?act=display",   
  20.                    {mid:mids},   
  21.                    function(data){   
  22.                 //alert(data.list[2].user);   
  23.                         $("#hide_mid").val(data.mid);   
  24.                         if(data.list!=0){   
  25.                             for(i=0;i<data.list.length;i++){   
  26.                                 $("#contents").append("<br />"+data.list[i].user+"说: "+data.list[i].msg+"    ["+data.list[i].time1+"]");   
  27.                                 sc();   
  28.                             }   
  29.                         }   
  30.                    },"json");   
  31.             }   
  32.         function scrollWindow() {scroll(0, 100000); }    
  33.             showmsg();   
  34.             setInterval("showmsg()", 4000);    
  35.   //–>  
  36.   </SCRIPT>  

 

3、ajax.php

 

PHP代码
  1. <?php   
  2. require_once("config.php");   
  3. ////程序设计：℃冻番茄 QQ:7279915 E-mail:web@ye55.com www.phpd.cn   
  4. //发信息   
  5. if($_GET[‘act’]==‘send’){   
  6.     $msg=$_POST[‘msg’];   
  7.     $user=$_POST[‘user’];   
  8.     if(emptyempty($msg) || emptyempty($user)){   
  9.         $return[‘msg’]=‘聊天内容或昵称不能为空’;   
  10.     }else{   
  11.         $time=time();   
  12.         if($db->insert("insert into `message` (`msg`,`user`,`time`) values (‘$msg’,’$user’,’$time’)")){   
  13.             $return[‘msg’]=true;   
  14.         }else{   
  15.             $return[‘msg’]="err";   
  16.         }   
  17.     }   
  18.     echo json_encode($return);   
  19. }elseif($_GET[‘act’]==‘display’){   
  20.     if(isset($_POST[‘mid’])){   
  21.         $s=" where `mid`>’".$_POST[‘mid‘]."’ ";   
  22.     }else{   
  23.         $s=”;   
  24.     }   
  25.     $sql="select * from `message` $s order by `mid`";   
  26.     $total=$db->getcount($sql);   
  27.     if($total==0){   
  28.         $a=0;   
  29.     }else{   
  30.         $result=$db->query($sql);   
  31.         while($row=$db->getarray($result)){   
  32.             $row[‘time1’]=date(‘Y-m-d H:i:s’,$row[‘time’]);   
  33.             $a[]=$row;   
  34.             $b=$row[‘mid’];   
  35.         }   
  36.     }   
  37.     $ccc=array(‘list’=>$a,‘mid’=>$b);   
  38.     echo json_encode($ccc);   
  39. }   
  40. ?>  

《用jquery做了一个ajax聊天室》有9个想法

  2. xzy

    [quote=guest]我想问一下 您的session表, 起什么作用?[/quote]
    session表是用于session入库，这样的话，有二个最大的好处：一是session跨域，二是利用它可以非常容易统计在线用户，在线时长这些操作

  3. wwwkpsellcom

    这个程序有点问题呀，不过滤代码，可以在输入框里输入任意执行代码，那里敢用呀。

  4. xzy

    [quote=wwwkpsellcom]这个程序有点问题呀，不过滤代码，可以在输入框里输入任意执行代码，那里敢用呀。[/quote]
    上传错了版本，本来是做了过滤的。。呵呵

  5. wwwkpsellcom

    站长反映很迅速，不过测试页面点了发言没有任何反应。我用Maxthon跟IE8测试过都不行，我的是WIN7系统。

  6. xzy

    [quote=wwwkpsellcom]站长反映很迅速，不过测试页面点了发言没有任何反应。我用Maxthon跟IE8测试过都不行，我的是WIN7系统。[/quote]正常了。。呵呵。。显示与入库都加了函数 strip_tags用于过滤所有标签

  7. wwwkpsellcom

    [quote=xzy][/quote]行了，站长真行，原来一个strip_tags就可以搞定，学到东西了。

  9. xzy

    [quote=x]你见过哪个在线聊天用数据库的？[/quote]见过，有数据库的有memcache的还有直接socket flex，那又怎样？

评论已关闭。