開源網站在線客服系統是指在互聯網上通過發送者和接收者之間實時傳輸文本信息的任何一種通信方式，這是一個使用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 —</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 —</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兩部分組成。系統的用戶是普通人，他們可以登錄到系統，相反，它們將被允許在彼此之間交換信息。