IM即時通訊聊天系統源碼，用來在WhatsApp消息中看到的與本地主機服務器多人及時溝通。多個用戶可以來這里分享他們的觀點，MySQL數據庫存儲了搜索和檢索它的有效性。為了實現這一成功的應用，我們需要構建CSS和JavaScript來塑造UI, HTML部分來渲射它，PHP代碼用於存儲和檢索數據庫。
完整源碼：im.jstxym.top
源碼搭建的技術環境：
HTML、CSS、Javascript (basics)
PHP(數據庫連接)
SQL queries
源碼系統配置：
XAMPP服務器：這是一個自由軟件，可以訪問Apache web服務器，MySQL(或MariaDB)數據庫管理系統，它可以從官方網站下載。
phpmyadmin：這是管理MySQL和MariaDB的自由開源軟件。你可以從官方網站下載。拉鏈文件下載必須在接下來的位置進行。
C:\xampp\htdocs</strong
把文件放在任何地方都行不通。只要把內容拉出來就行了。
文本編輯：任何像Notepad++或普通Notepad這樣的文本編輯都足以實現這一點。
任何JavaScript enabled都將足以運行代碼。
CSS：把這個放在風格標簽下，或者放在外部風格文件和鏈接中。這個CSS文件壓縮了聊天室的風格、文本樣式和聊天室UI界面。
<style>
*{
box-sizing:border-box;
}
body{
background-color:#abd9e9;
font-family:Arial;
}
#container{
width:500px;
height:700px;
background:white;
margin:0 auto;
font-size:0;
border-radius:5px;
overflow:hidden;
}
main{
width:500px;
height:700px;
display:inline-block;
font-size:15px;
vertical-align:top;
}
main header{
height:100px;
padding:30px 20px 30px 40px;
background-color:#622569;
}
main header > *{
display:inline-block;
vertical-align:top;
}
main header img:first-child{
width:24px;
margin-top:8px;
}
main header img:last-child{
width:24px;
margin-top:8px;
}
main header div{
margin-left:90px;
margin-right:90px;
}
main header h2{
font-size:25px;
margin-top:5px;
text-align:center;
color:#FFFFFF;
}
main .inner_div{
padding-left:0;
margin:0;
list-style-type:none;
position:relative;
overflow:auto;
height:500px;
background-image:url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200911064223/bg.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position: relative;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
main .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent
transparent #58b666 transparent;
margin-left:20px;
clear:both;
}
main .message{
padding:10px;
color:#000;
margin-left:15px;
background-color:#58b666;
line-height:20px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
clear:both;
}
main .triangle1{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent
transparent #6fbced transparent;
margin-right:20px;
float:right;
clear:both;
}
main .message1{
padding:10px;
color:#000;
margin-right:15px;
background-color:#6fbced;
line-height:20px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
float:right;
clear:both;
}
main .triangle2{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent
transparent #58b666 transparent;
margin-left:20px;
clear:both
}
main .message2{
padding:10px;
color:#000;
margin-left:15px;
background-color:#58b666;
line-height:20px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
clear:both
}
main footer{
height:150px;
padding:20px 30px 10px 20px;
background-color:#622569;
}
main footer .input1{
resize:none;
border:100%;
display:block;
width:120%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
}
main footer textarea{
resize:none;
border:100%;
display:block;
width:140%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
margin-left:20px;
}
main footer .input2{
resize:none;
border:100%;
display:block;
width:40%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
margin-left:100px;
color:white;
text-align:center;
background-color:black;
border: 2px solid white;
}
}
main footer textarea::placeholder{
color:#ddd;
}
</style>
數據庫創建：打開XAMPP control面板在您的個人電腦，點擊開始按鈕為兩個Apache和MySQL。這一步對於創建數據庫和運行應用程序非常重要。打開瀏覽器。在搜索條上，下面是一行given。
localhost/phpmyadmin
它將打開一個選項卡，你可以創建一個數據庫。對於這個應用程序，一個名為chat_app的數據庫是創建的。一張被稱為“uname”、“msg”和“dt”的桌子是虛構的。這里的“uname”是varchar類型和用戶名，msg也是varchar類型和發送消息的msg，
PHP代碼存儲在MySQL數據庫中:每次輸入用戶對發送按鈕的壓力，在開始HTML標簽之前編寫此代碼。Attempt MySQL服務器連接。假設您正在運行帶有默認設置的MySQL服務器。
<?php
if (isset($_POST['submit'])){
$link = mysqli_connect("localhost",
"root", "", "chat_app");
// Check connection
if($link === false){
die("ERROR: Could not connect. "
. mysqli_connect_error());
}
// Escape user inputs for security
$un= mysqli_real_escape_string(
$link, $_REQUEST['uname']);
$m = mysqli_real_escape_string(
$link, $_REQUEST['msg']);
date_default_timezone_set('Asia/Kolkata');
$ts=date('y-m-d h:ia');
// Attempt insert query execution
$sql = "INSERT INTO chats (uname, msg, dt)
VALUES ('$un', '$m', '$ts')";
if(mysqli_query($link, $sql)){
;
} else{
echo "ERROR: Message not sent!!!";
}
// Close connection
mysqli_close($link);
}
?>
PHP和HTML在聊天室獲取和接收信息的代碼:在這個聊天室應用程序中，第一個用戶的聊天室被直接連接到右邊。如果下一個消息來自同一個用戶，它也會直接傳到聊天室的右邊。如果消息來自其他用戶，那么消息將被發送到左邊。實現這一點的PHP功能在下面。自使用PHP功能被刪除以來，在 <表單> 標簽中，動作被設置在相同文件的名稱中。
<body onload="show_func()">
<div id="container">
<main>
<header>
<img src="https://s3-us-west-2.amazonaws.com/
s.cdpn.io/1940306/ico_star.png" alt="">
<div>
<h2>GROUP CHAT</h2>
</div>
<img src="https://s3-us-west-2.amazonaws.com/
s.cdpn.io/1940306/ico_star.png" alt="">
</header>
<script>
function show_func(){
var element = document.getElementById("chathist");
element.scrollTop = element.scrollHeight;
}
</script>
<form id="myform" action="Group_chat.php" method="POST" >
<div class="inner_div" id="chathist">
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db_name = "chat_app";
$con = new mysqli($host, $user, $pass, $db_name);
$query = "SELECT * FROM chats";
$run = $con->query($query);
$i=0;
while($row = $run->fetch_array()) :
if($i==0){
$i=5;
$first=$row;
?>
<div id="triangle1" class="triangle1"></div>
<div id="message1" class="message1">
<span style="color:white;float:right;">
<?php echo $row['msg']; ?>
</span> <br/>
<div>
<span style="color:black;float:left;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>, <?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
else
{
if($row['uname']!=$first['uname'])
{
?>
<div id="triangle" class="triangle"></div>
<div id="message" class="message">
<span style="color:white;float:left;">
<?php echo $row['msg']; ?></span> <br/>
<div>
<span style="color:black;float:right;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>,
<?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
else
{
?>
<div id="triangle1" class="triangle1"></div>
<div id="message1" class="message1">
<span style="color:white;float:right;">
<?php echo $row['msg']; ?></span> <br/>
<div>
<span style="color:black;float:left;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>,
<?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
}
endwhile; ?>
</div>
<footer>
<table>
<tr>
<th>
<input class="input1" type="text" id="uname"
name="uname" placeholder="From"></input>
</th>
<th>
<textarea id="msg" name="msg" rows='3'
cols='50' placeholder="Type your message">
</textarea>
</th>
<th>
<input class="input2" type="submit" id="submit"
name="submit" value="send"></input>
</th>
</tr>
</table>
</footer>
</form>
</main>
</div>
</body>
現在CSS, JavaScript, PHP和HTML部分放在一起，整個代碼在下面。它像分組聊天一樣保存着。
<?php
if (isset($_POST['submit'])){
/* Attempt MySQL server connection. Assuming
you are running MySQL server with default
setting (user 'root' with no password) */
$link = mysqli_connect("localhost",
"root", "", "chat_app");
// Check connection
if($link === false){
die("ERROR: Could not connect. "
. mysqli_connect_error());
}
// Escape user inputs for security
$un= mysqli_real_escape_string(
$link, $_REQUEST['uname']);
$m = mysqli_real_escape_string(
$link, $_REQUEST['msg']);
date_default_timezone_set('Asia/Kolkata');
$ts=date('y-m-d h:ia');
// Attempt insert query execution
$sql = "INSERT INTO chats (uname, msg, dt)
VALUES ('$un', '$m', '$ts')";
if(mysqli_query($link, $sql)){
;
} else{
echo "ERROR: Message not sent!!!";
}
// Close connection
mysqli_close($link);
}
?>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
body{
background-color:#abd9e9;
font-family:Arial;
}
#container{
width:500px;
height:700px;
background:white;
margin:0 auto;
font-size:0;
border-radius:5px;
overflow:hidden;
}
main{
width:500px;
height:700px;
display:inline-block;
font-size:15px;
vertical-align:top;
}
main header{
height:100px;
padding:30px 20px 30px 40px;
background-color:#622569;
}
main header > *{
display:inline-block;
vertical-align:top;
}
main header img:first-child{
width:24px;
margin-top:8px;
}
main header img:last-child{
width:24px;
margin-top:8px;
}
main header div{
margin-left:90px;
margin-right:90px;
}
main header h2{
font-size:25px;
margin-top:5px;
text-align:center;
color:#FFFFFF;
}
main .inner_div{
padding-left:0;
margin:0;
list-style-type:none;
position:relative;
overflow:auto;
height:500px;
background-image:url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200911064223/bg.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position: relative;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
main .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent
#58b666 transparent;
margin-left:20px;
clear:both;
}
main .message{
padding:10px;
color:#000;
margin-left:15px;
background-color:#58b666;
line-height:20px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
clear:both;
}
main .triangle1{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent
transparent #6fbced transparent;
margin-right:20px;
float:right;
clear:both;
}
main .message1{
padding:10px;
color:#000;
margin-right:15px;
background-color:#6fbced;
line-height:20px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
float:right;
clear:both;
}
main footer{
height:150px;
padding:20px 30px 10px 20px;
background-color:#622569;
}
main footer .input1{
resize:none;
border:100%;
display:block;
width:120%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
}
main footer textarea{
resize:none;
border:100%;
display:block;
width:140%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
margin-left:20px;
}
main footer .input2{
resize:none;
border:100%;
display:block;
width:40%;
height:55px;
border-radius:3px;
padding:20px;
font-size:13px;
margin-bottom:13px;
margin-left:100px;
color:white;
text-align:center;
background-color:black;
border: 2px solid white;
}
}
main footer textarea::placeholder{
color:#ddd;
}
</style>
<body onload="show_func()">
<div id="container">
<main>
<header>
<img src="https://s3-us-west-2.amazonaws.com/
s.cdpn.io/1940306/ico_star.png" alt="">
<div>
<h2>GROUP CHAT</h2>
</div>
<img src="https://s3-us-west-2.amazonaws.com/
s.cdpn.io/1940306/ico_star.png" alt="">
</header>
<script>
function show_func(){
var element = document.getElementById("chathist");
element.scrollTop = element.scrollHeight;
}
</script>
<form id="myform" action="Group_chat.php" method="POST" >
<div class="inner_div" id="chathist">
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db_name = "chat_app";
$con = new mysqli($host, $user, $pass, $db_name);
$query = "SELECT * FROM chats";
$run = $con->query($query);
$i=0;
while($row = $run->fetch_array()) :
if($i==0){
$i=5;
$first=$row;
?>
<div id="triangle1" class="triangle1"></div>
<div id="message1" class="message1">
<span style="color:white;float:right;">
<?php echo $row['msg']; ?></span> <br/>
<div>
<span style="color:black;float:left;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>,
<?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
else
{
if($row['uname']!=$first['uname'])
{
?>
<div id="triangle" class="triangle"></div>
<div id="message" class="message">
<span style="color:white;float:left;">
<?php echo $row['msg']; ?>
</span> <br/>
<div>
<span style="color:black;float:right;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>,
<?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
else
{
?>
<div id="triangle1" class="triangle1"></div>
<div id="message1" class="message1">
<span style="color:white;float:right;">
<?php echo $row['msg']; ?>
</span> <br/>
<div>
<span style="color:black;float:left;
font-size:10px;clear:both;">
<?php echo $row['uname']; ?>,
<?php echo $row['dt']; ?>
</span>
</div>
</div>
<br/><br/>
<?php
}
}
endwhile;
?>
</div>
<footer>
<table>
<tr>
<th>
<input class="input1" type="text"
id="uname" name="uname"
placeholder="From">
</th>
<th>
<textarea id="msg" name="msg"
rows='3' cols='50'
placeholder="Type your message">
</textarea></th>
<th>
<input class="input2" type="submit"
id="submit" name="submit" value="send">
</th>
</tr>
</table>
</footer>
</form>
</main>
</div>
</body>
</html>
運行源碼的步驟:
1、將文件作為分組聊天保存，舉個例子，我把文件放在了htdocs folder中稱為“myfile”的文件中。
2、在運行應用程序之前，通過跟隨頂部的步驟創建數據庫，將數據庫名稱為chat_app。
3、檢查XAMPP控制小組以確定Apache和MySQL在運行狀態。
4、打開瀏覽器和本地主機類型/myfiles，那個目錄的索引將會打開，點擊組聊天。
5、開始發送消息並看到結果。
