Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML

Chat Application in PHP

Rate me:
Please Sign up or sign in to vote.
4.76/5 (53 votes)
7 Sep 2013CPOL2 min read 287.3K   17.4K   36   56
Chat application in PHP

Introduction

Chat programs are common on the web these days. Now developers have a wider range of options when building chat programs. This article gets you a PHP-AJAX based chat application and it does not require page reloading for sending and receiving messages.

Core Logic

Before defining the core functions in the application, have a look at the basic appearance of the chat application, depicted in the following screenshot:

Image 1

The chat text can be given in the input box provided at the bottom of the chat window. While clicking the Send button, it starts executing function set_chat_msg. It is an Ajax based function so that without refreshing the page, it can send the chat text to the server. In the server, it executes chat_send_ajax.php along with the username and chat text.

JavaScript
//
// Set Chat Message
//

function set_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttpSend = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttpSend == null)
    {
       alert("Browser does not support XML Http Request");
       return;
    }
    
    var url = "chat_send_ajax.php";
    var strname="noname";
    var strmsg="";
    if (document.getElementById("txtname") != null)
    {
        strname = document.getElementById("txtname").value;
        document.getElementById("txtname").readOnly=true;
    }
    if (document.getElementById("txtmsg") != null)
    {
        strmsg = document.getElementById("txtmsg").value;
        document.getElementById("txtmsg").value = "";
    }
    
    url += "?name=" + strname + "&msg=" + strmsg;
    oxmlHttpSend.open("GET",url,true);
    oxmlHttpSend.send(null);
}

The PHP module receives the form data as Query String and updates to the database table named chat. The chat database table has the column names ID, USERNAME, CHATDATE and MSG. The ID field is an auto-increment field so that values to this ID field will be incremented automatically. Current date with time is updated in the CHATDATE column.

PHP
require_once('dbconnect.php');

db_connect();

$msg = $_GET["msg"];
$dt = date("Y-m-d H:i:s");
$user = $_GET["name"];

$sql="INSERT INTO chat(USERNAME,CHATDATE,MSG) " .
      "values(" . quote($user) . "," . 
      quote($dt) . "," . quote($msg) . ");";

      echo $sql;

$result = mysql_query($sql);
if(!$result)
{
    throw new Exception('Query failed: ' . mysql_error());
    exit();
}

To receive the chat messages of all users from the database table, a timer function is set for 5 seconds using the following JavaScript command. This will execute get_chat_msg function in 5 seconds interval.

JavaScript
var t = setInterval(function(){get_chat_msg()},5000);

The get_chat_msg is an Ajax based function. It executes chat_recv_ajax.php program to get chat messages from the database table. In the onreadystatechange property, another JavaScript function get_chat_msg_result is connected. While getting back the chat messages from database table, the program control goes to the get_chat_msg_result function.

JavaScript
//
// General Ajax Call
//
      
var oxmlHttp;
var oxmlHttpSend;
      
function get_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttp == null)
    {
        alert("Browser does not support XML Http Request");
       return;
    }
    
    oxmlHttp.onreadystatechange = get_chat_msg_result;
    oxmlHttp.open("GET","chat_recv_ajax.php",true);
    oxmlHttp.send(null);
}

In the chat_recv_ajax.php program, chat messages from users will be collected using the SQL select command. To limit the number of rows in the result, a limit clause is given in the SQL query (limit 200). This will request the last 200 rows from the chat database table. The messages obtained are sent back to the Ajax function for displaying the content in the chat window.

PHP
require_once('dbconnect.php');

db_connect();

$sql = "SELECT *, date_format(chatdate,'%d-%m-%Y %r') 
as cdt from chat order by ID desc limit 200";
$sql = "SELECT * FROM (" . $sql . ") as ch order by ID";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());

// Update Row Information
$msg="";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
   $msg = $msg . "" .
        "" .
        "";
}
$msg=$msg . "<table style="color: blue; font-family: verdana, arial; " . 
  "font-size: 10pt;" border="0">
  <tbody><tr><td>" . $line["cdt"] . 
  " </td><td>" . $line["username"] . 
  ": </td><td>" . $line["msg"] . 
  "</td></tr></tbody></table>";

echo $msg;

