To get started with ajax chat demo we need to know some basic javascript functions like javascript recursion, timeout delay and simple php operation to read and write a file.

Ajax chat demo requirements

1. A simple index.php page.
2. A data.txt file.
3. A good mood and some coffee.

I assure you we would be using a single php file with just 60 line of code. Using a back-end mysql database is an advantage but in this demo I am just concentrating on quick functionality by using a data.txt file.

Lets start with structure of Ajax chat demo using html

Create a chat box using div tag with an id in it. Lets make this chat panel look like a shell command box. Add some css to it.

index.php

It looks something like this.

Now we need to create a text box under it using a form where user can enter messages.

Here is the screen shot

Write javascript to send messages to server

Here server means index.php file itself. Call jquery api from google hosted apis.

Write a function to send messages to server. This function takes the entire message as an argument and pass it to server via ajax.

The form tag above is prevented its default submission by onsubmit = return false. Before it return false function sendMessage perform the post action via ajax to submit the data. Here starts the actual ajax monitoring for new messages every 2 seconds.

Finally start the monitoring

Write server side code in php to store new messages in a file.

index.php

Get all incoming requests

Validate all incoming requests and set exit for each. Exit is necessary so that response is the echo content only not the entire html file. First condition is to store the message coming from ajax request.

Second condition is to return a response if new messages are there. New messages are recorded only when file time of data.txt is modified.

Explanation (ajax chat demo)

Getting new messages.

We get new messages every 2 seconds if any.  The php script receive the new message request as previous time stamp. Then it records the current modified time of data.txt. If times are same then there are no new messages,  then it return both the time stamps at $array[0] and $array[1]

But if both the time stamps are different i.e., previous time stamp is changed by new time stamp because new message is there in data.txt file. Hence else part is executed. Returning different file times and new message.

Javascript explanation

In javascript start function is called every 2 seconds. It then compares the two file times, if both are not same then new message is there, appending it to the chat box else previous message is there which isn’t needed to be appended. Find below the complete code for ajax chat demo.

You can also add sessions and mysql database to upgrade it. Later on if you need help in customizing a one to one chat system then feel free to contact me.

View live demo here or download the zip here

Thanks for reading.