European ASP.NET Hosting Tutorial :: Creating a Basic Chat System on a Website using AJAX

Chat application is very common in web today. In this post, we will explain you how to create a simple chat application using PHP, AJAX and MySql. The chat application that we are building is very simple. It include a start form where user enter his email address and also enter his friend email which he want to chat and same thing done by his friend we use these email as unique and send their message to each other.

Follow these steps to create a basic chat system using AJAX:

Step 1: Create The Database Structure

Every chat room needs to keep the content of the chat lines stored somewhere. Some solutions use sessions, others use text files, but the most robust solutions use a database. So next time when you chat with some one, keep in mind it is saved somewhere there. 🙂

For a simple chat room system we will need just one table, it stores the nickname of the user, what he said and the time when he said it. It is also useful to have something to distinguish what each user said. My proposal is to have a color field so we can show each user chat lines in a different way.

CREATE TABLE `chat` (
    `id` INT(9) NOT NULL AUTO_INCREMENT , 
    `usrname` VARCHAR(255) NOT NULL , 
    `color` VARCHAR(6) NOT NULL , 
    `chattext` TEXT NOT NULL , 
    `chattime` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP , 
    PRIMARY KEY (`id`) 
  ) ENGINE = MyISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;

CREATE TABLE `chat` (

`id` INT(9) NOT NULL AUTO_INCREMENT ,

`usrname` VARCHAR(255) NOT NULL ,

`color` VARCHAR(6) NOT NULL ,

`chattext` TEXT NOT NULL ,

`chattime` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,

PRIMARY KEY (`id`)

) ENGINE = MyISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;

I have named the table “chat” for obvious reasons. It contains an ID field which is the primary key and so it is auto-incremented, a nickname, color and chattext fields, strings with different lengths. The chattime field is a timestamp field for which MySQL will set as default value to the current time. This is how we know when the chat line have been submitted. The table uses the MyISAM engine and character set is UTF-8 as it supports most languages.

Step 2: Create The Frontend

Every good chat system has some kind of user management system. In our case we have just a user name. It is not complete solution but it is enough for the purposes of this tutorial.

When a user comes to the chat room page he needs to have a user name, so first we need to give him a way to choose one. Later we need to store this user name, so we do not need to ask him to enter his name every time he sends a message. That is why we will use sessions.

Here we create two sections in the frontend file: one for login and the other for chat. When the user comes for the first time, he will not have a user name in the session, and he will get a form to write down his user name and choose a color. When he submits the login form, the browser will be redirected to the chat screen. It is the same URL but the user sees one section a time.

Login section

Login section consists of two parts. The form on which the user provides his user name and color. Then he submits the form which will be handled by a script to set the session. After the browser returns to the first page again but now showing the chat interface instead of the login form. Let us create the first section with a script file named index.php:

<?php
  session_start();
  if(IsSet($_SESSION[ "usrname" ]) && $_SESSION[ "usrname" ] == "") {
    ?>
<html>
  <head>
    <title>Chat Room Example</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <h1>Please choose a nickname and a color</h1>
    <form action="login.php" method="post">
      <table cellpadding="5" cellspacing="0" border="0">
        <tr>
          <td align="left" valign="top">Nickname :</td>
          <td align="left" valign="top">
            <input type="text" name="usrname" />
          </td>
        </tr>
        <tr>
          <td align="left" valign="top">Color :</td>
          <td align="left" valign="top">
            <select name="color">
              <option value="000000">Black</option>
              <option value="000080">Navy</option>
              <option value="800080">Purple</option>
              <option value="00FFFF">Aqua</option>
              <option value="FFFF00">Yellow</option>
              <option value="008080">Teal</option>
              <option value="A52A2A">Brown</option>
              <option value="FFA500">Orange</option>
              <option value="CCCCCC">Gray</option>
              <option value="0000FF">Blue</option>
              <option value="00FF00">Green</option>
              <option value="FF00FF">Magenta</option>
              <option value="FF0000">Red</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="left" valign="top"></td>
          <td align="left" valign="top"><input type="submit" value="Login" /></td>
        </tr>
      </table>
    </form>
  </body>
</html>
    <?php
  }else{ }
?>

<?php

session_start();

