ajax+js+json+dom+php+mysql实现一个聊天室

最新推荐文章于 2021-08-13 10:52:20 发布

mengyun00

最新推荐文章于 2021-08-13 10:52:20 发布

阅读量2.1k

点赞数

文章标签： ajax json mysql php session 聊天

本文链接：https://blog.csdn.net/mengyun00/article/details/7331869

版权

由于这几天网络的问题，所以有好几天都没有发博文了。整天听老师讲课也是混混顿顿的，三个字：有点乱。知识点太多容易混淆，而且基础差，跟着有点吃力。现在我只能一点一点的看视频，使劲的理解。

下面是我摸索的第一个阶段：

首先是一个登录页面：index

<!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=utf-8" />
<title>实现简单的聊天系统</title>
<style>
table{
	margin:auto auto;
	border:#00F 1px dashed;}
tr,td{
	border:#666 1px solid;}
</style>
</head>

<body>
<form action="login-check.php" method="post">
<table width="400" border="1"><br><br><br><br><br>
  <tr>
    <td colspan="2" align="center">欢迎来到CSDN乐知学院聊天室</td>
  </tr>
  <tr>
    <td align="right">用户名：</td>
    <td><input type="text" name="username"></td>
  </tr>
  <tr>
    <td align="right">密码：</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>
</body>
</html>

其中要注意的是<input>中的type的问题，我一开始登录类型写的是"type=button"但是这样怎样都登录不了，错误也找不到，然后我把button改为了submit，这时就行了。

然后我就查了一下这两者的区别：type=button 单纯是按钮功能；type=submit 是提交表单。（这下要记住了）！

接下来就是一个验证登录的页面：login-check.php

<?php
session_start();
header("Content-Type:text/html;charset=utf-8");
//接收客户端传递的参数
//判断用户名是否存在
if(isset($_POST['username'])){
//连接数据库
//查询
//判断

//session放入当前的用户名
$_SESSION['username']=$_POST['username'];

//防跳墙机制
$_SESSION['loginFlag']=1;

//跳转

header("Location:chatindex.php");
}


?>

下面这个是主要的页面，用户聊天的页面：chatindex.php

<?php
include './checkUser.php';
?>
<!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=utf-8" />
<title>无标题文档</title>
<style>
table{
margin:auto auto;	background-color:#66F;
border:#00F 1px dashed;}
tr,td{
	border:#666 1px solid;
	text-align:center;}
#chatContent{
	height:300px;
	width:500px;
	background-color:#09F;}
#sendMsg{
	width:500px; height:80px;}
#send_btn{
	height:80px;
	width:100px;
	color:#009;}
</style>
</head>

<body>
 <table width="600" border="1">
 <caption>超强聊天系统，无人能敌</caption>
  <tr>
    <td>欢迎<?php echo $_SESSION['username']; ?>来到聊翻天聊天室</td>
    <td>在线用户:</td>
  </tr>
  <tr>
    <td><div id="chatContent"></div></td>
    <td><select id="onlineUser"
    size="20" style="height:300px; width:100px;">
  <option>所有人</option>    
    <option>悟空</option>    
  <option>八戒</option>    
  <option>张三</option>    

</select></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><textarea id="sendMsg"></textarea></td>
    <td><input id="send_btn" type="button" value="发送" οnclick="sendMsg()"></td>
  </tr>
</table>

</body>
</html>

这个页面应该没什么问题，很容易理解的。

下面这个就是防跳墙的核心页面了:checkUser.php

<?php
//此页面目的是为了防跳墙
session_start();
//判断session中是否有值
if(!$_SESSION['loginFlag']){
 header("Location:index.php");
	 }
?>

开始我不太明白防跳墙是什么概念，干啥用滴，通过实战了解到了：通俗点来说，比如说有人看了一个很好的网站，要用自己的帐号才能看到里面的内容，然后他将自己看到的给对方把网址发过去，那对方岂不是就可以用那人的号做任何事情了吗。所以就有了这个防跳墙来防止，就是让他把网址发来后，如果没有开始设定的值，那么就自动跳转到登录页面了（不知道我这样解释，您能否看懂，不过您可以通过以上代码来尝试一下）

以上这些还没有开始实现聊天室的功能，但是，自此我会一直将这件事情努力一点一点做完的！