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、开始发送消息并看到结果。
本文转载自: https://blog.csdn.net/imskory/article/details/140815373
版权归原作者 imskory 所有， 如有侵权，请联系我们删除。
版权归原作者 imskory 所有， 如有侵权，请联系我们删除。