需要帮助合并模板聊天框与PHP

Question

我最近从themeforest购买了一个模板，它有一个完美的聊天模板，我需要与php / ajax合并？我试图这样做，而不是只是在聊天框上显示，直到我刷新，它将发送到PHP文件并上传到数据库，同样用于刷新聊天，所以如果有人发送消息它也会出现。

<?php
if (isset($_GET['chatMessage'])){
    session_start();
    require_once("functions.php");

    $ChatMessage = htmlspecialchars($_GET['chatMessage']);
    if (($ChatMessage != "") && (strlen($ChatMessage) < 255)){
        $statement = $MySQL->prepare("INSERT INTO `chatbox` VALUES (NULL, ?, ?, ?)");
        $statement->bind_param("isi", $_SESSION['memberID'], $ChatMessage, time());
        $statement->execute();
    }
}
?>

以上是sendchat.php

以下是以前在我的旧网站上工作过的getchat.php：

 $statement = $MySQL->query("SELECT * FROM `chatbox` ORDER BY `ID` DESC LIMIT 20");
while ($Chat = $statement->fetch_assoc()){
    $MemberID = $Chat['MemberID'];
    $ChatMessage = $Chat['ChatMessage'];
    $Time = time_ago($Chat['TimeStamp']);

    $ChatClass = $MemberID == $_SESSION['memberID'] ? 'chatui-talk-msg' : 'chatui-talk-msg chatui-talk-msg-highlight themed-border';
    echo "
        <li class=\"chatui-talk-msg\">
            <img src=\"img/placeholders/avatars/avatar6.jpg\" alt=\"Avatar\" class=\"img-circle chatui-talk-msg-avatar\"> $ChatMessage
        </li>";
}
?>

这也是我旧网站上使用的javascript：

 function startChatBox() {
        setInterval(function() {
            refreshShouts();
        }, 1500);
    }

    function sendShout() {
        var chatRequest = new XMLHttpRequest();
        var shoutMessage = document.getElementById('chatui-message').value;
        chatRequest.onreadystatechange = function() {
            if (chatRequest.readyState == 4 && chatRequest.status == 200) {}
        }, chatRequest.open("GET", "sendChat.php?chatMessage=" + encodeURIComponent(shoutMessage), true);
        chatRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        chatRequest.send();
        document.getElementById('chatui-message').value = "";
        refreshShouts();
    }

    function refreshShouts() {
        $("#chatBox").load("inc/getChat.php");
    }

我意识到这里有很多代码，但我很困惑我能做些什么来实现我的目标。下面的代码是模板上使用的javascript，用于在您刷新之前将聊天打印到屏幕：

/*
*  Document   : readyChat.js
*  Author     : pixelcave
*  Description: Custom javascript code used in Chat page
*/

 var ReadyChat = function() {
 var chatHeight          = 600; // Default chat container height in large screens
var chatHeightSmall     = 300; // Default chat components (talk & people) height in small screens

/* Cache some often used variables */
var chatCon             = $('.chatui-container');
var chatTalk            = $('.chatui-talk');
var chatTalkScroll      = $('.chatui-talk-scroll');

var chatPeople          = $('.chatui-people');
var chatPeopleScroll    = $('.chatui-people-scroll');

var chatInput           = $('.chatui-input');
var chatMsg             = '';

/* Updates chat UI components height */
var updateChatHeight = function(){
    var windowW = window.innerWidth
                    || document.documentElement.clientWidth
                    || document.body.clientWidth;

    if (windowW < 768) { // On small screens
        chatCon
            .css('height', (chatHeightSmall * 2) + chatInput.outerHeight());

        chatTalk
            .add(chatTalkScroll)
            .add(chatTalkScroll.parent())
            .add(chatPeople)
            .add(chatPeopleScroll)
            .add(chatPeopleScroll.parent())
            .css('height', chatHeightSmall);
    }
    else if (windowW > 767) { // On large screens
        chatCon
            .css('height', chatHeight);

        chatTalk
            .add(chatTalkScroll)
            .add(chatTalkScroll.parent())
            .css('height', chatHeight - chatInput.outerHeight());

        chatPeople
            .add(chatPeopleScroll)
            .add(chatPeopleScroll.parent())
            .css('height', chatHeight);
    }
};

return {
    init: function() {
        // Initialize default chat height
        updateChatHeight();

        // Update chat UI components height on window resize
        $(window).resize(function(){ updateChatHeight(); });

        // Initialize scrolling on chat talk + people
        chatTalkScroll
            .slimScroll({
                height: chatTalk.outerHeight(),
                color: '#000',
                size: '3px',
                position: 'right',
                touchScrollStep: 100
            });

        chatPeopleScroll
            .slimScroll({
                height: chatPeople.outerHeight(),
                color: '#fff',
                size: '3px',
                position: 'right',
                touchScrollStep: 100
            });

        // When the chat message form is submitted
        chatInput
            .find('form')
            .submit(function(e){
                // Get text from message input
                chatMsg = chatInput.find('#chatui-message').val();

                // If the user typed a message
                if (chatMsg) {
                    // Add it to the message list
                    chatTalk
                        .find('ul')
                        .append('<li class="chatui-talk-msg chatui-talk-msg-highlight themed-border animation-expandUp">'
                                + '<img src="img/placeholders/avatars/avatar2.jpg" alt="Avatar" class="img-circle chatui-talk-msg-avatar">'
                                + $('<div />').text(chatMsg).html()
                                + '</li>');

                    // Scroll the message list to the bottom
                    chatTalkScroll
                        .animate({ scrollTop: chatTalkScroll[0].scrollHeight },150);

                    // Reset the message input
                    chatInput
                        .find('#chatui-message')
                        .val('');
                }

                // Don't submit the message form
                e.preventDefault();
            });
    }
};
 }();

如果有人能够帮助我，我将不胜感激。谢谢