基于PHP、Mysql、ajax、设计的类PC版微信模式聊天系统

系统介绍基于PHP、Mysql、ajax、设计的类PC版微信模式聊天系统。用户完成注册和登录即可进入聊天主页面。如图2-1所示。主页包括菜单侧边栏、对话栏、聊天框。整体采用ajax进行局部刷新。点击对话栏在聊天框中展示对应好友互相发送的聊天记录。还可进行聊天记录查看与以时间或关键字进行查询。对话栏中包括所有已注册好友以及群组，群组中展示所有用户在该群众的发言。并且登陆者可发布以自己为作者的群公告。

我就说好玩

1411人浏览 · 2024-10-13 15:43:25

我就说好玩 · 2024-10-13 15:43:25 发布

资源地址：https://download.csdn.net/download/2302_79553009/89881404

系统介绍

基于PHP、Mysql、ajax、设计的类PC版微信模式聊天系统。用户完成注册和登录即可进入聊天主页面。如图2-1所示。主页包括菜单侧边栏、对话栏、聊天框。整体采用ajax进行局部刷新。

点击对话栏在聊天框中展示对应好友互相发送的聊天记录。还可进行聊天记录查看与以时间或关键字进行查询。对话栏中包括所有已注册好友以及群组，群组中展示所有用户在该群众的发言。并且登陆者可发布以自己为作者的群公告。

点击联系人可查询好友详细信息，当前登录者可完成对自己信息的编辑操作或者对其他好友的删除操作。

系统效果展示：

系统功能

用户注册

用户进入系统，首先判定是否有用户完成登录，若无用户则自动跳转至用户注册页面。用户注册需提交相应用户数据，并通过密码，邮箱等格式检查即可完成注册。

用户是否登录判定关键代码如下所示。

<?php
 session_start();
 if(!isset($_SESSION["userid"])) {
   header("Location:ChatLogin.php");
   exit();
 }
?>

用户登录

用户登录进行账号与密码的检验，通过则完成登录进入聊天主页面。

侧边菜单

点击左侧菜单聊天，即可利用ajax完成会话侧边栏的局部刷新。点击好友则会完成好友侧边栏的局部刷新。点击下方菜单按钮，可进行退出登录操作。

