Step 5 : Displaying the Chat Log (log.html) Contents

Everything the user has posted is handled and posted using jQuery; it is written to the chat log with PHP. The only thing left to do is to display the updated chat log to the user.

In order to save ourselves some time, we will preload the chat log into the #chatbox div if it has any content.

-------------------------------------------------------------------------------------------------------------------

<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
    $handle = fopen("log.html", "r");
    $contents = fread($handle, filesize("log.html"));
    fclose($handle);

    echo $contents;
}
?></div>

-----------------------------------------------------------------------------------------------------------------------


We use a similar routine as we used the post.php file, except this time we are only reading and outputting the contents of the file.

The ajax request is the core of everything we are doing. This request not only allows us to send and receive data throught the form without refreshing the page, but it also allows us to handle the data requested.


---------------------------------------------------------------------------------------------------------------------------

//Load the file containing the chat log
	function loadLog(){

		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){
				$("#chatbox").html(html); //Insert chat log into the #chatbox div
		  	},
		});
	}

------------------------------------------------------------------------------------------------------------------------------

We wrap our ajax request inside a function. As you see, we then move the data we requested (html) into the #chatbox div.

Auto-scrolling
As you have seen in other chat applications, the content automatically scrolls down if the chat log container (#chatbox) overflows. We are going to implement a simple and similar feature, that will compare the container's scroll height before and after we do the ajax request. If the scroll height is greater after the request, we will use jQuery's animate effect to scroll the #chatbox div.

----------------------------------------------------------------------------------------------------------------------------


	//Load the file containing the chat log
	function loadLog(){
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){
				$("#chatbox").html(html); //Insert chat log into the #chatbox div

				//Auto-scroll
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}
		  	},
		});
	}

-------------------------------------------------------------------------------------------------------------------------

We first store the #chatbox div's scroll height into the oldscrollHeight variable before we make the request.
After our request has returned sucessful, we store the #chatbox div's scrolle height into the newscrollHeight variable.
We then compare both of the scroll height variables using an if statement. If the newscrollHeight is greater than the oldscrollHeight, we use the animate effect to scroll the #chatbox div.


Continuously Updating the Chat Log

----------------------------------------------------------------------------------------------------------------
setInterval (loadLog, 2500);
----------------------------------------------------------------------------------------------------------------

This function will run our loadLog() function every 2.5 seconds, and the loadLog function will request the updated file and autoscroll the div.


I hope i explained it as clear as i can. It became like a tutorial but i needed to explain every single code to gain trust, you probably know what those codes do, but like i said, i felt like i had to explain. Color codes, background and other non-lethal stuff can be managed easily. If you just place a page under your own domain, we can start our hacking roleplay without losing any time. Basicly this is just a chatbox app on a web page, i couldn't think more, because if dig deeper, illegal advertising and other stuff will pop-up and this till take lots of time. With this chat box appliication, we can connect to other illegal people like other hackers, hitmen etc. Also thanks for spending your time to read that! Have fun!