Pl4tform_website/chat.php

<!-- getting timecode of last message out of timecode file -->

<?php
$lastTimecode = file_get_contents('lastTimecode.txt');
echo "<div id='lastTimecode'>$lastTimecode</div>";

?>



<div id="showChat" onclick="openChat();scrollLate()">CH4TFORM</div>

<div class="chat" id="chat">

<h1>CH4TFORM</h1>

<div class="closeChat" onclick="closeChat()">&#x2715;</div>

<div id="historyBox">
<div id="history"></div>
</div>



<div id="sending">
<input id="chatName" placeholder="your nickname.." type="text">

<input id="newMesInput" onkeypress="clickPress(event)" placeholder="write a message..." type="text">
<button class="sendBtn" onclick="sendMes()">send</button>
</div>

</div>

<div id="load"></div>













<script type="text/javascript">

// function fetchHeader(url, wch) {
//     try {
//         var req=new XMLHttpRequest();
//         req.open("HEAD", url, false);
//         req.send(null);
//         if(req.status== 200){
//             return req.getResponseHeader(wch);
//         }
//         else return false;
//     } catch(er) {
//         return er.message;
//     }
// }

// alert(fetchHeader("https://pl4tform.org/includes/chatContent.php",'Last-Modified'));

function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  var actualChat = '2';
}

loadFile();

// function reloadTest() {

//     var loadedChat = document.getElementById('history').innerHTML;

//     var filePath = 'includes/chatContent.php';
//     var result = null;
//     var xmlhttp = new XMLHttpRequest();
//     xmlhttp.open("GET", filePath, false);
//     xmlhttp.send();
//     if (xmlhttp.status==200) {
//         result = xmlhttp.responseText;
//     }
//     var actualChat = result;


//     if (actualChat.length!==loadedChat.length) {
//             reload();
//         // console.log("NEW MESSAEG - reload chat");
//         console.log('reload pq plus actuelle !')


//     }

//     else {
//     // console.log("no new messages - don't reload chat");

//     }

// }

// reloadTest();

function reloadTest() {

var loadedChat = document.getElementById('lastTimecode').innerHTML;

var filePath = 'includes/lastTimecode.txt';
var result = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filePath, false);
xmlhttp.send();
if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
}
var actualChat = result;

// console.log('actualchat: '+actualChat+' loaded chat: '+loadedChat)


if (actualChat!==loadedChat) {
        reload();
    // console.log("NEW MESSAEG - reload chat");
    document.getElementById('lastTimecode').innerHTML = actualChat;
    console.log('different timestamp ==> reload!')


}

else {
// console.log("same timestamp - don't reload chat");


}

}

reloadTest();


setInterval(reloadTest, 2000);



function reload() {
        $("#history").load("includes/chatContent.php");
        setTimeout(scroll, 200)
        console.log("reload")

    }


function scroll() {
    // document.getElementById('historyBox').scrollTo(0, 1000); 
    chatWindow = document.getElementById('historyBox'); 
    var xH = chatWindow.scrollHeight; 
    chatWindow.scrollTo(0, xH);

    console.log("scroll")
}


function sendMes() {

    var newMes = document.getElementById('newMesInput').value;
    var chatName = document.getElementById('chatName').value;

    if (newMes) {
    $("#load").load("includes/chatLoad.php", {message: newMes, chatName: chatName});
    var newMes = document.getElementById('newMesInput').value = "";
    setTimeout(reload, 200);
    console.log('message send');
    }
    else {
        console.log('message field empty ==> no message sended');
    }





}

reload();
setTimeout(scroll, 2000)

function clickPress(event) {
    if (event.key == "Enter") {
        sendMes();
    }
}

function closeChat() {
    document.getElementById("chat").style.display = 'none';
    document.getElementById("showChat").style.display = 'block';
    console.log("close chat");

};

function openChat() {
    document.getElementById("chat").style.display = 'block';
    document.getElementById("showChat").style.display = 'none';

};


function scrollLate() {
    setTimeout(scroll, 300)
    console.log('scrolllatency')
}

</script>