if(IsSet($_SESSION[ "usrname" ]) && $_SESSION[ "usrname" ] == "") {

<html>

<head>

<title>Chat Room Example</title>

</head>

<body>

<h1>Please choose a nickname and a color</h1>

<tr>

<td align="left" valign="top">Nickname :</td>

</td>

</tr>

<tr>

<td align="left" valign="top">Color :</td>

<option value="000000">Black</option>

<option value="800080">Purple</option>

<option value="FFFF00">Yellow</option>

<option value="A52A2A">Brown</option>

<option value="FFA500">Orange</option>

<option value="00FF00">Green</option>

<option value="FF00FF">Magenta</option>

</select>

</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

<?php

}else{ }

First thing we do in this script is to call start_session(). We need to start the session before we print anything on the screen. After that a simple test, if the user has not registered his user name in the session we will show the form. If he did go through the login form, we show what is after the “else” keyword. Now it is empty but later we will add code there.

So if $_SESSION[“usrname”] variable is empty, we show a form. Very simple, one table in a form with two fields: nickname and color. The user enters a user name and chooses a color from the dropdown select element. Then clicks on submit button that will submit the form to the login.php script.

Now let us create a simplified version of the login.php script. We are not fully validating the submitted values here for simplification reasons, but for security sake it is wise to assure the submitted values are valid.

<?php
  session_start();
  $_SESSION['usrname'] = strip_tags($_POST['usrname']);
  $_SESSION['color'] = strip_tags($_POST['color']);
  header("Location: index.php");
?>

<?php

session_start();

$_SESSION['usrname'] = strip_tags($_POST['usrname']);

$_SESSION['color'] = strip_tags($_POST['color']);

header("Location: index.php");

Again, the first thing we do is to start our session with session_start(). We will do that many times. Do some basic filtering of the user name and color provided via the form, and assign the values to session variables. Then we redirect the user back to index.php page using the header() function. This time we have a session set with the user name value, so the if statement will activate the second part of the script this time.

Chat Section

The second interface of this application is the chat window itself. We need to copy this code to the last part of the index.php for else section between the curly brackets.

?>
<html>
  <head>
    <title>Chat Room Example</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <div id="view_ajax"></div>
    <div id="ajaxForm">
      <input type="text" id="chatInput" /><input type="button" value="Send" id="btnSend" />
    </div>
  </body>
</html>
<?

<html>

<head>

<title>Chat Room Example</title>

</head>

<body>

</div>

</body>

</html>

The JavaScript Section

An important file for the chat system is main.js. This is where our AJAX requests are being processed. We have three functions and one event listener. Copy this code in main.js file:

var lastTimeID = 0;

$(document).ready(function() {
  $('#btnSend').click( function() {
    sendChatText();
    $('#chatInput').val("");
  });
  startChat();
});

function startChat(){
  setInterval( function() { getChatText(); }, 2000);
}

function getChatText() {
  $.ajax({
    type: "GET",
    url: "/refresh.php?lastTimeID=" + lastTimeID
  }).done( function( data )
  {
    var jsonData = JSON.parse(data);
    var jsonLength = jsonData.results.length;
    var html = "";
    for (var i = 0; i < jsonLength; i++) {
      var result = jsonData.results[i];
      html += '<div style="color:#' + result.color + '">(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';
      lastTimeID = result.id;
    }
    $('#view_ajax').append(html);
  });
}

function sendChatText(){
  var chatInput = $('#chatInput').val();
  if(chatInput != ""){
    $.ajax({
      type: "GET",
      url: "/submit.php?chattext=" + encodeURIComponent( chatInput )
    });
  }
}

var lastTimeID = 0;

$(document).ready(function() {

$('#btnSend').click( function() {

sendChatText();

$('#chatInput').val("");

});

startChat();

});

function startChat(){

setInterval( function() { getChatText(); }, 2000);

}

function getChatText() {

$.ajax({

type: "GET",

url: "/refresh.php?lastTimeID=" + lastTimeID

}).done( function( data )

{

var jsonData = JSON.parse(data);

var jsonLength = jsonData.results.length;

var html = "";

for (var i = 0; i < jsonLength; i++) {

var result = jsonData.results[i];

html += '<div style="color:#' + result.color + '">(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';

lastTimeID = result.id;

}

$('#view_ajax').append(html);

});

}

