小项目:聊天室 (jQuery,PHP,MySQL)

Posted kkdf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小项目:聊天室 (jQuery,PHP,MySQL)相关的知识,希望对你有一定的参考价值。

这几天写了一个小项目,初衷是自己写一个有前端,有后端的东西练练手,所以,实际意义并不大,只是拿来试试手而已。

我对这个聊天室的构想是这样的:先建两个数据库,一个保存用户名和密码,另一个保存用户名和发送的信息,并记录发送的时间,网页上也想了很多骚操作,但是最后也就简简单单的卡了几张图在两边,简洁,勉强算是美观可看。用户登陆之后,网页就开始下载数据库的信息,并把用户发送的信息一个个垒成盒子向腾讯一样发出来。额。。。想来真是简单,我竟然写了一星期左右。

时间其实大部分耗费在处理后台发送过来的数据上面,查了很多资料,总是不得其法,后面终于慢慢摸索出来了,要在后台先把数据转换成json格式,然后在js里面转为数组,之后就可以随便拆分。

好了,上代码吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>chat with sb</title>
        <meta charset="utf-8" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js"></script>
        <script src="js/index.js"></script>
        <style type="text/css">
            a{cursor: pointer;}
            img{height:100%;}
            div{overflow:hidden;border: 1px solid black;text-align: center;}
            #left{position: absolute;top:0px;left:0px;width:25%;height:100%}
            #right{position: absolute;top:0px;right:0px;width:25%;height:100%}
            #sign{position: absolute;right:50%;margin-right: -24%;width:80px;height:auto}
            #main{position: absolute;top:50px;left:50%;margin-left: -24%;width: 48%;height:700px;}
            .show{height:70%;margin:10px 10px 10px 10px;overflow: auto;}
            .text{height:25%;margin:10px 10px 10px 10px;}
            #signUp,#signIn{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px}
            a:hover{background-color: #C71585;}
            #writeIn{width:100%;height:80%;border:none}
            #exit{position: absolute;right:1px;top:1px;}
            .insert{text-align: left;width: -webkit-fit-content;margin-left:10px;margin-top:10px ;padding: 5px 5px 5px 5px;background-color:#C71585;}
            .insert a:hover{background-color: white;}
            .insert a{cursor: auto;}
        </style>
    </head>
    <body>
        <div id="left"><img src="img/left.jpg" /> </div>
        <div id="right"><img src="img/right.jpg" /></div>
        <div id="sign"><a onclick="signIn()">登陆</a><a onclick="signUp()">注册</a>   </div>
        <div id="main">
            <div class="show"><a id="more">更多消息</a></div>
            <div class="text"><textarea id="writeIn"></textarea><button onclick="send()">发送</button></div>
        </div>
        <script type="text/javascript">

            newInsert(sb,2017-7-22 16:02:24,在吗?);
            var a=new ajax();
            setInterval("a.aja()",1000);    
                
            function ajax(){                                                        
                var  maxid=0;
                this.aja=function(){                    
                    if($.cookie(username)==null){                        
                        return;
                    }
                    $.post("http://127.0.0.1/timeFigure.php",{
                        max:maxid
                    },function(data,status){                        
                        var obj = JSON.parse(data);
                        obj=obj.reverse();
                        for(var i=0;i<obj.length;i++){                        
                            newInsert(obj[i].user,obj[i].date,obj[i].str);
                        };
                        maxid=obj[i-1].id;                                                
                    }    );    
                };

            };

        

              function newInsert(user,time,str){
                    var insert=$("<div class=‘insert‘></div>");
                    insert.html("<a>"+user+"  "+time+"<br />"+str+"</a>");
                    $(".show").append(insert);
              };
              function   signIn(){
                     $("body").css("background-color","#999999");
                  $("#writeIn").css("background-color","#999999");
                  var sign=$("<div id=‘signIn‘></div>");
                  sign.html("<br/><br/>用户名:<input type=‘text‘ id=‘user‘/><br />密码:<input type=‘password‘ id=‘password‘/><br /><br /><button onclick=‘submitIn()‘>提交</button>");
                  $("body").append(sign);
                  sign.css("background-color","white");
                  var exitDiv=$("<button onclick=‘exit()‘ id=‘exit‘>X</button>");
                  sign.append(exitDiv);                  
              };
              function   signUp(){
                     $("body").css("background-color","#999999");
                  $("#writeIn").css("background-color","#999999");
                  var sign=$("<div id=‘signUp‘></div>");
                  sign.html("<br/><br/>用户名:<input type=‘text‘ id=‘user‘ /><br />密码:<input type=‘password‘ id=‘password‘/><br /><br /><button onclick=‘submitUp()‘>提交</button>");
                  $("body").append(sign);
                  sign.css("background-color","white");
                  var exitDiv=$("<button onclick=‘exit()‘ id=‘exit‘>X</button>");
                  sign.append(exitDiv);                      
              };
              function exit(){
                    $("#exit").parent().remove();
                    $("body").css("background-color","white");
                  $("#writeIn").css("background-color","white");
              };
               function submitIn(){
                     $.post("http://127.0.0.1/signIn.php",{
                         user:$("#user").val(),
                         password:$("#password").val()
                     },function(data,status){
                         if(data){
                             $.cookie(username,data);
                             $("#sign").html("你好,"+$.cookie(username));exit();
                         }
                         else {
                             alert("密码错误");
                         }                         
                     });                  
               };
               function submitUp(){
                     $.post("http://127.0.0.1/signUp.php",{
                         user:$("#user").val(),
                         password:$("#password").val()
                     },function(data,status){
                         var COOKIE_NAME=username;
                                               //cookie异常
                         $.cookie(COOKIE_NAME,data,{ expires: 7, path: / });
                         $("#sign").html("你好,"+$.cookie("username"));
                     });                   
                   exit();
               };
               function send(){
                  if(!$.cookie(username))
                   {
                       alert("请先登录");
                       $("#writeIn").val("");
                       return;
                   }
                   $.post("http://127.0.0.1/saveSTR.php",{
                       user:$.cookie(username),
                       str:$("#writeIn").val()
                   },function(data,status){
                       $("#writeIn").val("");
                       if(data)
                       {
                           alert("data");
                       }
                   });
               };

        </script>
    </body>
</html>

注册的PHP代码

<?php
    header(‘Access-Control-Allow-Origin:*‘);
    $user=$_POST[‘user‘];
    $password=$_POST[‘password‘];
    
    $conn=mysql_connect("127.0.0.1","root","root");
    if(!$conn)
    {
        die (mysql_error());
    }

    mysql_select_db(‘my_db‘,$conn);
    if(mysql_query("INSERT INTO persons (user,password) VALUES (‘$user‘,‘$password‘)"))
    {
        die ($user);
    }else{
        echo mysql_error();
    }
    mysql_close($conn);
?>

发送信息的后台代码

<?php
    header(‘Access-Control-Allow-Origin:*‘);
    $max=$_POST[‘max‘];    
    $array=array();
    $conn=mysql_connect("127.0.0.1","root","root");
    if(!$conn)
    {
        die (mysql_error());
    }
    mysql_select_db(‘my_db‘,$conn);    
    mysql_query("SELECT * FROM context\n"
     . " ORDER BY id ASC LIMIT 0, 30 ");
    $sql=mysql_query("select * from context WHERE id>$max");  
    while($row=mysql_fetch_array($sql))
    {
        $array[]=array(‘user‘=>($row[‘user‘]),‘date‘=>$row[‘reg_date‘],‘str‘=>($row[‘str‘]),‘id‘=>$row[‘id‘]);        
    }
    $json_obj = json_encode($array);
     echo ($json_obj); 
    mysql_close($conn);    
?>

 

登陆,还有上传用户发送的文字代码也差不多,就不放了。

以上是关于小项目:聊天室 (jQuery,PHP,MySQL)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序之swoole/WebSocket创建聊天室(php)

ECharts+PHP+MySQ+ Ajax 实现图表绘制

PHP Jquery:聊天系统,啥是理想的框架?

ajax+jquery+php+mysql实现简单的网页聊天室(带表情)

php+jquery聊天

使用 PHP 和 jQuery 进行实时聊天。在哪里存储信息? mysql还是文件?