使用PHP 的在线群聊应用程序

先决条件：
技术知识：

• HTML
• CSS
• Javascript(基础)
• PHP (数据库连接)
• SQL 查询

需要安装的软件：

• XAMPP 服务器：这是一个免费软件，其中包含 Web 服务器 Apache、MySQL(或 MariaDB)的数据库管理系统。它可以从官方网站免费下载。
• phpmyadmin：它是一个免费的开源软件，用于管理 MySQL 和 MariaDB。您可以从官方网站下载。下载的 zip 文件必须粘贴到以下位置。

  C:\xampp\htdocs

• 将文件解压缩到其他任何地方将无法正常工作。只需解压缩那里的内容就足够了。
• 文本编辑器：任何像 Notepad++ 或普通 Notepad 这样的文本编辑器都足以实现这一点。
• 浏览器：任何启用的 JavaScript 都足以运行代码。

群聊应用程序：这是一个简单的群聊应用程序，用于演示您在WhatsApp messenger 中看到的带有 localhost 服务器的想法。多个用户可以来这里分享他们的观点。 MySQL 数据库存储聊天并有效地检索它。为了成功实现这个应用程序，我们必须构建用于设置 UI 样式的 CSS 和 JavaScript、用于呈现它的 HTML 部分、用于存储和从数据库检索的PHP代码。此应用程序将包含两个字段，即用户名和文本消息。最先发短信的用户的消息将与聊天室的右侧对齐，其他人的消息将在左侧对齐。让我们来看看实现。

CSS：将它放在样式标签下或外部样式表文件中并链接它。该 CSS 文件包含聊天室、文本消息和聊天气泡的样式。

css

数据库创建：在您的 PC 中打开 XAMPP 控制面板，单击 Apache 和 MySQL 的开始按钮。这一步对于创建数据库和运行应用程序也非常重要。打开浏览器(主要是 Internet Explorer)。在搜索栏上，键入下面给出的行。

localhost/phpmyadmin

它将打开一个选项卡，您可以在其中创建数据库。对于这个应用程序，创建了一个名为chat_app的数据库。创建一个名为chats的表，其中包含字段“uname”、“msg”、“dt” 。这里“uname”是varchar类型，表示用户名，“msg”也是varchar类型，表示发送的消息，“dt”表示日期时间(设置为varchar类型用于格式化)，用于存储时间的对象发送消息的位置。

用于存储在 MySQL 数据库中的PHP代码：要在用户每次按下“发送”按钮时插入聊天记录，请在初始 HTML 标记之前编写此代码。尝试连接 MySQL 服务器。假设您使用默认设置运行 MySQL 服务器(用户“root”，没有密码)。

用于在聊天室中获取和对齐消息的PHP和 HTML 代码：在这个聊天应用程序中，第一个用户的聊天被对齐到右侧。如果下一条消息也来自同一用户，则它也会对齐到聊天室的右侧。如果消息来自任何其他用户，则该消息将与左侧对齐。下面给出了实现此目的的PHP函数。由于要使用PHP函数执行的动作写在同一个文件中，所以在

标签中，动作被设置为同一个文件的名称。 (PHP)

PHP

    
        
            
            
                GROUP CHAT
            
            
        
  

function show_func(){
  
 var element = document.getElementById("chathist");
    element.scrollTop = element.scrollHeight;
   
 }
 
   


query($query); 
 $i=0;
   
 while($row = $run->fetch_array()) : 
 if($i==0){
 $i=5;
 $first=$row;
 ?>
 
  
  
  
  
 
  
   , 
 
 


 
 
  
 
  
 
   
   , 
        
 




 
  
 
  
 
   
    , 
        
  





    
        
         
             
              
                              
        
        
              
              
                           
              
              
                              
    

    

  

现在把 CSS、JavaScript、 PHP和 HTML 部分放在一起，下面给出了整个代码。它被保存为Group_chat。 PHP

PHP

*{
    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;
}
  



    
        
            
            
                GROUP CHAT
            
            
        
  

function show_func(){
  
 var element = document.getElementById("chathist");
    element.scrollTop = element.scrollHeight;
   
 }
 
   


query($query); 
 $i=0;
   
 while($row = $run->fetch_array()) : 
 if($i==0){
 $i=5;
 $first=$row;
 ?>
 
  
 
  
 
   
    , 
        
   



 
 
  
 
   
  
 
  
  , 
        
 




 
  
 
  
  
 
  
 , 
      
 





    
        
        
           
           
                           
        
        
            
           
                        
            
                           
    

    

  

运行代码的步骤：

• 将上面的文件保存为Group_chat。 PHP在C:\xampp\htdocs 中的一个新文件夹中。例如，我将文件放在htdocs文件夹内名为“myfiles”的文件夹中。
• 在运行应用程序之前，按照上面给出的步骤创建一个数据库。将数据库命名为chat_app 。将表命名为chats 。
• 检查 XAMPP 控制面板，确认 Apache 和 MySQL 是否处于运行状态。
• 打开浏览器并输入localhost/myfiles 。该目录的索引将打开。单击Group_chat。 PHP .
• 开始发送消息并查看结果

输出：

空聊天室

user-1 : 史蒂夫输入消息并点击发送

添加到聊天室的消息

史蒂夫的另一条消息

Ria 输入她的第二条信息

添加到聊天室的消息