I am coding a timed chat feature and here is how I have it planned out so far:
A user purchases minutes to use for chatting. Those are stored in a database.
A user logs in to chat with life coach.
They are taken to the main page called live.php which has a "Start" and "Stop" button.
When they click the "Start" button I want a function to fire that counts to 1 minute and then begins updating the database table each minute (by subtracting 1 minute from their alloted minutes).
If they click "Stop" I want the function to pause and when they click "Start" again I want it to resume.
I wanted to store the results of the function in a div that would countdown the user's remaining time.
This is my first stab at this type of software so if you think it sucks or could be done a better way then by all means, let me know. My code is below.
live.php (This is the page that users will be viewing during the live chat)
<?php
$page = 'chat/live';
include_once('configure.php');
require_once('libraries/Chat.php');
$chat = new Chat();
$startMinutes = $chat->getMinutes($_SESSION['chat_id']);
$userInfo = $chat->getUserInfo($_SESSION['chat_id']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; ?> | <?php echo $pageInfo['page_title']; ?></title>
<meta name="keywords" content="<?php echo $pageInfo['page_keywords']; ?>" />
<meta name="description" content="<?php echo $pageInfo['page_description']; ?>" />
<link href="<?php echo CSS_PATH; ?>global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo JAVASCRIPT_PATH; ?>jquery-1.6.3.js"></script>
<script language="JavaScript">
function startTimer() {
$.ajax({
type: 'POST',
url: 'timer.php',
success: function(data) {
$("#minutes").html(data);
time = setTimeout(startTimer, 5000);
},
});
}
function stopTimer() {
clearTimeout(time);
}
</script>
</head>
<body>
<!-- HEADER -->
<div id="header"></div>
<!-- / HEADER -->
<!-- MENU -->
<?php include(INCLUDE_PATH . 'menu.php'); ?>
<!-- / MENU -->
<!-- CONTENT -->
<div id="content">
<!-- POSTS -->
<div id="posts">
<h2 class="title"><?php echo $pageInfo['page_title']; ?></h2>
<p><?php echo $pageInfo['page_content']; ?></p>
<p align="center">Welcome! You are logged in as <?php echo $userInfo['chat_username']; ?>.
Before beginning this chat you had <?php echo $startMinutes['chat_minutes']; ?> minutes.</p>
<div id="minutes"></div>
<p align="center">Video Box Here | AJAX Chat Box Here</p>
<p align="center"><a href="#" onclick="startTimer()">START</a> | <a href="#" onclick="stopTimer()">STOP</a></p>
<!-- BOTTOM AD -->
<?php include(INCLUDE_PATH . 'bottom_ad.php'); ?>
<!-- / BOTTOM AD -->
</div>
<!-- / POSTS-->
<!-- SIDEBAR -->
<?php include(INCLUDE_PATH . 'sidebar.php'); ?>
<?php include(INCLUDE_PATH . 'sidebar_ad.php'); ?>
<!-- / SIDEBAR -->
<div style="clear: both;"> </div>
</div>
<!-- / CONTENT-->
<!-- FOOTER -->
<?php include(INCLUDE_PATH . 'footer.php'); ?>
<!-- / FOOTER -->
</body>
</html>
timer.php (This is the page that calculates the time and displays it)
<?php $update = $chat->subtractMinute($_SESSION['chat_id']); ?>
<?php $minutes = $chat->getMinutes($_SESSION['chat_id']); ?>
<p align="center">You now have <?php echo $minutes; ?> minutes left.</p>
Like I said I am not sure if I am going about this the right way, but I've already spent about a day on it and do not want to waste anymore time. That's why I've come to you guys hoping for some help. Thanks in advance!
