I’ve been asked a few times so far to create a chat room for one of my sites. Now even though I think this is an interesting request, I find that chat rooms have become a thing of the past, which have been taken up by the older Internet crowd and (sadly) cyber-predators (no, not like the one Schwarzenegger fought).
I did some thinking and a friend of mine helped me come up with an idea to create a forum/chat room hybrid. It would have the visual & functional qualities of a forum, but would be updated dynamically using sort of what you now find on Twitter’s real-time search results where you are notified of new posts on a timely basis. I’m not going to go into very much detail cause I had to make it work for my site specifically, but I’ll give you an idea on how it works so you can take it in any direction you want to.
What you’ll need… HTML, PHP, jQuery, and a MySQL database
First thing first, let’s see a quick look at what the HTML code will look like (again, this is really basic). *Note: we are setting a session to keep track of when the user first got to the page so we aren’t loading posts that aren’t “new”:
<?php $_SESSION['last_refresh'] = date('Y-m-d H:i:s'); ?>
<div id="new_posts_msg" style="display: none;"> </div>
<div id="forum_posts">
<div class="forum_post">First!</div>
<div class="forum_post">Second post!</div>
<div class="forum_post">Third!</div>
</div>
Next, we need to set up a timer that will kick off the update function (which fires when the document is ready) and have it run every so often (mine fires every 20 seconds):
$(document).ready(function() {
setTimeout('checkForNewPosts()', 20000);
}
Now let’s take a look at the function that will call a background script to check for new posts and display a button telling the user that there are new posts:
function checkForNewPosts() {
$.post('checkForNewPosts.php',
function(data) {
if (data > 0) {
$('#new_posts_msg')
.html('<button type="button" onclick="loadNewPosts()">
New posts! Click to load them.</button>')
.fadeIn('slow');
}
});
// Check again in 20 seconds
setTimeout('checkForNewPosts()', 20000);
}
Let’s take a look at what’s happening on the “back-end” (or the checkForNewPosts.php file). Using the session we set from last time, we will select any “new” posts that weren’t loaded when the page was first loaded. The result is then sent back to the javascript function to display the “new post” notification button if any new posts have been added:
<?php // check for new posts in our `forum_posts` table
$query = "SELECT COUNT(*) AS new_post_count
FROM forum_posts
WHERE forum_posts.added
BETWEEN '" . $_SESSION['last_refresh'] . "' AND NOW()";
$result = $this->query($query);
// Return to display notification
echo $result[0]['alias']['new_post_count'];
?>
If you noticed before, the “new post” notification button had an onclick function called loadNewPosts(). This is shown below and is used to load all the new posts that were found:
function loadNewPosts() {
$.post('loadNewPosts.php',
function(data) {
$('#new_posts_msg').html('').hide(); // Hide the button
// Display new posts
$('#forum_posts').find('.forum_post:last').after(data);
});
}
Finally, the loadNewPosts.php file is responsible for retrieving all the new posts and adding them after the latest post already loaded:
<?php
$query = "SELECT *
FROM forum_posts
WHERE forum_posts.added
BETWEEN '" . $_SESSION['last_refresh'] . "' AND NOW()";
$result = $this->query($query);
$new_posts = "";
foreach ($result as $row) {
$new_posts .= "<div class="forum_post">" .
$row['forum_posts']['post'] .
</div>";
}
// Return to display new posts on web page
echo $new_posts;
?>
I hope that all made sense and helps you in your endeavors to make a dynamically-tubular website. For a working demo, please check out an active thread at: One Line Rhyme :: Forums