While the data is ready, the JavaScript function will collect the data received from the PHP. This data will be arranged inside a DIV tag. The oxmlHttp.responseText will hold the chat messages received from the PHP program and this will be copied to document.getElementById("DIV_CHAT").innerHTML property of the DIV tag.

JavaScript
function get_chat_msg_result(t)
{
    if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete")
    {
        if (document.getElementById("DIV_CHAT") != null)
        {
            document.getElementById("DIV_CHAT").innerHTML =  oxmlHttp.responseText;
            oxmlHttp = null;
        }
        var scrollDiv = document.getElementById("DIV_CHAT");
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
    }
}

The following SQL CREATE TABLE command can be used to create the database table named chat. All the messages that are typed by the users are going into the database table.

JavaScript
create table chat( id bigint AUTO_INCREMENT,username varchar(20), 
chatdate datetime,msg varchar(500), primary key(id));

Points of Interest

It is an interesting piece of code for implementing chat application. It can be modified to develop a full fledged HTTP chat application. Simple programming logic is used in creating this application. Beginners will not face any difficulty to understand this code.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Sunsoft Systems
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionquestion Pin
Member 127269077-Sep-16 21:40
Member 127269077-Sep-16 21:40 
Questionmo Pin
Member 122490026-Jan-16 20:05
Member 122490026-Jan-16 20:05 
Questionproject Pin
phpsystems13-Nov-15 20:08
phpsystems13-Nov-15 20:08 
QuestionError while running. Pin
Member 1195966510-Oct-15 6:55
Member 1195966510-Oct-15 6:55 
AnswerRe: Error while running. Pin
Sunil Kumar P10-Oct-15 8:29
Sunil Kumar P10-Oct-15 8:29 
QuestionThanks Pin
Member 1193498525-Aug-15 7:22
Member 1193498525-Aug-15 7:22 
GeneralThanks Pin
Member 118163256-Jul-15 0:44
Member 118163256-Jul-15 0:44 
Questiondrop down list Pin
Member 1177452120-Jun-15 1:27
Member 1177452120-Jun-15 1:27 
Generalmy vote Pin
nikunj vaghasiya30-Mar-15 16:15
nikunj vaghasiya30-Mar-15 16:15 
Questionhello Pin
Member 113564846-Jan-15 6:19
Member 113564846-Jan-15 6:19 
Generaldatabase Pin
Member 1103073129-Oct-14 22:51
Member 1103073129-Oct-14 22:51 
QuestionGM Pin
Member 1102766021-Aug-14 15:07
Member 1102766021-Aug-14 15:07 
Suggestiongood Pin
Member 1037185012-May-14 22:52
Member 1037185012-May-14 22:52 
Questionthanks Pin
CHITRAKSH 20109-Mar-14 8:00
CHITRAKSH 20109-Mar-14 8:00 
QuestionWow...Nice... :) :) :) Pin
Edwin Thomas4-Mar-14 3:29
Edwin Thomas4-Mar-14 3:29 
GeneralThanks a lot Pin
sumit_1231-Feb-14 0:32
sumit_1231-Feb-14 0:32 
QuestionTime Pin
Member 1048178022-Dec-13 3:32
Member 1048178022-Dec-13 3:32 
QuestionChat application Pin
Member 1044938511-Dec-13 3:54
Member 1044938511-Dec-13 3:54 
AnswerRe: Chat application Pin
Member 1044938511-Dec-13 4:30
Member 1044938511-Dec-13 4:30 
QuestionImprovement. Send message with ENTER keypress on input box Pin
XabiAberasturi20-Nov-13 3:01
XabiAberasturi20-Nov-13 3:01 
GeneralMy vote of 3 Pin
LAXATECH7-Nov-13 7:25
LAXATECH7-Nov-13 7:25 
GeneralThank-sa-lot Pin
LAXATECH7-Nov-13 7:16
LAXATECH7-Nov-13 7:16 
QuestionDatabase question Pin
viral8106-Oct-13 15:00
viral8106-Oct-13 15:00 
GeneralMy vote of 5 Pin
Sunil Kumar19-Sep-13 9:22
Sunil Kumar19-Sep-13 9:22 
GeneralMy vote of 1 Pin
Sunasara Imdadhusen19-Sep-13 1:33
professionalSunasara Imdadhusen19-Sep-13 1:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.