Ajax完成局部刷新关键代码如下

    <script>  
        $(document).ready(function() {  
            $('#loadtalking').click(function() {  
                $.ajax({  
                    url: 'talking.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#middlecontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
            
             $('#loadfriends').click(function() {  
                $.ajax({  
                    url: 'friends.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#middlecontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            });  
            
        $('#myForm').on('submit', function(event) {
            alert('aa');
        event.preventDefault(); 
        var formData = $(this).serialize(); // 序列化表单数据
        $.ajax({
            url: 'chatbox.php', // 处理表单数据的PHP文件路径
            type: 'POST', // 提交方式
            data: formData, // 要发送的数据
            success: function(response) {
                $('#rightcontent').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    });
          
            
    });  
        
    </script>

会话侧边栏

会话侧边栏包括所有已完成注册的用户，以及群组。

会话条目可通过上面搜索框按照关键字进行检索。

会话查询代码如下

  <?
            require "conn.php";
            $search = @$_POST['search'];
            if($search!=""){
                $sql = "select id,title,lasttime,avatar,record,isgroup,contact_id from talking where title like '%{$search}%'";
                $result=mysqli_query($conn,$sql);    
            }else{
                $sql = "select id,title,lasttime,avatar,record,isgroup,contact_id from talking";
                $result=mysqli_query($conn,$sql);
            }
                
            
            echo "<div class='m_body'>";
            while($row1 = mysqli_fetch_array($result))
            {
                list($id,$title,$lasttime,$avatar,$record,$isgroup,$contact_id)=$row1;
                
                if($isgroup==1){
                    $group="(群聊天)";
                    echo "<div style=''>";
                          echo "<div style='' ><a href='#' id='$id' style='display:flex;height:70px;' class='list-group-item list-group-item-action group'><img style='width:40px;height:40px;margin-right:5px;' src=$avatar><div style='font-size:12px;'>$title$group<span style='color:grey;margin-left:5px;font-size:8px;'>$lasttime</span><p style='color:grey;margin-left:5px;font-size:10px;'>$record</p></div></div></a>";
                        echo "</div>";
                }else{
                   echo "<div style=''>";
                          echo "<div style='' ><a href='#' id='$contact_id' style='display:flex;height:70px;' class='list-group-item list-group-item-action personal'><img style='width:40px;height:40px;margin-right:5px;' src=$avatar><div style='font-size:12px;'>$title<span style='color:grey;margin-left:5px;font-size:8px;'>$lasttime</span><p style='color:grey;margin-left:5px;font-size:10px;'>$record</p></div></div></a>";
                        echo "</div>";
                }
                   
                        
                  
            }
            echo "</div>";
            ?>

聊天窗口

点击会话栏即可利用ajax渲染出相应聊天窗口

点击会话栏时需要利用ajax进行指定区域传参。同时利用该参数进行该用户的对应信息查询，完成聊天框展示。传参代码如下

 $(document).ready(function() {  
            $('.list-group-item.list-group-item-action.group').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'chatbox.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
            $('.list-group-item.list-group-item-action.personal').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'chatbox.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
 
        });

当前登录者对点击的用户进行消息发送时，需要利用session获取当前用户的登录id，作为消息发送者的判定变量。利用获取到的ajax传参作为消息接收者的判定变量。再进行ajax表单不刷新提交，完成消息发送的功能。发送完成后的将在数据库中插入记录并与users表建立视图。

随后将进行用户消息的查询，按照登录者与单个好友相互通信的原则进行消息展示。如果消息为登录者发送则显示在右侧，为接收者发送则显示在聊天框左侧。

消息展示关键代码如下

    <?
    @session_start();

        require "conn.php";
           
        $temp = @$_GET['ps'];
        if((@$_SESSION['special']!="")&&($temp=="")){
            $_SESSION['special']=$_SESSION['special'];
        }else{
            $_SESSION['special']=$temp;
        }
        $temp1 = $_SESSION['special'];
    
    $postid = $_SESSION['userid'];
    
    
  
//    查询判断聊天是个人还是群组
        $sql2 = "select isgroup from talking where id='$temp1'";
        $result2=mysqli_query($conn,$sql2);
        $row2 = mysqli_fetch_array($result2);
        list($isgroup)=$row2;    
        
//        显示聊天对象的名字
    if($isgroup==0){
        $sql = "select title from talking where contact_id='$temp1'";
        $result=mysqli_query($conn,$sql);
        $row = mysqli_fetch_array($result);
        list($title)=$row;
    }else{
        $sql = "select title from talking where id='$temp1'";
        $result=mysqli_query($conn,$sql);
        $row = mysqli_fetch_array($result);
        list($title)=$row;
    }
        
        
        
//        查询聊天记录
        $sql1 = "select userid,isid,content,nickname,avatar from ch_us ORDER BY sendtime;";
        $result1=mysqli_query($conn,$sql1);
    

        $sql3 = "select posttime,postcontent,writer from announcement ORDER BY posttime desc";
        $result3=mysqli_query($conn,$sql3);
       
        
        

    ?>


<div class="r_middle">
                
                
            <? while($row1 = mysqli_fetch_array($result1)){ 
                 list($userid,$isid,$content,$nickname,$avatar)=$row1;
               ?>
                <?  
                    if($isgroup!=1){
                    if(($isid==$temp1)||($isid==$_SESSION['userid'])){
                    if((($userid==$_SESSION['userid'])||($userid==$temp1))&&($userid!=$isid)){
                    if($userid==$_SESSION['userid']){
                ?>
                <div  style="margin-right: 10px;margin-left: 200px;">
                    <span style="margin-left: 210px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item outgoing">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                         <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                    </li>
                </div> 
                <?}else{?>
                     <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                </div> 
                <?}
                    }
                      }
                        }else{
                    if($isid==$temp1){
                    if($userid==$_SESSION['userid']){?>
                         <div  style="margin-right: 10px;margin-left: 200px;">
                    <span style="margin-left: 210px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item outgoing">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                         <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                    </li>
                </div> 
                <?}else{?>
                     <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                </div> 
                    
    
                            <?
                }
                 }
                  
                    }
                        }?>

                
                
            </div>

当点击的会话栏记录为群组时，其中所有消息除去当前登录者发送的消息，都将展示在左边。

聊天记录

当点击右上角菜单时，可进行聊天记录查询操作。群聊天框还可以进行群公告查看以及群公告发布操作。

图 3‑15聊天记录

聊天记录页面包括聊天查询框，记录显示框两个部分。记录都以消息发送时间倒叙展示。

聊天记录展示时所有记录都可直接放置在左侧，并且显示该消息的发送时间，并以此排序。关键代码如下

<?
    session_start();

        require "conn.php";
           
        $temp = @$_GET['ps'];
        if((@$_SESSION['special']!="")&&($temp=="")){
            $_SESSION['special']=$_SESSION['special'];
        }else{
            $_SESSION['special']=$temp;
        }
        $temp1 = $_SESSION['special'];

//    查询判断聊天是个人还是群组
        $sql2 = "select isgroup from talking where id='$temp1'";
        $result2=mysqli_query($conn,$sql2);
        $row2 = mysqli_fetch_array($result2);
        list($isgroup)=$row2;  
    
    
//    显示聊天来源名称
    if($isgroup==0){
        $sql = "select title from talking where contact_id='$temp1'";
        $result=mysqli_query($conn,$sql);
        $row = mysqli_fetch_array($result);
        list($title)=$row;
    }else{
        $sql = "select title from talking where id='$temp1'";
        $result=mysqli_query($conn,$sql);
        $row = mysqli_fetch_array($result);
        list($title)=$row;
    }
    

//        查询聊天记录
    
        $keyword = @$_POST['search'];
        $keytime = @$_POST['time_search'];
        
        if($keyword!=""){

            $sql1 = "select userid,isid,content,nickname,avatar,sendtime from ch_us where content like '%{$keyword}%' ORDER BY sendtime;";
            $result1=mysqli_query($conn,$sql1);
        }else if($keytime!=""){
            $start = strtotime($keytime);
            $end = $start+86400;
            $sql1 = "select userid,isid,content,nickname,avatar,sendtime from ch_us where sendtime BETWEEN {$start} AND {$end} ORDER BY sendtime;";
            $result1=mysqli_query($conn,$sql1);
        }else{
            $sql1 = "select userid,isid,content,nickname,avatar,sendtime from ch_us ORDER BY sendtime;";
            $result1=mysqli_query($conn,$sql1);    
        }
        
    
    
    ?>
  <? while($row1 = mysqli_fetch_array($result1)){ 
                 list($userid,$isid,$content,$nickname,$avatar,$sendtime)=$row1;
                    $formatted_date = date("Y-m-d H:i:s", $sendtime);
               ?>
                <?  
                    if($isgroup!=1){
                    if(($isid==$temp1)||($isid==$_SESSION['userid'])){
                    if((($userid==$_SESSION['userid'])||($userid==$temp1))&&($userid!=$isid)){
                    
                ?>
                 <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                     <li style="color: white"><?echo $formatted_date?></li>
        
                </div> 
                <?
                    }
                      }
                        }else{
                    if($isid==$temp1){
                    ?>  
                     <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                          <li style="color: white"><?echo $formatted_date?></li>
                </div> 
            <?
                
                 }
                  
                    }
                        }?>

群公告查看与发布

当点击群公告时，可以进行群公告查看

点击群公告发布时，将进入公告发布页面，并进行发布

好友侧边栏

点击好友图标时，将展示好友侧边栏。此时还将展示好友的在线情况。好友侧边栏也可进行关键字检索操作。

好友信息

当前登录用户如果查看自己的信息，可以进行信息编辑的操作，而查看其他好友信息时将可以进行好友删除操作

登录用户信息编辑

难点解决

超链接不跳转指定页面传参

点击超链接时，需要完成只进行局部刷新，且向指定页面传递相应参数的功能。此时利用ajax进行超链接定位，执行超链接不跳转代码，并传递该链接处的id参数值给data完成向指定页面传参并返回该页面至指定区域，完成局部刷新。关键代码如下。

  $(document).ready(function() {  
            $('.list-group-item.list-group-item-action.group').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'chatbox.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
            $('.list-group-item.list-group-item-action.personal').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'chatbox.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
 
        });

表单提交后全页面刷新

当聊天发送消息时，需要将发送的消息提交数据至待处理文件处。此时整个页面都将被刷新。可以采用ajax定位表单位置执行表单不提交操作并且完成数据传递。关键代码如下

  $(document).ready(function() {  
            $('.dropdown-item.search').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'chat_history.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
             $('.dropdown-item.post').click(function() {  
                var param = $(this).attr('id');
                $.ajax({  
                    url: 'post_announcement.php',  
                    type: 'GET', 
                    data:{ps:param},
                    success: function(data) {  
                        $('#rightcontent').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
        });

局部刷新后传参数失效

当表单进行提交局部刷新以后，原本从会话栏点击传递来的参数将会被刷新失效。此时将不能利用参数查询并显示相应聊天消息。这里采用session存储传递过来的参数，利用相应条件判断使得session始终保存传递过来的参数不被表单局部刷新影响。主要代码如下

 <?$temp = @$_GET['ps'];
        if((@$_SESSION['special']!="")&&($temp=="")){
            $_SESSION['special']=$_SESSION['special'];
        }else{
            $_SESSION['special']=$temp;
        }
        $temp1 = $_SESSION['special'];?>

聊天记录一对一对应显示

需要完成当前登录者与点击的好友会话框显示一对一的聊天记录展示，此时需要用到两个id参数。当前登录id用于判断消息由谁发送，点击会话栏传递的参数用于判断该消息传递给谁。利用相应判断完成消息显示。主要代码如下

<div class="r_middle">
                
                
            <? while($row1 = mysqli_fetch_array($result1)){ 
                 list($userid,$isid,$content,$nickname,$avatar)=$row1;
               ?>
                <?  
                    if($isgroup!=1){
                    if(($isid==$temp1)||($isid==$_SESSION['userid'])){
                    if((($userid==$_SESSION['userid'])||($userid==$temp1))&&($userid!=$isid)){
                    if($userid==$_SESSION['userid']){
                ?>
                <div  style="margin-right: 10px;margin-left: 200px;">
                    <span style="margin-left: 210px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item outgoing">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                         <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                    </li>
                </div> 
                <?}else{?>
                     <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                </div> 
                <?}
                    }
                      }
                        }else{
                    if($isid==$temp1){
                    if($userid==$_SESSION['userid']){?>
                         <div  style="margin-right: 10px;margin-left: 200px;">
                    <span style="margin-left: 210px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item outgoing">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                         <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                    </li>
                </div> 
                <?}else{?>
                     <div  style="margin-left: 10px;margin-right: 200px;">
                     <span style="margin-right: 500px;color: white;font-weight: 700"><?echo $nickname?></span>
                    <li class="message-item incoming" >
                        <img style="height: 40px; width: 40px;" src="<?echo $avatar?>" alt="用户头像">
                        <div class="message-content">
                            <p style="font-weight: 700px;"><?echo $content?></p>
                        </div>
                    </li>
                </div> 
                    
    
                            <?
                }
                 }
                  
                    }
                        }?>

                
                
            </div>

聊天实时刷新

当点击发送聊天消息时完成了聊天消息的数据库插入，但没有完成显示。此时再次点击发送即可显示上一次发送的消息。因此这里采用ajax嵌套ajax完成点击一次发送，完成两次刷新的目的。且将第二次发送的表单内容置为空，避免插入空白消息。主要代码如下

 $('#myForm').on('submit', function(event) {
           
        event.preventDefault(); 
        var formData = $(this).serialize(); // 序列化表单数据
        $.ajax({
            url: 'chatbox.php', // 处理表单数据的PHP文件路径
            type: 'POST', // 提交方式
            data: formData, // 要发送的数据
            success: function(response) {
                $('#rightcontent').html(response);
                 var emptyFormData = {};
                $('#myForm :input').each(function() {
                    emptyFormData[this.name] = ''; // 设置所有字段为空字符串
                });

                
                             $.ajax({
                        url: 'chatbox.php', // 处理表单数据的PHP文件路径
                        type: 'POST', // 提交方式
                        data: emptyFormData, // 要发送的数据
                        success: function(response) {
                            $('#rightcontent').html(response);
                           

                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus + ' ' + errorThrown);
                        }
                    });
                 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
            
    });