开源im聊天源码/Uniapp即时通讯源码社交聊天系统下载+视频搭建教程

　　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、开始发送消息并看到结果。