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

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

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

好了，上代码吧

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="{CHARSET}">
  5.         <title>chat with sb</title>
  6.         <meta charset="utf-8" />
  7.         <script src="js/jquery.js" type="text/javascript"></script>
  8.         <script src="js/jquery.cookie.js"></script>
  9.         <script src="js/index.js"></script>
  10.         <style type="text/css">
  11.             a{cursor: pointer;}
  12.             img{height:100%;}
  13.             div{overflow:hidden;border: 1px solid black;text-align: center;}
  14.             #left{position: absolute;top:0px;left:0px;width:25%;height:100%}
  15.             #right{position: absolute;top:0px;right:0px;width:25%;height:100%}
  16.             #sign{position: absolute;right:50%;margin-right: -24%;width:80px;height:auto}
  17.             #main{position: absolute;top:50px;left:50%;margin-left: -24%;width: 48%;height:700px;}
  18.             .show{height:70%;margin:10px 10px 10px 10px;overflow: auto;}
  19.             .text{height:25%;margin:10px 10px 10px 10px;}
  20.             #signUp,#signIn{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px}
  21.             a:hover{background-color: #C71585;}
  22.             #writeIn{width:100%;height:80%;border:none}
  23.             #exit{position: absolute;right:1px;top:1px;}
  24.             .insert{text-align: left;width: -webkit-fit-content;margin-left:10px;margin-top:10px ;padding: 5px 5px 5px 5px;background-color:#C71585;}
  25.             .insert a:hover{background-color: white;}
  26.             .insert a{cursor: auto;}
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div id="left"><img src="img/left.jpg" /> </div>
  31.         <div id="right"><img src="img/right.jpg" /></div>
  32.         <div id="sign"><a onclick="signIn()">登陆</a><a onclick="signUp()">注册</a>   </div>
  33.         <div id="main">
  34.             <div class="show"><a id="more">更多消息</a></div>
  35.             <div class="text"><textarea id="writeIn"></textarea><button onclick="send()">发送</button></div>
  36.         </div>
  37.         <script type="text/javascript">
  38.  
  39.             newInsert('sb','2017-7-22 16:02:24','在吗?');
  40.             var a=new ajax();
  41.             setInterval("a.aja()",1000);    
  42.  
  43.             function ajax(){
  44.                 var  maxid=0;
  45.                 this.aja=function(){
  46.                     if($.cookie('username')==null){
  47.                         return;
  48.                     }
  49.                     $.post("http://127.0.0.1/timeFigure.php",{
  50.                         max:maxid
  51.                     },function(data,status){
  52.                         var obj = JSON.parse(data);
  53.                         obj=obj.reverse();
  54.                         for(var i=0;i<obj.length;i++){
  55.                             newInsert(obj[i].user,obj[i].date,obj[i].str);
  56.                         };
  57.                         maxid=obj[i-1].id;
  58.                     }    );
  59.                 };
  60.  
  61.             };
  62.  
  63.               function newInsert(user,time,str){
  64.                     var insert=$("<div class='insert'></div>");
  65.                     insert.html("<a>"+user+"  "+time+"<br />"+str+"</a>");
  66.                     $(".show").append(insert);
  67.               };
  68.               function   signIn(){
  69.                      $("body").css("background-color","#999999");
  70.                   $("#writeIn").css("background-color","#999999");
  71.                   var sign=$("<div id='signIn'></div>");
  72.                   sign.html("<br/><br/>用户名：<input type='text' id='user'/><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitIn()'>提交</button>");
  73.                   $("body").append(sign);
  74.                   sign.css("background-color","white");
  75.                   var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
  76.                   sign.append(exitDiv);
  77.               };
  78.               function   signUp(){
  79.                      $("body").css("background-color","#999999");
  80.                   $("#writeIn").css("background-color","#999999");
  81.                   var sign=$("<div id='signUp'></div>");
  82.                   sign.html("<br/><br/>用户名：<input type='text' id='user' /><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitUp()'>提交</button>");
  83.                   $("body").append(sign);
  84.                   sign.css("background-color","white");
  85.                   var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
  86.                   sign.append(exitDiv);
  87.               };
  88.               function exit(){
  89.                     $("#exit").parent().remove();
  90.                     $("body").css("background-color","white");
  91.                   $("#writeIn").css("background-color","white");
  92.               };
  93.                function submitIn(){
  94.                      $.post("http://127.0.0.1/signIn.php",{
  95.                          user:$("#user").val(),
  96.                          password:$("#password").val()
  97.                      },function(data,status){
  98.                          if(data){
  99.                              $.cookie('username',data);
  100.                              $("#sign").html("你好，"+$.cookie('username'));exit();
  101.                          }
  102.                          else {
  103.                              alert("密码错误");
  104.                          }
  105.                      });
  106.                };
  107.                function submitUp(){
  108.                      $.post("http://127.0.0.1/signUp.php",{
  109.                          user:$("#user").val(),
  110.                          password:$("#password").val()
  111.                      },function(data,status){
  112.                          var COOKIE_NAME='username';
  113.                                                //cookie异常
  114.                          $.cookie(COOKIE_NAME,data,{ expires: 7, path: '/' });
  115.                          $("#sign").html("你好，"+$.cookie("username"));
  116.                      });
  117.                    exit();
  118.                };
  119.                function send(){
  120.                   if(!$.cookie('username'))
  121.                    {
  122.                        alert("请先登录");
  123.                        $("#writeIn").val("");
  124.                        return;
  125.                    }
  126.                    $.post("http://127.0.0.1/saveSTR.php",{
  127.                        user:$.cookie('username'),
  128.                        str:$("#writeIn").val()
  129.                    },function(data,status){
  130.                        $("#writeIn").val("");
  131.                        if(data)
  132.                        {
  133.                            alert("data");
  134.                        }
  135.                    });
  136.                };
  137.  
  138.         </script>
  139.     </body>
  140. </html>

注册的PHP代码

  1. <?php
  2.     header('Access-Control-Allow-Origin:*');
  3.     $user=$_POST['user'];
  4.     $password=$_POST['password'];
  5.  
  6.     $conn=mysql_connect("127.0.0.1","root","root");
  7.     if(!$conn)
  8.     {
  9.         die (mysql_error());
  10.     }
  11.  
  12.     mysql_select_db('my_db',$conn);
  13.     if(mysql_query("INSERT INTO persons (user,password) VALUES ('$user','$password')"))
  14.     {
  15.         die ($user);
  16.     }else{
  17.         echo mysql_error();
  18.     }
  19.     mysql_close($conn);
  20. ?>

发送信息的后台代码

  1. <?php
  2.     header('Access-Control-Allow-Origin:*');
  3.     $max=$_POST['max'];
  4.     $array=array();
  5.     $conn=mysql_connect("127.0.0.1","root","root");
  6.     if(!$conn)
  7.     {
  8.         die (mysql_error());
  9.     }
  10.     mysql_select_db('my_db',$conn);
  11.     mysql_query("SELECT * FROM context\n"
  12.      . " ORDER BY id ASC LIMIT 0, 30 ");
  13.     $sql=mysql_query("select * from context WHERE id>$max");
  14.     while($row=mysql_fetch_array($sql))
  15.     {
  16.         $array[]=array('user'=>($row['user']),'date'=>$row['reg_date'],'str'=>($row['str']),'id'=>$row['id']);
  17.     }
  18.     $json_obj = json_encode($array);
  19.      echo ($json_obj);
  20.     mysql_close($conn);
  21. ?>

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

小项目：聊天室 （jQuery，PHP，MySQL）的更多相关文章

  1. 微信小程序--聊天室小程序(云开发)

    微信小程序 -- 聊天室小程序(云开发) 从微信小程序开发社区更新watch接口之后,一直在构思这个项目.项目已经完成很久,但是一直都没有空写一篇博客记录展示一下. 开源地址 wx-cloud-im: ...

  2. [Java小程序]聊天室——Socket和ServerSocket的使用

    这段小代码是因为担任Java助教给刚学习Java的本科大二的小学弟小学妹们指导,他们的实验作业就是编写一个Java聊天室客户端和服务器,为了避免出纰漏,自己事先写了一下. 客户端Ui代码: packa ...

  3. 用c写一个小的聊天室程序

    1.聊天室程序——客户端 客户端我也用了select进行I/O复用,同时监控是否有来自socket的消息和标准输入,近似可以完成对键盘的中断使用. 其中select的监控里,STDOUT和STDIN是 ...

  4. Linux聊天室项目 -- ChatRome（select实现）

    序 项目简介:采用I/O复用技术select实现socket通信,采用多线程负责每个客户操作处理,完成Linux下的多客户聊天室! OS:Ubuntu 15.04 IDE:vim gcc make D ...

  5. 基于LINUX的多功能聊天室

    原文:基于LINUX的多功能聊天室 基于LINUX的多功能聊天室 其实这个项目在我电脑已经躺了多时,最初写完项目规划后,我就认认真真地去实现了它,后来拿着这个项目区参加了面试,同样面试官也拿这个项目来 ...

  6. FastAPI（56）- 使用 Websocket 打造一个迷你聊天室

    背景 在实际项目中,可能会通过前端框架使用 WebSocket 和后端进行通信 这里就来详细讲解下 FastAPI 是如何操作 WebSocket 的 模拟 WebSocket 客户端 #!usr/b ...

  7. Java之聊天室系统设计一

    任务: 先上实现效果图: 登陆界面: index.jsp: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  8. Django项目--web聊天室

    需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...

  9. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

随机推荐

  1. hive入门（一）、什么是hive

    1.Hive 基本概念 Hive是基于Hadoop的一个 数据仓库工具,可以将结构化的数据文件映射成一张表,并提供类SQL查询功能: Hive是构建在Hadoop 之上的数据仓库: 使用HQL作为查询 ...

  2. Redis随笔（三）主从搭建

    1.安装redis cd /root/svr/wget http://download.redis.io/releases/redis-3.2.9.tar.gz tar -zxvf redis-3.2 ...

  3. Ajax提交Form表单的一种方法

    待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...

  4. Codeforces 915E Physical Education Lessons

    原题传送门 我承认,比赛的时候在C题上卡了好久(最后也不会),15min水掉D后(最后还FST了..),看到E时已经只剩15min了.尽管一眼看出是离散化+线段树的裸题,但是没有时间写,实在尴尬. 赛 ...

  5. beef配合ettercap批量劫持内网的浏览器

    先更改首先先打开ettercap的DNS文件进行编辑,在kali linux2.0下的文件路径为/etc/ettercap/etter.dns 在对应的位置添加对应的 标识和IP地址 * 代表所有域名 ...

  6. Java面向对象接口的应用实例练习

    interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

  7. HDU 1541 树状数组

    树状数组入门博客推荐 http://blog.csdn.net/qq_34374664/article/details/52787481 Stars Time Limit: 2000/1000 MS ...

  8. Open-air shopping malls（二分半径，两元交面积）

    http://acm.hdu.edu.cn/showproblem.php?pid=3264 Open-air shopping malls Time Limit: 2000/1000 MS (Jav ...

  9. Spring学习日志之Spring MVC启动配置

    对DispatcherServlet进行配置 Spring MVC的配置实际上就是对DispatcherServlet的配置 public class DispatcherServletConfig ...

  10. Apache Shiro 核心概念

    转自:http://blog.csdn.net/peterwanghao/article/details/8015571 Shiro框架中有三个核心概念:Subject ,SecurityManage ...