function sendChatText(){

var chatInput = $('#chatInput').val();

if(chatInput != ""){

$.ajax({

type: "GET",

url: "/submit.php?chattext=" + encodeURIComponent( chatInput )

});

}

This chat application will retrieve the chat status every two seconds, but we do not want to retrieve all the past chat lines every time. We already retrieved the newest ones, so we need a way to track which lines were retrieved for the last time. As you may remember when we created the database table we added a primary key field named ID that is auto-incremented. We use that field value to track which line we have seen last. That is why we us a variable name lastTimeID in our JavaScript.

Step 3: Create The Backend Section

The backend are the server side PHP helper scripts that call the class. The helper scripts handle the AJAX requests and call the class. We have two helper scripts, as mentioned before. We have refresh.php to refresh our chat window, and submit.php to submit new chat lines.

The Helpers

The first helper script is refresh.php. It receives the last chat line ID from AJAX and pass it to a static class method that returns a JSON encoded response. Then the script outputs that as response to the AJAX requests. The code below is refresh.php code:

<?php
  require_once( "config.php" );
  require_once( "/path/to/class/chatClass.php" );
  $id = intval( $_GET[ 'lastTimeID' ] );
  $jsonData = chatClass::getRestChatLines( $id );
  print $jsonData;
?>

Second helper script is submit.php. It receives the chat text from AJAX and passes to static class method along with the user name and color from the session. We use start_session again to be able to access session data. The new data is inserted in the database. Below follows submit.php code:

<?php
  session_start();
  require_once( "config.php" );
  require_once( "/path/to/class/chatClass.php" );
  $chattext = htmlspecialchars( $_GET['chattext'] );
  chatClass::setChatLines( $chattext, $_SESSION['usrname'], $_SESSION['color']);
?>

<?php

require_once( "config.php" );

require_once( "/path/to/class/chatClass.php" );

$id = intval( $_GET[ 'lastTimeID' ] );

$jsonData = chatClass::getRestChatLines( $id );

print $jsonData;

Second helper script is submit.php. It receives the chat text from AJAX and passes to static class method along with the user name and color from the session. We use start_session again to be able to access session data. The new data is inserted in the database. Below follows submit.php code:

<?php

session_start();

require_once( "config.php" );

require_once( "/path/to/class/chatClass.php" );

$chattext = htmlspecialchars( $_GET['chattext'] );

chatClass::setChatLines( $chattext, $_SESSION['usrname'], $_SESSION['color']);

Another file we need to create is config.php. it is a simple configuration file we are including in these two files where we define the database access variables.

<?php
  define("mysqlServer","localhost");
  define("mysqlDB","mysqlDB");
  define("mysqlUser","mysqlUser");
  define("mysqlPass","mysqlPass");
?>

<?php

define("mysqlServer","localhost");

define("mysqlDB","mysqlDB");

define("mysqlUser","mysqlUser");

define("mysqlPass","mysqlPass");

The Main Class

The last file left to explain is the class itself. Let us copy this code in chatClass.php file:

<?php

  class chatClass
  {
    public static function getRestChatLines($id)
    {
      $arr = array();
      $jsonData = '{"results":[';
      $db_connection = new mysqli( mysqlServer, mysqlUser, mysqlPass, mysqlDB);
      $db_connection->query( "SET NAMES 'UTF8'" );
      $statement = $db_connection->prepare( "SELECT id, usrname, color, chattext, chattime FROM chat WHERE id > ? and chattime >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
      $statement->bind_param( 'i', $id);
      $statement->execute();
      $statement->bind_result( $id, $usrname, $color, $chattext, $chattime);
      $line = new stdClass;
      while ($statement->fetch()) {
        $line->id = $id;
        $line->usrname = $usrname;
        $line->color = $color;
        $line->chattext = $chattext;
        $line->chattime = date('H:i:s', strtotime($chattime));
        $arr[] = json_encode($line);
      }
      $statement->close();
      $db_connection->close();
      $jsonData .= implode(",", $arr);
      $jsonData .= ']}';
      return $jsonData;
    }
    
    public static function setChatLines( $chattext, $usrname, $color) {
      $db_connection = new mysqli( mysqlServer, mysqlUser, mysqlPass, mysqlDB);
      $db_connection->query( "SET NAMES 'UTF8'" );
      $statement = $db_connection->prepare( "INSERT INTO chat( usrname, color, chattext) VALUES(?, ?, ?)");
      $statement->bind_param( 'sss', $usrname, $color, $chattext);
      $statement->execute();
      $statement->close();
      $db_connection->close();
    }
  }
?>

<?php

class chatClass

{

public static function getRestChatLines($id)

{

$arr = array();

$jsonData = '{"results":[';

$db_connection = new mysqli( mysqlServer, mysqlUser, mysqlPass, mysqlDB);

$db_connection->query( "SET NAMES 'UTF8'" );

$statement = $db_connection->prepare( "SELECT id, usrname, color, chattext, chattime FROM chat WHERE id > ? and chattime >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");

$statement->bind_param( 'i', $id);

$statement->execute();

$statement->bind_result( $id, $usrname, $color, $chattext, $chattime);

$line = new stdClass;

while ($statement->fetch()) {

$line->id = $id;

$line->usrname = $usrname;

$line->color = $color;

$line->chattext = $chattext;

$line->chattime = date('H:i:s', strtotime($chattime));

$arr[] = json_encode($line);

}

$statement->close();

$db_connection->close();

$jsonData .= implode(",", $arr);

$jsonData .= ']}';

return $jsonData;

}

public static function setChatLines( $chattext, $usrname, $color) {

$db_connection = new mysqli( mysqlServer, mysqlUser, mysqlPass, mysqlDB);

$db_connection->query( "SET NAMES 'UTF8'" );

$statement = $db_connection->prepare( "INSERT INTO chat( usrname, color, chattext) VALUES(?, ?, ?)");

$statement->bind_param( 'sss', $usrname, $color, $chattext);

$statement->execute();

$statement->close();

$db_connection->close();

}

To connect to the database we need login information, so use constant values defined separately with MySQL connection values like the server name, database name, MySQL username and password.

As a final note, we just would like to remind that database access operations may fail eventually due to unexpected errors. The code shown above does not contain all the error checks that it should tp be robust. Error checking was omitted to avoid making the code look more complicated just for this tutorial. Keep that in mind when implementing any kind of database access applications, so your code can be as robust as code written by a good professional developer.

hostforlifeasp.net AJAX Chat 8.3 Hosting

Ajax Chat 8.3 is a light-weight customizable web chat software implemented in JavaScript and PHP. The script does not require Java, Flash, or any other plugins. Features:

Public and private chat.
Login as a registered user or as a guest.
Away status, custom colors, smileys, user gender/status icons.
Ajax Chat can be integrated with a third-party membership system by implementing user authentication routine. Advanced integration options: if user is logged in to the website, they can be logged in to the chat automatically.

hostforlifeasp.net is the best and reliable Ajax chat 8.3 hosting that does not require flash. Ajax chat is known for its robust user interface and customizability. However, like many HTTP/AJAX chat scripts, typical installations to be very server intensive, and as a result, many webhosts (especially free webhosts) don’t particularly appreciate their presense. Our goal is to provide hosting for ajax chats on our fine tuned servers, designed to make it easy to install a great chat room on your website without dealing with the costs involved. We also have added our own administration panel for all chat rooms, allowing you to perform basic configuration and setup without the technical details involved in setting up a normal installation of an Ajax Chat 8.3.

If you are looking for a powerful, non-IRC AJAX/PHP chat room script, Ajax Chat 8.3 may be worth considering. If you are unsure of what our AJAX Chat 8.3 hosting has to offer, just visit our official website . Whether you are running a small chat room for personal meetings, or a full chat room for your forum or website, we hope that you will consider hosting your chat with us!

Author
Recent Posts

hostforlifeasp.net

hostforlifeasp.net is Microsoft No #1 Recommended Windows and ASP.NET Hosting in European Continent. hostforlifeasp.net offers a highly redundant, carrier-class architecture, designed around the needs of shared hosting customers. The company’s prices for shared and dedicated hosting are competitive; its features and perks are robust;

Latest posts by hostforlifeasp.net (see all)

WordPress Hosting Tutorial :: How To Build A New Website Using WordPress - March 31, 2016
ASP.NET Core 1.0 Hosting Tutorial :: How To Add Costum Configuration Files to MVC 6 Project - March 17, 2016
Some Reasons That Make HostForLIFEASP.net The Perfect Choice For ASP.NET Hosting - March 8, 2016

Hosting Tutorial