ajax chat analysis and design rui zhao cs5260 2012spg uccs
Post on 26-Dec-2015
226 Views
Preview:
TRANSCRIPT
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.
Rui Zhao All Rights Reserved 2012
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.
Rui Zhao All Rights Reserved 2012
System Requirements
• Running Environments– Server-Side• PHP >= 4• MySQL >= 4• Ruby >= 1.8 (optional)
– Client-Side• Enabled JavaScript• Enabled Cookies• Flash Plugin >= 9 (optional)
Rui Zhao All Rights Reserved 2012
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.
Rui Zhao All Rights Reserved 2012
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-
Rui Zhao All Rights Reserved 2012
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
Rui Zhao All Rights Reserved 2012
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
Rui Zhao All Rights Reserved 2012
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
Rui Zhao All Rights Reserved 2012
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.
Rui Zhao All Rights Reserved 2012
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.
Rui Zhao All Rights Reserved 2012
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;
Rui Zhao All Rights Reserved 2012
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.
Rui Zhao All Rights Reserved 2012
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
top related