PHP Ajax Chat Tutorial


Jack Herrington has put together a starter tutorial for building a web-based chat application using PHP, MySQL, DHTML, Ajax, and the Prototype.js library. This by no means is a finished or polished application, but is intended to be a starter-kit for a chat application.

An interesting thing to note is that the tutorial does a good job of showing a potential pitfall of polling in Ajax applications. Polling can become a performance issue very quickly, especially if the amount of data returned by each request is ever increasing. The tutorial does provide a solution to help with performance along with all the required source code to build this starter application.

Suggestions the author has for extending this application are:

  • Track users: Put a list of the people actively engaged in the conversation alongside the chat. Doing so lets people know who is at the party and when they come and go.
  • Allow multiple conversations: Allow multiple conversations on different topics to go on simultaneously.
  • Allow emoticons: Translate character groupings such as :-) into the appropriate image of a smiley face.
  • Use URL parsing: Use regular expressions in the client-side JavaScript code to find URLs and turn them into hyperlinks.
  • Handle the Enter key: Instead of having an Add button, watch for users pressing the Enter or Return key by hooking onto the onkeydown event in the textarea.
  • Show when a user is typing: Alert the server when a user has started to type, so that other participants can see that a reply is pending. This lessens the perception that the conversation has died off to a minimum if you have slow typists.
  • Limit the size of a posted message: Another way to keep the conversation going is to keep messages small. Limit the maximum number of characters in the textarea —again by trapping onkeydown —to help speed up conversations.

Click here to check out the tutorial and download the source code.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.