在本教程中，我们将使用php和 jquery 创建一个简单的基于 Web 的聊天应用程序。这种实用程序非常适合您网站的实时支持系统。
本教程最近更新以改进聊天应用程序。
介绍
我们今天要构建的聊天应用程序将非常简单。它将包括登录和注销系统、ajax 风格的功能以及对多用户的支持。
第 1 步：html 标记
我们将从创建我们的第一个文件index.php开始本教程。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tuts+ Chat Application</title> <meta name="description" content="Tuts+ Chat Application" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="wrapper"> <div id="menu"> <p>Welcome, <b></b></p> <p><a id="exit" href="#">Exit Chat</a></p> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/JavaScript"> // jQuery Document $(document).ready(function () {}); </script> </body> </html>
我们以通常的 DOCTYPE、html、head 和 body 标签开始我们的 HTML。在 head 标签中，我们添加标题和链接到我们的 CSS 样式表 (style.css)。
在 body 标签内，我们在
#wrapperdiv 内构建布局。我们将拥有三个主要块：一个简单的菜单、我们的聊天框和我们的消息输入，每个都有其各自的 div 和 id。
第 2 步：CSS 样式
我们现在将添加一些 CSS 以使我们的聊天应用程序看起来比默认浏览器样式更好。下面的代码将被添加到我们的style.css 文件中。
* { margin: 0; padding: 0; } body { margin: 20px auto; font-family: "Lato"; font-weight: 300; } form { padding: 15px 25px; display: flex; gap: 10px; justify-content: center; } form label { font-size: 1.5rem; font-weight: bold; } input { font-family: "Lato"; } a { color: #0000ff; text-decoration: none; } a:hover { text-decoration: underline; } #wrapper, #loginform { margin: 0 auto; padding-bottom: 25px; background: #eee; width: 600px; max-width: 100%; border: 2px solid #212121; border-radius: 4px; } #loginform { padding-top: 18px; text-align: center; } #loginform p { padding: 15px 25px; font-size: 1.4rem; font-weight: bold; } #chatbox { text-align: left; margin: 0 auto; margin-bottom: 25px; padding: 10px; background: #fff; height: 300px; width: 530px; border: 1px solid #a7a7a7; overflow: auto; border-radius: 4px; border-bottom: 4px solid #a7a7a7; } #usermsg { flex: 1; border-radius: 4px; border: 1px solid #ff9800; } #name { border-radius: 4px; border: 1px solid #ff9800; padding: 2px 8px; } #submitmsg, #enter{ background: #ff9800; border: 2px solid #e65100; color: white; padding: 4px 10px; font-weight: bold; border-radius: 4px; } .error { color: #ff0000; } #menu { padding: 15px 25px; display: flex; } #menu p.welcome { flex: 1; } a#exit { color: white; background: #c62828; padding: 4px 8px; border-radius: 4px; font-weight: bold; } .msgln { margin: 0 0 5px 0; } .msgln span.left-info { color: orangered; } .msgln span.chat-time { color: #666; font-size: 60%; vertical-align: super; } .msgln b.user-name, .msgln b.user-name-left { font-weight: bold; background: #546e7a; color: white; padding: 2px 4px; font-size: 90%; border-radius: 4px; margin: 0 5px 0 0; } .msgln b.user-name-left { background: orangered; }上面的 CSS 没有什么特别之处，只是我们设置了样式的一些 id 或类将稍后添加。
正如您在上面看到的，我们已经完成了聊天用户界面的构建。
第 3 步：使用 PHP 创建登录表单
现在我们将实现一个简单的表单，在继续之前询问用户他们的姓名。
<?php session_start(); if(isset($_post['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo '<span>Please type in a name</span>'; } } function loginForm(){ echo' <div id="loginform"> <p>Please enter your name to continue!</p> <form action="index.php" method="post"> <label for="name">Name —</label> <input type="text" name="name" id="name" /> <input type="submit" name="enter" id="enter" value="Enter" /> </form> </div> '; } ?>
我们创建的 loginForm()函数由一个简单的登录表单组成，该表单询问用户他们的姓名。然后，我们使用 if 和 else 语句来验证该人是否输入了姓名。如果此人输入了姓名，我们将该姓名设置为$_SESSION['name']。由于我们使用基于 cookie 的会话来存储名称，因此我们必须 在将session_start() 任何内容输出到浏览器之前调用。
您可能需要密切注意的一件事是我们使用了该函数，该函数将特殊字符转换为 HTML 实体，从而保护 name 变量免受跨站脚本 (XSS) 的htmlspecialchars()侵害。稍后，我们还将将此函数添加到将发布到聊天日志的文本变量中。
显示登录表单
为了在用户没有登录并因此没有创建会话的情况下显示登录表单，我们 #wrapper在原始代码中的 div 和 script 标签周围使用了另一个 if 和 else 语句。在相反的情况下，如果用户登录并创建了会话，这将隐藏登录表单并显示聊天框。
<?php if(!isset($_SESSION['name'])){ loginForm(); } else{ ?> <div id="wrapper"> <div id="menu"> <p>Welcome, <b><?php echo $_SESSION['name']; ?></b></p> <p><a id="exit" href="#">Exit Chat</a></p> </div> <div id="chatbox"> <?php if(file_exists("log.html") && filesize("log.html") > 0){ $contents = file_get_contents("log.html"); echo $contents; } ?> </div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> <?php } ?>
欢迎和退出菜单
我们还没有完成为这个聊天应用程序创建登录系统。我们仍然需要允许用户注销并结束聊天会话。如果您还记得，我们最初的 HTML 标记包括一个简单的菜单。让我们回过头来添加一些 PHP 代码，这些代码将为菜单提供更多功能。
首先，让我们将用户名添加到欢迎消息中。我们通过输出用户名的会话来做到这一点。
<p class="welcome">欢迎，<b><?php echo $_SESSION['name']; ?></b></p>
为了让用户退出并结束会话，我们将跳到前面，简单地使用 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 上面的 jQuery 代码只是在用户单击链接时显示确认警报。如果用户确认退出，因此决定结束会话，那么我们将他们发送到 index.php?logout=true. 这只是创建了一个名为 的logout变量true。我们需要用 PHP 捕获这个变量：
if(isset($_GET['logout'])){ //Simple exit message $logout_message = "<div><span>User <b>". $_SESSION['name'] ."</b> has left the chat session.</span><br></div>"; file_put_contents("log.html", $logout_message, FILE_APPEND | LOCK_EX); session_destroy(); header("Location: index.php"); //Redirect the user }我们现在使用该函数查看是否get存在“注销”变量 。isset()如果变量已经通过 URL 传递，例如上面提到的链接，我们继续结束用户名的会话。
在使用该函数销毁用户的名称会话之前 session_destroy() ，我们想在聊天日志中写入一条简单的退出消息。它会说用户已经离开了聊天会话。我们通过使用该 file_put_contents() 函数来操作我们的 log.html文件来做到这一点，正如我们稍后将看到的，该文件将被创建为我们的聊天日志。该 file_put_contents() 函数是一种将数据写入文本文件的便捷方式，而不是 每次都使用fopen()、 fwrite()和。fclose()只需确保传递适当的标志，例如 FILE_APPEND在文件末尾附加数据。否则，新的$logout_message 将覆盖文件的先前内容。请注意，我们 msgln 在 div 中添加了一个类。我们已经为这个 div 定义了 CSS 样式。
完成此操作后，我们销毁会话并将用户重定向到将出现登录表单的同一页面。
第 4 步：处理用户输入
用户提交表单后，我们希望获取他们的输入并将其写入我们的聊天日志。为了做到这一点，我们必须使用 jQuery 和 PHP 在客户端和服务器端同步工作。
jQuery
几乎我们将使用 jQuery 来处理我们的数据的所有事情都将围绕 jQuery 发布请求。
//If user submits the form $("#submitmsg").click(function () { var clientmsg = $("#usermsg").val(); $.post("post.php", { text: clientmsg }); $("#usermsg").val(""); return false; });在我们做任何事情之前，我们必须获取用户的输入，或者用户在输入中
#submitmsg输入的内容。这可以通过val()获取表单字段中设置的值的函数来实现。我们现在将此值存储在clientmsg变量中。这是我们最重要的部分：jQuery post 请求。这会向我们稍后将创建的post.php文件发送一个 POST 请求。它发布客户的输入，或已保存到
clientmsg变量中的内容。最后，我们通过将 value 属性设置为空白来清除
#usermsg输入。
请注意，上面的代码将进入我们的脚本标签，我们放置了 jQuery 注销代码。
PHP：post.php 文件
目前，每次用户提交表单并发送新消息时，我们都会将 POST 数据发送到post.php文件。我们现在的目标是获取这些数据并将其写入我们的聊天日志。.
<? session_start(); if(isset($_SESSION['name'])){ $text = $_POST['text']; $text_message = "<div><span>".date("g:i A")."</span> <b>".$_SESSION['name']."</b> ".stripslashes(htmlspecialchars($text))."<br></div>"; file_put_contents("log.html", $text_message, FILE_APPEND | LOCK_EX); } ?>在我们做任何事情之前，我们必须使用该函数启动 post.php 文件， session_start() 因为我们将在此文件中使用用户名的会话。
使用 isset 布尔值，我们在执行任何其他操作之前检查“名称”的会话是否存在。我们现在获取 jQuery 发送到该文件的 POST 数据。我们将这些数据存储到 $text变量中。与所有整体用户输入数据一样，此数据将存储在log.html 文件中。我们只需使用该 file_put_contents()函数将所有数据写入文件。
我们将要编写的消息将包含在 .msgln div 中。它将包含函数生成的日期和时间 、date() 用户名的会话以及文本，这些文本也被 htmlspecialchars()函数包围以防止XSS。
第 5 步：显示聊天记录内容
用户发布的所有内容都使用 jQuery 处理和发布；它使用 PHP 写入聊天日志。剩下要做的就是使用 log.php向用户显示更新的聊天日志。
为了节省一些时间， #chatbox 如果聊天记录有任何内容，我们会将其预加载到 div 中。
<div id="chatbox"><?php if(file_exists("log.html") && filesize("log.html") > 0){ $contents = file_get_contents("log.html"); echo $contents; } ?></div>我们使用与post.php 文件类似的例程，只是这次我们只读取和输出文件的内容。
jQuery.ajax请求_
AJAX 请求是我们所做的一切的核心。这个请求不仅可以让我们在不刷新页面的情况下通过表单发送和接收数据，还可以让我们处理请求的数据。
//Load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div }, }); }我们将 AJAX 请求包装在一个函数中。你马上就会明白为什么。正如您在上面看到的，我们将只使用三个 jQuery AJAX 请求对象。
url: 要请求的 URL 字符串。我们将使用我们的聊天日志的文件名 log.html。cache：这将防止我们的文件被缓存。它将确保我们每次发送请求时都能获得更新的聊天日志。success： 这将允许我们附加一个函数来传递我们请求的数据。
如您所见，然后我们将请求的 HTML 数据移动到 #chatbox div 中。
自动滚动
正如您可能在其他聊天应用程序中看到的那样，如果聊天日志容器 ( #chatbox) 溢出，内容会自动向下滚动。我们将实现一个简单且类似的功能，它将在我们执行 AJAX 请求之前和之后比较容器的滚动高度。如果请求后滚动高度较大，我们将使用jQuery的动画效果来滚动#chatbox div。
//Load the file containing the chat log function loadLog(){ var oldscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height after the request if(newscrollHeight > oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div } }, }); }在发出请求之前，我们首先将 #chatbox div 的滚动高度存储到 oldscrollHeight 变量 中。在我们的请求成功返回后，我们将 div 的滚动高度存储到 变量中。#chatboxnewscrollHeight
然后，我们使用 if 语句比较两个滚动高度变量。如果 newscrollHeight 大于 oldscrollHeight，我们使用动画效果来滚动 #chatbox div。
持续更新聊天记录
现在可能会出现一个问题：我们将如何不断更新在用户之间来回发送的新数据？或者换个说法，我们将如何不断地发送更新数据的请求？
setInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you wish to change the second parameter
我们问题的答案在于 setInterval 函数。该函数将 loadLog() 每 2.5 秒运行一次我们的函数，该 loadLog 函数将请求更新的文件并自动滚动 div。
完整代码
如果正确的代码未按正确的顺序放置在正确的文件中，则聊天应用程序可能无法正常运行。为了避免混淆，我将整个代码发布到两个单独的文件中，分别称为index.php 和 post.php。
这是 index.php的代码：
<?php session_start(); if(isset($_GET['logout'])){ //Simple exit message $logout_message = "<div><span>User <b>". $_SESSION['name'] ."</b> has left the chat session.</span><br></div>"; file_put_contents("log.html", $logout_message, FILE_APPEND | LOCK_EX); session_destroy(); header("Location: index.php"); //Redirect the user } if(isset($_POST['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo '<span>Please type in a name</span>'; } } function loginForm(){ echo '<div id="loginform"> <p>Please enter your name to continue!</p> <form action="index.php" method="post"> <label for="name">Name —</label> <input type="text" name="name" id="name" /> <input type="submit" name="enter" id="enter" value="Enter" /> </form> </div>'; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tuts+ Chat Application</title> <meta name="description" content="Tuts+ Chat Application" /> <link rel="stylesheet" href="style.css" /> </head> <body> <?php if(!isset($_SESSION['name'])){ loginForm(); } else { ?> <div id="wrapper"> <div id="menu"> <p>Welcome, <b><?php echo $_SESSION['name']; ?></b></p> <p><a id="exit" href="#">Exit Chat</a></p> </div> <div id="chatbox"> <?php if(file_exists("log.html") && filesize("log.html") > 0){ $contents = file_get_contents("log.html"); echo $contents; } ?> </div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function () { $("#submitmsg").click(function () { var clientmsg = $("#usermsg").val(); $.post("post.php", { text: clientmsg }); $("#usermsg").val(""); return false; }); function loadLog() { var oldscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function (html) { $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height after the request if(newscrollHeight > oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div } } }); } setInterval (loadLog, 2500); $("#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> </body> </html> <?php } ?>这是 post.php的代码：
<?php session_start(); if(isset($_SESSION['name'])){ $text = $_POST['text']; $text_message = "<div><span>".date("g:i A")."</span> <b>".$_SESSION['name']."</b> ".stripslashes(htmlspecialchars($text))."<br></div>"; file_put_contents("log.html", $text_message, FILE_APPEND | LOCK_EX); } ?>进入 style.css的代码已在本教程的第 2 步中可用。
如果您的代码似乎不起作用，请确保它与此处提供的代码匹配。请注意，所有三个文件—— index.php、 post.php和style.css ——都位于同一目录中。
- 显示登录表单
- 欢迎和退出菜单
- jQuery
- PHP：post.php 文件
- jQuery.ajax请求_
- 自动滚动
- 持续更新聊天记录
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
