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

📅  最后修改于: 2021-09-01 02:38:22             🧑  作者: Mango

先决条件:
技术知识:

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

需要安装的软件:

  • XAMPP 服务器:这是一个免费软件,其中包含 Web 服务器 Apache、MySQL(或 MariaDB)的数据库管理系统。它可以从官方网站免费下载。
  • phpmyadmin:它是一个免费的开源软件,用于管理 MySQL 和 MariaDB。您可以从官方网站下载。下载的 zip 文件必须粘贴到以下位置。
  • 将文件解压缩到其他任何地方将无法正常工作。只需解压缩那里的内容就足够了。
  • 文本编辑器:任何像 Notepad++ 或普通 Notepad 这样的文本编辑器都足以实现这一点。
  • 浏览器:任何启用的 JavaScript 都足以运行代码。

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

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

css


php


php

    
        
                         
                

GROUP CHAT

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


   
 
     
 
       ,            


 
 
     
 
        ,             


    
                                                                                                
                                                                                         
                     
    
  


PHP





    
        
                         
                

GROUP CHAT

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


   
 
         
 
     ,            


 
 
        
 
    ,          


    
                                                                                       
                                                              
                     
    
  


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

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

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

PHP


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

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

PHP


    
        
                         
                

GROUP CHAT

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


   
 
     
 
       ,            


 
 
     
 
        ,             


    
                                                                                                
                                                                                         
                     
    
  

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

PHP






    
        
                         
                

GROUP CHAT

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


   
 
         
 
     ,            


 
 
        
 
    ,          


    
                                                                                       
                                                              
                     
    
  

运行代码的步骤:

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

输出:

空聊天室

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

添加到聊天室的消息

史蒂夫的另一条消息

Ria 输入她的第二条信息

添加到聊天室的消息