CSS/CSS3 Javascript/JQuery PHP

How to create a Simple PHP File Based Chat Room Application

A chat application plays a very vital role in online communication today. It plays a key role in success of various platforms like Facebook, Google, WhatsApp, Skype, Hike and many others. It has also become a part of online support system these days. I know coding geeks always curious about it and wondered that how a chat application actually works. Some of those geeks has also tried to implement some sort of such application as I tried as well during my college days.

So guys here I am going to start a series of tutorials on “How to create a chat application” starting with this first tutorial. In this tutorial you will learn how to create a very basic simple php file based chat room application. Lets start with the basic flow of any chat application.


Let me explain you this chat flow chart. Generally a chat model has a three basic components as you can see in the above flow chart. User, Chat Controller and Model. Role of chat controller is to take the message from one user, get it stored in a model (say a DB table) and route it to the other user.

In this application, that I am going to explain below, also has three components. But we are going to use a data file as model instead of DB table. We’ll do it later tutorials. HTML, CSS3 and jQuery is used in this application for designing the UI and controls in frontend. This application has main 5 files:

  1. index.php (Front view of the application)
  2. chat.php (The controller)
  3. chatdata.txt (The Model)
  4. style.css (Stylesheet)
  5. jquery library file

Content of these files(except jquery library and chatdata.txt) are given below. Codes are well commented wherever required.

Content of index.php:


Content of Chat.php


Content of style.css



About the author

Sujeet Kr Singh