Create a chat using jquery and php

This blog post will show you how to create your own (simple) chat with html, jquery (javascript) and php.

Let's start by setting up our folder structure. The folder structure should look like this:
* /data/messages/
* /

The messages folder will contain all messages written. Well structured with folder for each month and files for each day inside the "month-folder". Don't forget to chmod the messages folder to 0777.

After that's complete, we can start building our chat by creating an index.php and styles.css file in the root. In those files, we're

going to build and decide how our layout should look like.

In the index file, add doctype, html, head and body tag like this:


As we are using jquery as our javascript library, we need to include the jquery file inside the head tags, and while we\'re at it, we\'re also going to

add a link to our own javascript file, style file and a mandatory title tag. Change the head tags to this:


The title tag can be changed, the link and the two script tags must remain as it is.

When that is done, we need to start designing our layout. In this example, we\'re going to use four divs, one as container, one for all messages, one

for text input and one to show that the text is being sent. Change the body tags to this:


The div with id container is mainly for centering the chat. The div with id chat-messages will, after calling an ajax query get the 25 (a user chosen

limit) latest messages. The div with id chat-send is what it looks like, it contains all input boxes and buttons, and the last div will show a loading message after pressing the enter key or the send button.

That's all the code for the index file. (Should look like this: http://www.redward.org/public/projects/chat/index.phps)

We're now going to start styling our website. Open up the styles.css file (create it if you haven\'t already). The first thing we're are going to do in the file is to chose a default font size and font type (family). We\'re also going to add some padding so the site is a bit from the wall. We're doing that with the following code (add it into the styles file):


Tahoma is a standard and a nice looking font, unfortunately it's not available in Linux (or at least Ubuntu), and that's why we're also using the FreeSans font which is pretty similar to Tahoma.

Next thing we're going to do is to make the chat 500 pixels wide and centered, using the following code:


Next is the div containing the messages and the div containing the input boxes and the input button:


The border-radius element is only for Firefox and Webkit (Chrome, Opera). It makes the corners round!

Next is the input boxes and the input button:


Nothing out of the ordinary with that. The loading div might be a bit trickier, it requires a absolute:relative; which can make the position a bit of if the width is changed. Following code is used:


It's hidden as standard, and that's why there's display:block;. It will be shown when pressing the enter key or the send button using our jquery code.

The last bit of code in the styles file is this:


This is used for each message row.

The style file is now complete and should look like this: http://www.redward.org/public/projects/chat/styles.txt

Now there's only three files left. chat.js, chat-msgs.php and chat.php. Lets start with opening the chat.js file (create it if you haven't already).

Add this in the file:


The keydown part gets the sendtext function when clicking the enter key. Same thing goes for the click event, it gets the sendtext function after pressing the send button. The getmessages function is used to get the 25 (user selected limit) latest messages.

After you've added the javascript code above, you're going to add three new functions. getmessages, getmess and sendtext. Add to following code to the file:


The getmessages function gets the messages via setTimeout and the getmess function every five seconds. The getmess function gets the messages with ajax post via a file called chat-msgs.php. The sendtext function checks if all required values are inserted and posts the message with ajax post via chat.php. The getmess function is called if the ajax post is successful.

Our javascript file, chat.js, is now complete and should look like this: http://www.redward.org/public/projects/chat/chat.txt

Next step ahead, open up chat-msgs.php (create it if you haven\'t already) and begin by adding these lines to the file:


If the file is called withour $_POST, it will die and nothing will be returned. The mess_output variable is set to null, else php would show an error while using the code below. The limit variable sets how many messages you want to be shown.

Next up is the getmessages function and the initie to it as well. This is the code:


The function search trough each folder for a maximum of 25 (your limit) hits or 20 folders. It then returns the value found from the files to an array.

The array is printed with a foreach loop together with the mess_output variable like this:


That's all for the chat-msgs.php file. The final result for that file should look like this: http://www.redward.org/public/projects/chat/chat-msgs.phps

Now there's only one file left. Open up chat.php (create it if you haven't already) and add this to the top of the file:


The first piece checks if user and message is set via post, if not, the file return false and dies. The curdate variable is like a shortcut. Instead of writing date two times, we use a variable named curdate.

Next up comes two function, one to change the text so it doesn\'t destroy the page and another for creating the text. This is the code:


The chatsend function is only used so you doesn't have to write the same piece of code twice.

The absolute last thing we're going to do is to add the following code to the file:


The code creates a directory and file automatically if it doesn't exists. If it exists it appends the message to the end of the file.

The file should now look like this: http://www.redward.org/public/projects/chat/chat.phps

The script can be downloaded from http://www.redward.org/public/projects/chat/chat.7z.
A preview of the script is found here: http://www.redward.org/public/projects/chat/