如何简单的创建一个多人在线聊天室

最新推荐文章于 2024-05-09 15:05:48 发布

落入红尘苦作香

最新推荐文章于 2024-05-09 15:05:48 发布

阅读量1.8k

点赞数 2

分类专栏：聊天室文章标签： jquery php

本文链接：https://blog.csdn.net/weixin_43502576/article/details/117467428

版权

聊天室专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习目标：

在本教程中，我们将要使用PHP和jQuery创建一个简单的在线聊天工具。这种实用性的模块对于你想要有实时在线客户支持系统的网站可以说是完美。
在这里插入图片描述
废话不多说直接开始。

步骤1：HTML的代码结构

创建一个index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
 
<div id="wrapper">
  <div id="menu">
        <p class="welcome">Welcome, <b></b></p>
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>
     
    <div id="chatbox"></div>
     
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
 
});
</script>
</body>
</html>

css样式

body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
  
form, p, span {
    margin:0;
    padding:0; }
  
input { font:12px arial; }
  
a {
    color:#0000FF;
    text-decoration:none; }
  
    a:hover { text-decoration:underline; }
  
#wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }
  
#loginform { padding-top:18px; }
  
    #loginform p { margin: 5px; }
  
#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }
  
#usermsg {
    width:395px;
    border:1px solid #ACD8F0; }
  
#submit { width: 60px; }
  
.error { color: #ff0000; }
  
#menu { padding:12.5px 25px 12.5px 25px; }
  
.welcome { float:left; }
  
.logout { float:right; }
  
.msgln { margin:0 0 2px 0; }

上面这些CSS没什么特别的，除了部分的id或者class，我们将要在之后再为它们添加与修改

步骤2：使用php创建登陆表单

<? //放入index.php <html>标签的上方 
//在信息存储到 PHP session 中之前，首先必须启动会话。session_start() 函数必须位于 <html> 标签之前：
session_start();
 
function loginForm(){ //这是一个简单给自己命名的html架子
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Please enter your name to continue:</p>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
        <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
    </div>
    ';
}
 
if(isset($_POST['enter'])){//isset() 函数用于检测变量是否已设置并且非 NULL。
    if($_POST['name'] != ""){
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }//stripslashes()删除反斜杠“/”。htmlspecialchars把预定义的字符 "<" （小于）和 ">" （大于）转换为 HTML 实体
    else{
        echo '<span class="error">Please type in a name</span>';
    }
}
?>

我们创建的这个loginForm()的function是由一个简单的登录表单组成的，它会询问用户的名字。接下来，使用一个if和else的声明来验证这个人输入的名字。如果一个用户输入了名字，我们将设置这个名字为$_SESSION[‘name’]。由于我们将使用基于cookie的session来存储名字，所以我们必须要在任何东西反馈到浏览器之前请求一个session_start()。

有一件事情你可能需要额外的注意一下，我们使用了htmlspecialchars() function，这个会转换特殊符号到HTML实体，以此来保护名字变量的字符不会成为跨站点脚本（XSS）的受害者。我们将在之后同时添加这个功能到将要发布在聊天记录里面的文字变量上。

步骤3：显示登陆表单

如果用户并没有登录，并且还没有产生session，为了要显示登录的表单，我们需要在原始代码中的#wrapper div和script标签周围使用另外一个if和else的声明。反之，如果用户已经登录而且已经有了一个session，这个声明将隐藏登录表单，并且显示聊天框。

<?php
if(!isset($_SESSION['name'])){//判断是否有session 如果为空调动loginForm()
    loginForm();
}
else{
?>
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>    
    <div id="chatbox"></div>
     
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
		.....
});
</script>
<?php
}
?>

步骤4：处理用户的输入

在用户提交了表单以后，我们希望抓取他们的输入数据并且将它们写入到聊天记录里面，要想完成这个，我们必须使用jQuery和PHP来同步客户端和服务器端的数据。

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){

		//用户点击发送内容
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});
});
</script>

在我们做任何事情之前，我们必须先抓取用户的输入数据，或者说是他们所输入到#submitmsg input里面的文字。这个可以使用val()功能来实现，它会抓取表单里面的所有数据。我们将抓取的数据放入到clientmsg变量里面。
接下来是最重要的一个部分：jQuery POST 请求。这一步会发送一个POST的请求到我们稍后会创建的post.php文件，它会POST客户端的输入数据，或者任何已经被存储到clientmsg变量的数据。
在最后，我们将设置value属性的值到空白来清除#usermsg input。

** 创建post.php**
现在，我们有了POST的数据，并且每一次当用户提交表单并发送一条新的消息的时候，数据们都被发送到了post.php文件里。我们现在的目标就是抓取这些数据，然后回过头来写入到我们的聊天记录框里。

