Over at the .NET Butchering (and JAVA messes) blog they have posted a very good tutorial on creating a Chat application in PHP using Ajax. In Web 2.0 social applications chat is very often a desired feature.
Below is an excerpt from the tutorial.
The first thing to be done is creating MySQL tables:
CREATE TABLE `db_name`.`chat_rooms` (
`id` int(10) unsigned NOT NULL auto_increment,
`name` varchar(45) NOT NULL,
`description` text NOT NULL,
`table_name` varchar(45) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `db_name`.`roomX` (
`id` int(10) unsigned NOT NULL auto_increment,
`date` datetime NOT NULL,
`message` text NOT NULL,
`user` varchar(45) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
The first table, chat_rooms, contains a list of all available chat rooms, used to know wich table name will be used for each room. The second one, roomX is a template for a "chat room-like" table: it contains the date (date+time) of each message, the message itself and the user that inputed it (actually it should be an integer, that refers to an appropriate users table, but this is simple version of the script without logging features).
The first thing we're gonna do is execute those SQL scripts (we will be using MySQL and PHP native methods) replacing "roomX" with i.e. "friends_table", and after that we're going to populate the first table, to add an available chat room:
INSERT INTO chat_rooms(name,description,table_name)
VALUES("Friends chat","Comment...","friends_table");
The next step is to compose the "web application". Let's see this picture:
We will use a main page, chat.php, a dinamically reloaded page, room.php and a simple iframe with inside the page sender.php with some controls to post a message.
Let's see chat.php, removing all HTML stuff (like header and formatting, that's up to you):
<?php
session_start();
/* probabily login stuff */
$_SESSION['chat_time'] = $date;
?>
<script type="text/javascript" src="timer.js"></script>
<script type="text/javascript" src="httpRequest.js"></script>
<script language="javascript">
var chatRoomId=<?=$charRoomChoosen?>;
</script>
<body onload="InitializeTimer(); StartTheTimer();">
<div id="chatText" style="overflow:auto;"></div>
<iframe src="sender.php" name="msgFrame"></iframe>
</body>
We'll talk further about the session variable chat_time; I've added 2 javascript scripts: the first one is a simple timer, the second one contains some methods to make HTTP requests.
This is httpRequest.js:
var xmlHttp;
function loadURL()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="room.php?chatRoomId="+charRoomId;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 xmlHttp.readyState=="complete")
{
/* trim message */
var newlines = xmlHttp.responseText.replace(/^\s+\s+$/g,"");
if(newlines!='')
{
var html = document.getElementById("chatText").innerHTML;
document.getElementById("chatText").innerHTML = html + newlines;
document.getElementById("chatText").scrollTop=20000000;
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}
This class does an HTTP request (using Firefox, Explorer and other browser Request objects), as I explained in the [Javascript]XML Loading post, and writes the result inside the DIV with id chatText, calling the room.php script (that actually outputs last message sent to the room). The charRoomId used as a parameter of the calling method, is a global variable defined in the chat.php header using a PHP variabile (it should be a $_REQUEST variable).
As we are using asyncronous calls, we need a component that recalls this request periodically. This is the code below (timer.js):
var secs;
var timerID = null;
var timerRunning = false;
var delay = 500;
function InitializeTimer()
{
// Set the length of the timer, in seconds
secs = 1;
StopTheClock();
StartTheTimer();
}
function StopTheClock()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function StartTheTimer()
{
if (secs==0)
{
StopTheClock();
// Here's where you put something useful that's
// supposed to happen after the allotted time.
// For example, you could display a message:
loadURL();
secs = 1;
timerRunning = true;
timerID = self.setTimeout("StartTheTimer()", delay);
}
else
{
self.status = secs;
secs = secs - 1;
timerRunning = true;
timerID = self.setTimeout("StartTheTimer()", delay);
}
}
This is a timer, called from the chat.php page with onLoad method, that recalls each delay milliseconds the function loadURL() function, defined inside the previous js file.
Now let's see what is inside the chat.php file:
<?php
/* **************** SESSION VARIABLES **************************** */
session_start();
if(!isset($_SESSION['chat_time']))
{
$_SESSION['chat_time'] = date("Y-m-d H:i:s");
$_SESSION['chat_time_delete'] = time();
}
/************** DB connection ********************+*/
$db_user = "root";
$db_password = "root1";
$db_host ="localhost";
$connection = mysql_connect($db_host,$db_user,$db_password);
mysql_select_db("test",$connection);
/********** RETRIEVES THE NAME OF THE CHAT ROOM TABLE NAME **********/
function getChatTableName($connection,$chatRoomId)
{
/* recupera il nome della tabella della chat room */
$query = "SELECT table_name FROM chat_rooms WHERE id = '".$chatRoomId."'";
$result = mysql_query($query, $connection);
$tableName = NULL;
while($row=mysql_fetch_array($result))
{
$tableName = $row['table_name'];
}
if($tableName==NULL)
{
return NULL;
}
return $tableName;
}
/******************* MESSAGE VISUALIZATION ********************************/
$tableName = getChatTableName($connection,$_REQUEST['chatRoomId']);
if($tableName==NULL)
{
echo "Error selection char room.";
exit();
}
$login_date = $_SESSION['chat_time'];
/* load messages */
$query = "SELECT c.message, c.date, c.user FROM ".$tableName." c WHERE c.date > '".$login_date
."' ORDER BY c.date ASC ";
$result = mysql_query($query,$connection);
$last = "";
while($row=mysql_fetch_array($result))
{
$message = html_entity_decode($row['message']);
echo "[".$row['user']."][".$row['date']."] ".$message." <br/>";
$_SESSION['chat_time'] = $row['date'];
}
/* delete messages older that 60 seconds*/
if((time()-$_SESSION['chat_time_delete'])>60 )
{
$query = "DELETE FROM ".$tableName." WHERE (NOW()-date)>60";
mysql_query($query,$connection);
$_SESSION['chat_time_delete']=time();
}
mysql_close($connection);
?>
We can see session variables initialization: chat_time is the time in which you entered the chat room or of the last message received, while chat_time_delete is the time in which you last deleted a message.
The scripts work this way:
- connect to the database
- retrieve the chat room table name using the chatRoomId request variable and the getChatTableName() function
- query the DB searching for messages not yet received (basing unpon the time of last message received, and at the end of the loop we have a new value for chat_time, that is the last received message time
- (because) once received messages are useless (a user after connection never received messages of the past), the script delete messages older than 60 seconds
Of course you can format as you like the message board.
At the end we find the sender.php page, that is wrapped in an HTML iframe (because every submission must not cause the entire page reload):
<?php
/***************+ DB variables *****************+*/
$db_user = "root";
$db_password = "root1";
$db_host ="localhost";
$connection = mysql_connect($db_host,$db_user,$db_password);
mysql_select_db("test",$connection);
/********************* NOME TABDELLA CHAT ROOM **************************+*/
function getChatTableName($connection,$chatRoomId)
{
$query = "SELECT table_name FROM chat_rooms WHERE id = '".$chatRoomId."'";
$result = mysql_query($query, $connection);
$tableName = NULL;
while($row=mysql_fetch_array($result))
{
$tableName = $row['table_name'];
}
if($tableName==NULL)
{
return NULL;
}
return $tableName;
}
if($_POST['action']=="send")
if($_SESSION['userid']!="")
{
$tableName = getChatTableName($connection,$_REQUEST['chatRoomId']);
if($tableName==NULL)
{
echo "Error selecting chat room.";
exit();
}
$query = "INSERT INTO ".$tableName."(user,message,date) VALUES(\""
.$_POST['userid']."\",\""
.htmlentities(htmlspecialchars($_POST['message']))."\",NOW())";
mysql_query($query,$connection);
}
?>
<body onload="document.msgForm.message.focus();">
<form name="msgForm" action="sender.php" method="post">
<input type="hidden" value="send" name="action"/>
<input type="hidden" value="1" name="chatRoomId"/>
<input type="text" name="userid" value="<?=($_POST['userid']=="")?"guest":$_POST['userid']?>" size="10" />
<input type="text" name="message" style="width:400px" maxlength="1500"/>
<input type="submit" value="invia"/>
</form>
</body>
<?php
mysql_close($connection);
?>
This page simply prints out a web form (in which users insert their nick name -in this version without a check- and the message) and -consequently to the submission- insert the message in the DB, that will be outputted by the timer.js routine.
This will be your final result:
Hopefully this tutorial will be useful to you.
Delicious
Digg
StumbleUpon
Propeller
Reddit
Magnoliacom
Newsvine
Furl
Facebook
Google
Yahoo
Technorati
Icerocket
Recent comments
3 weeks 1 hour ago
3 weeks 2 days ago
3 weeks 5 days ago
3 weeks 6 days ago
4 weeks 11 hours ago
6 weeks 6 days ago
7 weeks 6 days ago
8 weeks 2 days ago
8 weeks 2 days ago
9 weeks 2 days ago