Tukukkk

I want to show chat messages between two users e.g user1 and admin(i.e currently i am) .Here is my db structure :

What i have tried so far:

I have a message box where messages appear, on clicking a message a username(i.e currently user1) is sent to the php for fetching chat with that user.After the chat is fetched, a chatbox is shown with the chat.

        $user        = $_POST['user'];

        $db_messages = $db_readAll("messages","sender,recipient,sending_time,read_time,recipient_status","WHERE (sender='admin' OR sender=$user) AND (recipient='admin' OR recipient=$user)","ORDER BY sending_time DESC");

        $uchatMsgs   = '';



        foreach($db_messages as $key => $message) {

            $sender=$recipient='';

            if($message['sender']== $_SESSION['session']){

                $name      = $message['recipient'];

                $sender    .= '<li class="m0 p0"><div class="text-center"><small>'.$ToReadableTime('@'.$message['sending_time']).'</small></div><div class="list-group-item b0 m0 mb5" style="padding:10px 10px 0 10px !important;"><div class="chatContent themed-background b-rad-30 p10 text-light">sender</div></div></li>';

            }

            if($message['recipient']== $_SESSION['session']){

                $name      = $message['sender'];                    

                $recipient .= '<li class="m0 p0"><div class="text-center"><small>'.$ToReadableTime('@'.$message['sending_time']).'</small></div><div class="list-group-item b0 m0" style="padding:10px 10px 0 10px !important;"><div class="online-users pull-left mr5"><img src="../uploads/userprofile/default/avatar.jpg" onerror="this.onerror=null;imgDefault(this);" alt="avatar" class="online-users-img"><span title="online"></span></div><div class="chatContent bg-lightgrey b-rad-30 p10">receiver</div></div></li>';                   

            }

            $uchatMsgs     = $recipient.$sender;

        }

        echo json_encode(['uchatName'=>$name,'uchatMsgs' => $uchatMsgs]);   

HTML:

<div class="widget shadow chatui chatui-window remove-radius-bottom chatui-window-close display-none">

    <div class="widget-content widget-content-mini themed-background">

        <a href="javascript:void(0)" class="chatui-action-open text-dark-op pull-right"><i class="fa fa-window-restore"></i></a>

        <a href="javascript:void(0)" class="chatui-action-close text-dark-op pull-right"><i class="fa fa-window-minimize" style="vertical-align:top;"></i></a>

        <a href="javascript:void(0)" class="text-dark-op pull-right"><i class="fa fa-cog"></i></a>

        <a href="../profiles.php" class="text-light"><strong id="uchatName"></strong></a>

    </div>

    <div class="widget-content widget-content-mini chatui-talk p0">

        <ul id="uchatMsgs">                              </ul>

    </div>

    <div class="widget-content widget-content-full chatui-form remove-radius-bottom">

        <form action="page_app_social.html" method="post" class="m0">

            <input type="text" id="chat-message" name="chat-message" class="form-control" placeholder="Type a message and hit enter..">

        </form>

    </div>

</div>

Jquery:

function vchat_MSGS(user){

    $.ajax({

        type: 'POST',

        url: '../core/ajaxpdo.class.php',

        dataType: 'json',       

        data: {page:'page_header',action:'vchat_MSGS',user:user},

        success: function(data) {

            console.log(data);

            $('#uchatName').text(data.uchatName);

            $('#uchatMsgs').html(data.uchatMsgs);               

            $('.chatui-window').removeClass('display-none chatui-window-close');

        }

    });

    return false;

}

PROBLEM:

The above is what i have tried to do logically but not getting the expected results.
Any body can help me with my code what has to be done next to show the chat?