<?
session_start();
if(isset($_SESSION['name'])){
   $text = $_POST['text'];
    
   $fp = fopen("log.html", 'a');
   fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialcars($text))."<br></div>");
   //"a" （写入方式打开，将文件指针指向文件末尾进行写入，如果文件不存在则尝试创建之）
   fclose($fp);//关闭打开的文件
}
?>

在我们做任何事情之前，我们必须先用session_start()功能来开始post.php文件，因为我们也会在这个文件里面使用用户名字的session。
在做任何事情之前，我们需要使用isset布尔值，来检查如果session中’name’是否已经存在了。
现在我们将要抓取那些使用jQuery被发送到该文件的POST的数据，并且我们将这些数据存储入$text变量。
这些所有的用户输入数据，都将被存储在log.html文件里。为了完成这一步，我们将使用fopen功能的’a’模式打开文件，根据php.net的规则打开文件且仅限写入；接下来放置文件指示到文件的最后。如果这个文件并不存在，那么尝试创建它。接下来，我们使用fwrite()功能来写入我们的消息到这个文件里。
我们即将写入的消息将会被封闭在.msgIn div里面，它会包含数据、使用date()功能所生成的时间、用户的session、以及内容等，同样的使用htmlspecialchars()功能来防止跨站点脚本XSS。
最后，我们使用fclose()来结束我们的文件操控。

步骤5：显示聊天记录（log.html）内容

所有用户已经发布的消息都被处理过了，并且我们也是用jQuery将它们发布了；它们是被PHP写入到聊天记录框里面的，所以唯一剩下来需要走的就是显示这些更新过的聊天记录给用户。

有些时候为了给自己省事，如果聊天文件里面已经有内容了的话，我们需要预先读取聊天记录到#chatbox div。

<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
//file_exists() 指定的文件是否存在filesize()文件大小
    $handle = fopen("log.html", "r");
    $contents = fread($handle, filesize("log.html"));
    fclose($handle);     
    echo $contents;
}
?></div>

这一次我们只是读取并且输出这些文件的内容到页面上。

jquery.ajax请求

ajax请求是我们做的所有事情的核心，这个请求不仅仅允许我们在不刷新页面的情况下通过表单发送和接受数据，而且还允许我们处理数据请求。

function loadLog(){
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
		  	},
		});
	}

我们将ajax的请求囊括在一个function里面，过一会你就知道为什么了。你可以看到，在上面，我们仅仅使用了3个jQuery ajax的请求对象。

url: 一个URL请求的字符串我们将使用我们的聊天记录文件名log.html。
cache: 这个会避免我们的文件被放入缓存。它会确保我们每一次发送请求的时候都会得到一个最新的聊天记录。
success: 这个允许我们附上一个功能来传递我们请求的数据。
你可以看到，我们接着移动我们请求的数据（html）到#chatbox div。

自动滚动
由于你可能在别的聊天工具里面看过，如果聊天记录的容器（#chatbox)的内容溢出了就会自动的向下滚动。我们将要实现一个简单的而又相似的效果，需要做的是在我们请求ajax的前后对比容器的滚动高度。如果你滚动的高度大于请求之后的高度，我们会使用jQuery的动画效果来滚动#chatbox div。

function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //请求之前滚动的高度
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //添加聊天记录	
				
				//Auto-scroll			
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //scrollTop垂直滚动条的位置
				}				
		  	},
		});
	}

先请求现在#chatbox标签的高度，在请求ajax后的#chatbox标签高度。两者比较大小如果ajax大则通过.animate({})改变

保持数据的不断更新

setInterval (loadLog, 2500);	
//Reload file every 2500 ms or x ms if you wish to change the second parameter

我们问题的回答你可以在setInterval function的那一行找到，这个功能每2.5秒就会运行一次LoadLog() function，并且loadLog function会请求更新过的数据以及自动滚动的div。

步骤6：退出聊天室

为了允许用户登出并结束session，我们将要使用jQuery来完成它。

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'index.php?logout=true';}		
	});
});
</script>

简单的展示了如果用户点击#exit链接的时候弹出的确认提示，如果用户确认了退出，也就是说他们决定结束session，那么我们将把他们送回到index.php?logout=true。这个简单的创建了一个叫logout并且值为true的变量。我们将要使用PHP来抓住这个变量。

if(isset($_GET['logout'])){ 
     
    //Simple exit message
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
    fclose($fp);
     //将显示退出聊天室的人名字显示出来
    session_destroy();//摧毁session
    header("Location: index.php"); //
}

到这里就完成了一个多人在线聊天室啦

落入红尘苦作香

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
如何简单的创建一个多人在线聊天室

学习目标：在本教程中，我们将要使用PHP和jQuery创建一个简单的在线聊天工具。这种实用性的模块对于你想要有实时在线客户支持系统的网站可以说是完美。废话不多说直接开始。步骤1：HTML的代码结构创建一个index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
复制链接

扫一扫