ajax chat analysis and design rui zhao cs5260 2012spg uccs

AJAX Chat Analysis and Design

Rui ZhaoCS5260 2012SPG

UCCS

Rui Zhao All Rights Reserved 2012

What is AJAX Chat?

• A free and fully customizable open source web chat software implemented in JavaScript, PHP and MySQL[1]

– Flash– Ruby

• Chat integrates nicely with phpBB, MyBB, PunBB, SMF, vBulletin and other PHP community software.


What did I do?

• Analyze the chat system, and both server and client will be elaborated in four aspects (table design, infrastructure, collaboration and interface).

• Discuss new features and how to add them to the system.

• Propose problems, especially those in design and codes, accompanied with suggestions about how to solve them.


System Requirements

• Running Environments– Server-Side• PHP >= 4• MySQL >= 4• Ruby >= 1.8 (optional)

– Client-Side• Enabled JavaScript• Enabled Cookies• Flash Plugin >= 9 (optional)


System Requirements

• Developing Environments– Zend Studio for Java and Php script development

on both client and server;– FLEX for client flash development;– MySQL for server database development;– Ruby for server socket development.


Features

Main FeatureDetail

Private messaging-

Multiple/Private channels-

Ignore/Ban and revoke users-

List online/ignored/banned users-

Change username-

Private channels-

Custom settingSuch as BB Code, hyperlinks, line breaks.

Possibility to delete messages inside the chat-

Developed with Security as integral part-

Blink window title on new messages-

Show each user’s IP-


Techniques• AJAX

– AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages. [3]

– AJAX uses combinations of • XMLHttpRequest object (to exchange data asynchronously with a server);• JavaScript/DOM (to display/interact with the information);• CSS (to style the data);• XML (often used as the format for transferring data).

Server

1. Process HTTP request;2. Create a response and send data back to the browser.

Browser

Browser

1. Process the returned data using JavaScript;2. Update page content.

An event occurs...

1. Create an XMLHttpRequest object;2. Send HttpRequest.

Internet

Internet


Techniques

• FLEX– Like Flash, Flex creates SWF files

that are rendered by Flash Player. [4]

– However, Flex is primarily a developer's tool

– The way you develop Flex applications is entirely different than the way you develop Flash RIAs. All Flex development is based upon a framework that provides you with reusable and extendable UI components, data retrieval services, event handling functionality and much more.

MXML

Action Script

SWF FileCompile

Developer Web Server

Upload

Customer

Download


Techniques

• FABridge– A new JavaScript library enables developers to

easily integrate Flex applications with Ajax or DHTML code running in the browser. [5]

– Is built with the “don’t repeat yourself” principle in mind.

– With FABridge you can make your ActionScript classes available to JavaScript without any additional coding


Client Infrastructure

HTML

FLEX

SWF

JSP

XML Stream

Action Processor

Request Sender

Setting

Invoke

POST/GET

AJAX

Provide Style

FABridge

FABridge.as

FABridge.js

User

Config

Comment A

Comment B

Comment C

Comment D

Comment E

Comment FComment G

Comment A:AJAX receives XML stream.

Comment B:Update client view.

Comment C:Connection between FlEX and AJAX.

Comment D:Responsible for parsing XML stream and navigating JS instances.

Comment E:Responsible for updating SWF.

Comment F:Process actions performed on HTML.

Comment G:Send Http request to server.

Module

Detail

FABridge

Translate XML stream to ordinary message and update flash on website:1. JSP receives and parses XML

message (AJAX);2. JSP calls methods in ASP to updates

flash on web page (FLEX).

JSP

Responsible for performing user’s actions on web page:1. Receive and parse input actions and

parameters, such as client setting, kicking some one and chat message;

2. Organize standard HTTP GET/POST messages;

3. Send messages to server.


Server Infrastructure

Comment A:From Flash XML Sockets.

Comment B:Functions:1. Define XML sream structure;2. Initialize and start socket;3. Listen socket in MPI;4. Parse XML stream.Class:1. socket\server.conf;2. socket\server.rb.

Comment C:Server config.Class:1. lib\config.php.

Comment D:Functions:1. Manage HTML templates;2. Parse HTML contents.Class:1. lib\class\AJAXChatTemplate.php.

Comment E:Functions:1. Init database connection (parameters are defined in server config);2. Write chat information;3. Query chat information used to update client view.Class:1. lib\class\AJAXChatDataBase.php;2. lib\class\AJAXChatDataBaseMySQL.php.

Comment F:Functions:1. Init request variaty;2. Init session for each request;3. Parse info/command/message request;4. Echo each request through XML stream(AJAX).Class:1. lib\class\AJAXChat.php;2. lib\class\AJAXChatHTTPHeader.php;3. lib\class\AJAXChatString.php.

Comment G:Http socket.

Php Platform

Application

Database Connector Database

Template Management

HTML Templates

Config

Write & Read

Use

Use

Use

Use

Message Processor

echo()

Socket

server.rb

server.conf

socket config

XML Stream $_Request, $_Server

XML Message

Comment B

Comment G

Comment A

Comment E

Comment C

Comment F

Comment D

ModuleDetail

Socket

Listen HTTP requests and decode them to XML stream:1. Server.conf defines parameters of socket, such as

port and IP;2. Server.rb starts socket and port listener, receives

and parses XML stream.

Application

Parse request and write useful data to database, then organize response to request.1. Config.php defines template for request variables;2. Templates are used to generate standard

XML/XHTML stream when organizing response;3. Database connector writes data to database and

query data from database.

Php PlatformSend response.


Suggestions

• Some files’ length is more than 3000 lines, and it will surely decrease the readability and destroy the structure of codes;

• Inadequate code comments, the best ratio of comments to codes is between 1:1 and 2:1;

• In php coding, it is better to use $_Get and $_Post instead of $_Request. In ordinary, $_Request could stands for $_Get. And when $_Get is null, $_Request will refer to $_Post. However, when both $_Get and $_Post exist, who does $_Request refer to? And how to get $_Post by using $_Request now? Therefore, $_Request is a dangerous variable and is not recommended in php coding;


Suggestions• New features suggested:

– Banned time. The system bans a user only for five minutes, and it is not possible to choose a start time and end time for banning;

– No registration entry. The system does not provide an entry to create new users, and there is no table for saving user information. Of course if the chat system is combined with a forum, this will not be the problem. If registration is not allowed for some reasons, the table for user management is still in need.

– Fusion between authority management and role management. The system does not connect each role with an authority by an interface, but by simply putting authority management into role management;

– Whether actions of log in or log out should be recorded into user on-line table or another new table permanently will be further discussed. Since our purpose is to make the chat system a forensic one, maybe any action on-line should be recorded without any exception;

– It is better to retrieve environment information of OS from each client, and we could consider it an evidence of chatting actions. Because probably it is impossible to know who is actually using a specific user name. One of the important information is user name logged on OS.


Reference• [1] https://blueimp.net/ajax/• [2] http://sourceforge.net/apps/mediawiki/ajax-chat/index.php?

title=Main_Page• [3] http://www.w3schools.com/Ajax/ajax_intro.asp• [4] http://learn.adobe.com/wiki/display/Flex/Get+oriented+to+Flex• [5] http://tv.sys-con.com/node/193201

ajax chat analysis and design rui zhao cs5260 2012spg uccs

Documents

server flex

optional rui zhao

flex development

flash ruby chat

users ip rui zhao

client flash development

design rui zhao cs5260

techniques flex