网站在线客服系统（附H5在线客服系统源码开源版）

时间：2024-02-23 09:18:03

　　开源网站在线客服系统是指在互联网上通过发送者和接收者之间实时传输文本信息的任何一种通信方式，这是一个使用PHP/MySQLi和AJAX/jQuery在线客服系统源码创建的在线聊天系统。

        源码演示及下载：zxkfym.top

　　PHP在线客服系统是一个交互式工具，它可以快速缩小您的选择范围，并联系多个供应商、客户等。此外，它还可以给您的业务带来对用户体验的重大影响。在本文中，我们将使用PHP和jQuery创建一个简单的基于web的在线客服系统。

　　我们今天将要构建的在线客服系统将非常简单，它将包括登录和注销系统、ajax风格的特性以及对多个用户的支持。

　　步骤1:HTML标记

　　我们将从创建第一个名为index.php的文件开始本教程。

　　<! DOCTYPE html>
　　< html lang = "en" >
　　< 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 class = "welcome" >Welcome, < b ></ b ></ p >
　　< p class = "logout" >< 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" >
　　// jQuery Document
　　$(document).ready(function () {});
　　</ script >
　　</ body >
　　</ html >

　　我们从常见的DOCTYPE、HTML、head和body标签开始我们的HTML。在head标签中，我们添加标题并链接到CSS样式表(style.css)。

　　在body标签内部，我们在#包装我们将有三个主要的块:一个简单的菜单、我们的聊天框和我们的消息输入，每个都有各自的div和id。

　　的#菜单Div将由两个段落元素组成。第一个将是用户欢迎的，将在左边，第二个将是一个退出链接，将在右边。我们使用flexbox来进行布局，而不是使用浮动元素。

　　的# chatboxDiv将包含我们的聊天日志。我们将使用jQuery从外部文件加载我们的日志ajax请求。

　　我们的最后一项#包装Div将是我们的表单，它将包含用于用户消息的文本输入和一个提交按钮。

　　我们最后添加脚本以更快地加载页面。我们将首先链接到Cloudflare jQuery CDN，因为我们将在本教程中使用jQuery库。第二个脚本标记是我们将要处理的。我们将在文档就绪后加载所有代码。

　　步骤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.5 rem;
　　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.4 rem;
　　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或类将稍后添加。

　　TutsPlus Chat App Interface

　　正如您在上面看到的，我们已经完成了聊天用户界面的构建。

　　步骤3:使用PHP创建登录表单

　　现在，我们将实现一个简单的表单，该表单将在进一步继续之前询问用户的姓名。

