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. Click here to check out the tutorial and download the source code. Ajax and XML: Ajax for chat. Developers talk a lot about community when the term Web 2.0 comes up.
And whether you think it's hype or not, the idea of engaging your customers or readers in an instantaneous conversation about the topics at hand or the products you're selling is pretty compelling. But how do you get there? Can you put a chat box on the same page as your product listing so that your customers don't have to install special software or even Adobe Flash Player? Sure! Turns out, you can do it all with free, off-the-shelf tools such as PHP, MySQL, dynamic HTML (DHTML), Ajax, and the Prototype.js library. Without further ado, let's jump right into the implementation. Logging in The first step in chatting is to have an identity. Listing 1. index.html <html><head><title>Chat Login</title></head><body><form action="chat.php" method="post"> Username: <input type="text" name="username"><input type="submit" value="Login"></form></body></html> In Figure 1, you can see a screenshot of this page.
Figure 1. Back to top <? AJAX Chat Tutorial. Source: DynamicAjax Author: Ryan Smith Download source code - 7 Kb Online Demo Introduction This tutorial will walk you through the step in order to create an AJAX driven web chat program.
This will be a very simple program, but will be expanded upon in future tutorials. Creating the Chat Tables We are going to create two tables for the chat program, but we will only use one for the first part of this tutorial. These tables are just a preleminary setup and will probably change quite a bit through then upcoming parts of these tutorials. <html><head><style type=text/css media=screen></STYLE><script language=JavaScript type=text/javascript></script> Now lets add the rest of the HTML: AJAX Driven Web Chat. Status: Normal We have a header, a paragraph where we can display status, a main div to be used for displaying the chat. Overflow: auto; height: 300px; width: 500px; background-color: #CCCCCC; border: 1px solid #555555; The only real item of interest here is the overflow.