COMP4021 Lab 7 Chat System

Overview

In this lab, you need to implement a chat system using Javascript and PHP
1. Implementation of the server side
  - 1.1. Handling user login
  - 1.2. Adding a message to the chat room
  - 1.3. Handling requests from the client side
2. Implementation of the client side
  - 2.1. Handling user login
  - 2.2. Sending a message to the server
  - 2.3. Getting messages from the server
    - 2.3.1. Using AJAX technique to get XML data
    - 2.3.2. Displaying and updating chat message
The starting code, chatroom.zip, is given to you.

Basic idea

Getting Started

Apache Server Setup

Using Computers in Lab 4210

Due to installation restrictions in the teaching lab, you have to use Virtual PC to install and run your Apache server
To work with the pre-installed Virtual PC for the lab:
- Copy D:\image\comp4021.vmc and D:\image\comp4021.vhd to D:\temp
- Double-click on comp4021.vmc in D:\temp to start the Virtual PC
- Wait for the Virtual PC to boot up,We will work inside the Virtual PC after it has booted up
Download the right WAMP server for php through here. Install it on your virtual machine.
After installation, start the Wamp server.
Notice that, if you are running Skype, the wamp server cannot work correctly. So please stop Skype, or any applications that might be occupying port 80. A post discussing this issue is here.
The copying and booting up of virtual PC is time-consuming. It is recommended to use your own computer.

Using your own computer

Windows system
- Download the right WAMP server for php through here. Install it.
- After installation, start the Wamp server.
- Notice that, if you are running Skype, the wamp server cannot work correctly. So please stop Skype, or any applications that might be occupying port 80. A post discussing this issue is here.
- Or, you can download and install XAMPP server.
Mac OS X
- Using command line to enable the bulit-in Apache Web Server
- Or, you can download and install XAMPP server for Mac

In this lab, we are using XAMPP server for demonstration
Copy the file helloworld.php here to htdocs directory under where you install your XAMPP server
Make your browser point to this location, http://localhost/helloworld.php
- You should see a message 'Hello World' in your browser
For this lab you can use the chatroom starting files by extracting the files and putting them into the htdocs directory. For WAMP server, you can put them into www directory

Implementation

Here is the basic interface of the chat system developed in this lab:
The window is divided into two frames
The upper frame displays the current messages inside the chat room. The upper frame doesn't look like this, just for demonstration. We are using SVG to display, similiar to project2.
The lower frame displays the interface for login (login.html) or message input (client.php)
You need to first provide a user name in order to enter the chat room in the login page (login.html)
The chat room area will be updated immediately if you enter a message in the message input page
The basic flow of the whole operation is:
- Step 1 - Load the main page, chatroom.html
- Step 2 - After entering the username in login.html, the name is sent to login.php and the browser is redirected to client.php
- Step 3 - The user enters a message in client.php, the message is sent to add_message.php for processing in the server

Information Flow

Here is an illustration of the flow of information for the system
Here is the detailed flow of information among message.php and server.php

1. Implementation of the Server Side

There are three files mainly responsible for handling the operations in the server side
These files are login.php, add_message.php and server.php
Because they are designed to be used for server side operations only, the output from these files are not for displaying in the client side, i.e. these files are invisible from the user's point of view
Note that we could have combined both the server operations and client display together in one file
However, in this lab, we choose to use separate files for server-side operations and client-side display, so that you can understand the system easily

1.1. login.php - Handling user login

After the user enters a name in login.html, the name will be sent to this file as form data
The purpose of this php script is to set the value of this user name into a cookie
This can be easily done by calling the setcookie function in php, for example,
```
// Transfer from form data into cookie
setcookie("name", $_POST["name"]);
```
The above code sets the value from the form data "name" to a cookie with the same name
After setting the cookie, every page requested by the client in the same session can also access this cookie, i.e. we can retrieve the user name in another php script, such as add_message.php
After setting the cookie, the page is redirected to client.php, which is the message input page for the user
This can be done by a Location HTTP header command, for example,
```
header("Location: client.php");
```

1.2. add_message.php - Adding a message to the chat room

This php script is responsible for updating the content of our chat room
The messages inside the chat room are stored in a single XML file called chatroom.xml located in the server
When it receives the input coming from client.php, it will add the new message to the end of the XML file
A new message consists of two values: name and message content

The following format is used for a message in the XML file

<message name="... name here ...">... message content here ...</message>

You need to add the code for adding a message to the XML file in this lab
Here is the content of XML file chatroom.xml for the chat messages in the interface figure above
The name is retrieved from the cookie set in login.php and the content is retrieved from form data
To open an XML file, you can use the following:
```
$xmlh->openFile();
```

Then we can add a new message element to the messages group by:

// Get the 'messages' element as the current element
$messages_element = $xmlh->getElement("messages");

// Create a 'message' element for each message
$message_element = $xmlh->addElement($messages_element, "message");

Then you can add the name and the text message:

// Add the name
$xmlh->setAttribute($message_element, "name", $name);

// Add the content of the message
$xmlh->addText($message_element, $message);

Remember to save it:
```
$xmlh->saveFile();
```
Again, after updating the chatroom.xml, the page is redirected back to client.php for the next message input

1.3. server.php - Handling requests from the client side

This file is used as the server connection for message.php
The main purpose of this file is to output the chatroom messages from chatroom.xml to message.php
When this file is requested by the client, the output is not immediately sent
Instead, the output will be sent only if there is any change in the file chatroom.xml
Therefore, the php script may run for a long time if there is no change in the chat room
We need to set the maximum execution time for the script because a php script cannot run forever in the server by default
Using the following code, we can set the maximum execution time to be 60 seconds
```
set_time_limit(60);
```
Then we let a php script to run at most 30 seconds before sending the output even if the content is not changed
The file size of the XML file chatroom.xml will be obtained from the request from message.php (discussed later)
After detecting a change of file size for chatroom.xml, we need to send the XML output
The JavaScript code in message.php finds the new messages in the XML output and then displays the messages in the Flash area

2. Implementation of the Client Side

In the client side, the user can see the output of these four files:
- login.html
- client.php
- message.php
They are mainly responsible for accepting the user input and displaying the chatroom messages
After the user has entered data in a form, the data will be sent to one of the php scripts located in the server

2.1. login.html - Handling user login

This is a very simple form which accepts only one value, the user name
This user name will be sent to login.php for processing in the server

2.2. client.php - Sending a message to the server

This is the main user input of the chat room
The input from this form is sent to add_message.php so that the content of chatroom.xml can be updated

2.3. message.php - Getting messages from the server

This is the chat room display of the system
In this lab, we use AJAX techniques to handle the request and response, i.e. we send request to the server and process the response using JavaScript

2.3.1. Using AJAX techniques to get XML data

AJAX stands for Asynchronous JavaScript and XML
AJAX is asynchronous which means data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page
Therefore the entire web page does not have to be reloaded when new data is requested from the server
In message.php we have a function getUpdate() which is used for sending a HTTP request to server.php
In getUpdate(), we need to create a HTTP request object

2.3.2. Displaying and updating chat message

In function updateChat(), a for-loop is used to scan through all message nodes inside the DOM tree
For example, if there are two new messages, like this:
```
Bob: Welcome to the chat system!
Alice: Good Morning
```
Then the DOM tree looks like this:

Submission

This work is the start of your assignment 3
It is essential that you complete it, and keep a copy of it for further development