　　<?php
　　session_start();
　　if (isset( $_POST [ \'enter\' ])){
　　if ( $_POST [ \'name\' ] != "" ){
　　$_SESSION [ \'name\' ] = stripslashes (htmlspecialchars( $_POST [ \'name\' ]));
　　}
　　else {
　　echo \'<span class="error">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 &mdash;</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()。

　　您可能需要密切注意的一件事是，我们使用了htmlspecialchars()函数，它将特殊字符转换为HTML实体，从而保护name变量免受跨站点脚本编写(XSS)的影响。稍后，我们还将把这个函数添加到将发布到聊天日志的文本变量中。

　　显示登入表格

　　为了在用户没有登录(因此没有创建会话)的情况下显示登录表单，我们在原始代码中的#wrapper div和script标记周围使用了另一个if和else语句。在相反的情况下，如果用户已经登录并创建了会话，这将隐藏登录表单并显示聊天框。

　　<?php
　　if (!isset( $_SESSION [ \'name\' ])){
　　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>
　　<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" >
　　// jQuery Document
　　$(document).ready( function (){
　　});
　　</script>
　　<?php
　　}
　　?>

　　欢迎和注销菜单

　　我们还没有完成为这个聊天应用程序创建登录系统。我们仍然需要允许用户注销并结束聊天会话。如果您还记得的话，我们最初的HTML标记包括一个简单的菜单。让我们返回并添加一些PHP代码，为菜单提供更多的功能。

　　首先，让我们将用户名添加到欢迎消息中。我们通过输出用户名的会话来做到这一点。

　　<p class = "welcome" >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 class=\'msgln\'><span class=\'left-info\'>User <b class=\'user-name-left\'>" . $_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
　　}

　　现在我们使用isset()函数来查看是否存在一个名为\'logout\'的get变量。如果变量是通过URL传递的，比如上面提到的链接，那么我们将继续结束用户名的会话。

　　在使用session_destroy()函数销毁用户名会话之前，我们希望在聊天日志中写入一条简单的退出消息。它会说用户已经离开了聊天会话。我们通过使用file_put_contents()函数来操作我们的log.html文件来做到这一点，我们将在后面看到，这个文件将被创建为我们的聊天日志。file_put_contents()函数是将数据写入文本文件的一种方便方法，而不是每次都使用fopen()、fwrite()和fclose()。只要确保传递适当的标志(如FILE_APPEND)，将数据追加到文件的末尾即可。否则，新的$logout_message将覆盖文件以前的内容。请注意，我们已经向div添加了一个msgln类。我们已经为这个div定义了CSS样式。

　　在此之后，我们销毁会话并将用户重定向到登录表单将出现的页面。

　　步骤4:处理用户输入

　　用户提交表单后，我们希望获取他们的输入并将其写入聊天日志。为了做到这一点，我们必须使用jQuery和PHP在客户端和服务器端同步工作。

　　jQuery

　　我们使用jQuery处理数据的几乎所有操作都将围绕jQuery post请求进行。

　　//If user submits the form
　　$( "#submitmsg" ).click( function () {
　　var clientmsg = $( "#usermsg" ).val();
　　$.post( "post.php" , { text: clientmsg });
　　$( "#usermsg" ).val( "" );
　　return false ;
　　});

　　在我们做任何事情之前，我们必须获取用户的输入，或者用户已经输入到# submitmsg输入。这可以通过瓦尔()函数，它获取表单字段中的值集。我们现在将这个值存储在clientmsg变量。

　　下面是我们最重要的部分:jQuery post请求。将一个POST请求发送到post.php我们马上要创建的文件。它提交客户机的输入，或者保存到clientmsg变量。

　　最后，我们清理# usermsg通过将value属性设置为空进行输入。

　　请注意，上面的代码将放入我们的script标记中，我们在这里放置了jQuery注销代码。

　　PHP: post.php文件

　　目前，每次用户提交表单并发送新消息时，我们都会将POST数据发送到POST .php文件。我们现在的目标是获取这些数据并将其写入聊天日志。

　　<?
　　session_start();
　　if (isset( $_SESSION [ \'name\' ])){
　　$text = $_POST [ \'text\' ];
　　$text_message = "<div class=\'msgln\'><span class=\'chat-time\'>" . date ( "g:i A" ). "</span> <b class=\'user-name\'>" . $_SESSION [ \'name\' ]. "</b> " . stripslashes (htmlspecialchars( $text )). "<br></div>" ;
　　file_put_contents ( "log.html" , $text_message , FILE_APPEND | LOCK_EX);
　　}
　　?>

　　在执行任何操作之前，必须使用session_start()函数启动post.php文件，因为我们将在该文件中使用用户名的会话。

　　使用isset布尔值，我们在执行其他操作之前检查会话是否存在\'name\'。我们现在获取由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中。

　　Auto-Scrolling

　　正如您在其他聊天应用程序中看到的，如果聊天日志容器(#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变量中。请求成功返回后，我们将#chatbox div的滚动高度存储到newscrollHeight变量中。

　　然后，我们使用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函数。这个函数将每2.5秒运行一次loadLog()函数，loadLog函数将请求更新后的文件并自动滚动div。

　　Tutsplus Chat App Network

　　完整的代码

　　如果正确的代码没有按正确的顺序放置在正确的文件中，聊天应用程序可能无法正常工作。为了避免混淆，我将把整个代码放在两个单独的文件index.php和post.php中。

　　以下是index.php的代码:

<?php
　　session_start();
　　if (isset( $_GET [ \'logout\' ])){
　　//Simple exit message
　　$logout_message = "<div class=\'msgln\'><span class=\'left-info\'>User <b class=\'user-name-left\'>" . $_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 class="error">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 &mdash;</label>
　　<input type= "text" name= "name" id= "name" />
　　<input type= "submit" name= "enter" id= "enter" value= "Enter" />
　　</form>
　　</div>\';
　　}
　　?>
　　<!DOCTYPE html>
　　<html lang= "en" >
　　<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 class = "welcome" >Welcome, <b><?php echo $_SESSION [ \'name\' ]; ?></b></p>
　　<p class = "logout" ><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" >
　　// 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 class=\'msgln\'><span class=\'chat-time\'>" . date ( "g:i A" ). "</span> <b class=\'user-name\'>" . $_SESSION [ \'name\' ]. "</b> " . stripslashes (htmlspecialchars( $text )). "<br></div>" ;
　　file_put_contents ( "log.html" , $text_message , FILE_APPEND | LOCK_EX);
　　}
　　?>

　　css中的代码已经在教程的第2步中可用了。

　　如果您的代码似乎不能工作，请确保它与这里提供的代码匹配。请注意，所有这三个文件(index.php、post.php和style.css)都位于同一个目录中。

　　在线客服系统源码是基于web的应用程序，是建立在PHP MySQL Ajax。对于系统的后端，使用SQL服务器，以便以后检索它。它就像一个用户可以与其他用户聊天的信使。此外，多个用户也可以在一组聊天。系统也会自动更新聊天记录。

　　该网站客服系统系统供有共同兴趣交换消息的用户使用。这对那些与更多的人分享信息的用户也有帮助。系统由Admin和users两部分组成。系统的用户是普通人，他们可以登录到系统，相反，它们将被允许在彼此之间交换信息。

相关文章