I'm very interested in web development and any new technology that might arise. AJAX is the hottest new buzzword, so I wanted to write a very simple application to do a chat in AJAX. The only thing you need to get this program to work is a webserver that supports PHP, shell access so you can change the file permissions of one file, and a modern web browser.

There's one file here that starts off blank, and that's the chat log. In the code, the file is called "chatlog.txt". Make a blank file, give it the name "chatlog.txt" and give it "read/write" permissions (usually done with "chmod 666 chatlog.txt").

Drop that file, along with the other three files below all in one directory, point your browser at "http://some/path/index.html" and you're done! You'll probably have to customize the code so that it will fit with whatever page you are using.

The only thing to note about the program is that the chatlog is set to have a max of 25 lines, which means you'll only be able to read the last 25 lines of the conversation.

index.html:
<html>

<head>

<title>VSAC: Very Simple Ajax Chat</title>

<script language="JavaScript" type="text/javascript">
    //Gets the browser specific XmlHttpRequest Object
    function getXmlHttpRequestObject() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest(); //Not IE
        } // End If
        else if(window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP"); //IE
        } // End Else
        else {
            // Not Supported.
            alert("Your browser doesn't support the XmlHttpRequest object. Use Firefox.");
        } // End Else
    } // End getXMLHttpRequestObject

    //Get our browser specific XmlHttpRequest object.
    var receiveReq = getXmlHttpRequestObject();

    //Initiate the asyncronous request.
    function newMessage() {

        //Start the new asyncronous call.
        if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {

            //True explicity sets the request to asyncronous (default).
            var name    = document.chat.username.value;
            var message = document.chat.message.value;
            var url     = "writeLine.php?username="+name+"&message="+message;
            receiveReq.open("GET", url, true);
            //Set the function that will be called when the XmlHttpRequest objects state changes.
            receiveReq.onreadystatechange = updateLog;
            //Make the actual request.
            receiveReq.send(null);
        } // End If
    } // End newMessage

    //Initiate the asyncronous request.
    function refreshLog() {
        //Start the new asyncronous call.
        if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {

            var rest    = "refreshBuffer.php";
            receiveReq.open("GET", rest, true);
            //Set the function that will be called when the XmlHttpRequest objects state changes.
            receiveReq.onreadystatechange = updateLogNoFocusChange;
            //Make the actual request.
            receiveReq.send(null);
        } // End If
    } // End refreshLog

    //Called every time our XmlHttpRequest objects state changes.
    function updateLog() {
        //Check to see if the XmlHttpRequests state is finished.
        if (receiveReq.readyState == 4) {
            //Set the contents of our span element to the result of the asyncronous call.
            document.chat.log.value     = receiveReq.responseText;
            document.chat.log.scrollTop = document.chat.log.scrollHeight;

            document.chat.message.value = "";
            document.chat.message.focus();
        } // End If
    } // End addLineToLog

    //Called every time our XmlHttpRequest objects state changes.
    function updateLogNoFocusChange() {
        //Check to see if the XmlHttpRequests state is finished.
        if (receiveReq.readyState == 4) {
            //Set the contents of our span element to the result of the asyncronous call.
            document.chat.log.value     = receiveReq.responseText;
            document.chat.log.scrollTop = document.chat.log.scrollHeight;
        } // End If
    } // End addLineToLog

    window.setInterval("refreshLog()", 3000);
</script>

</head>

<body>

<p><b>Very Simple Ajax Chat</b>
<hr>

<form name="chat">

<table border="1">
    <tr><td colspan="2"><textarea cols="80" rows="16" name="log"></textarea></td></tr>
    <tr><td>Name:</td><td><input type="text" name="username" size="50"></td></tr>
    <tr>
        <td>Message:</td>
        <td>
            <input type="text" name="message" size="50">
            <input type="button" NAME="button" value="Send" onClick="javascript:newMessage();">
        </td>
    </tr>
</table>

</form>

</body>
</html>

There's also two PHP files.

refreshBuffer.php: Refreshes everyone's chat window
<?
$chatlog     = "chatlog.txt";

// Takes the entire file and puts it into an array called "fullbuffer"
$fullbuffer = file($chatlog);

foreach ($fullbuffer as $line) {
    echo $line;
} // End Foreach

?>

writeLine.php: Writes a line to the chat buffer and user's chat window
<?
$chatlog     = "chatlog.txt";
$buffer_size = 25;

$username    = $_GET['username'];
$message     = $_GET['message'];

// Takes the entire file and puts it into an array called "fullbuffer"
$fullbuffer = file($chatlog);

// If the full log is 25 lines, remove the oldest line.
if (count($fullbuffer) >= $buffer_size) {
    array_shift($fullbuffer);
} // End If

// Push the newest line.
array_push($fullbuffer, "$username: $message\n");

// Write the new log back to the chatlog file.
$fp = fopen($chatlog, "w");
if (!$fp) die("Opening $chatlog for writing failed!");

foreach ($fullbuffer as $line) {
    fwrite($fp, $line) or die("Can't write");
    echo $line;
} // End Foreach
fclose($fp);

?>


Page Information

  • 7 months ago [history]
  • View page source
  • You're not logged in
  • Tags: ajax code javascript php

Wiki Information

Recent PBwiki Blog Posts