instant messaging for csns chanwit suebsureekul advisor: dr. chengyu sun
Post on 20-Dec-2015
221 views
TRANSCRIPT
Instant Messaging for CSNS
Chanwit Suebsureekul
Advisor: Dr. Chengyu Sun
2
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Outline
IntroductionDemoTechnologiesDesign and ImplementationEvaluationConclusion
3
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Introduction
CSNS: Computer Science Network Services
Instant Messaging Real-time communication Contact list Online status
4
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Objectives
Encourage the use of CSNSEncourage interaction among members of
the CS department Students, instructors, staff, and alumni
Improve student learning
5
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Demo
http://cs3.calstatela.edu:4046/csns/
Set user information Set online status Set personal message
Converse Start private conversation Start group conversation
Invite buddy Leave
Send message Send emoticon Set font
Manage contact list Manage group
Create group Rename group Delete group
Manage buddy Add buddy Add people from class Remove buddy Move buddy to group View buddy’s profile Block buddy Unblock buddy
6
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Technologies
Server Side J2EE, Spring Framework, Hibernate, Pushlet
Client Side HTML, CSS, DOM, JavaScript, Ajax, Drag &
Drop API, Pushlet
7
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Drag & Drop API
JavaScript library that adds drag & drop functionality to web pages
Cross-browser compatible Usage:
Basis for creating windows and dialog boxes in the project
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
8
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Pushlet
What’s Comet? Open-source Comet implementation for the Java
platform Publish/Subscribe framework
Subscribe to a subject Get notified when new data is published for that subject
Three modes of operation Stream mode, Poll mode, and Pull mode
9
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Pushlet: Stream Mode
Client Pushlet Publisher
msg 2
msg 2msg 3
msg 3
msg N
msg N
msg 1
msg 1
Use a single persistent connection
10
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Pushlet: Poll Mode
Client Pushlet Publisher
msg 1
msg 2
msg 1-2poll interval
poll interval
msg 3
msg 3
Periodically poll the server for new information
11
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Pushlet: Pull Mode
Client Pushlet Publisher
msg 1
msg 2
msg 1-2
msg 3
msg 3
heartbeat
The server keeps the connection open until new data is available
12
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Design and Implementation:System Architecture
Client
Server
DB
Pushlet Framework
Front Controller
IMCommandController
(Model)JavaBeans
IMManager
Pushlet Core
…
Pushlet Client API
im-pushlet.js
im-ui.js
Ajax request
XML response
IM Event
User
IM Event
13
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Event: Server
Map of the request query strings Must have the p_event parameter
http://cs3.calstatela.edu:4046/csns/pushlet.srv?p_event=im-create-group &p_id=xxxx&im-group-name=CS320
Key Valuep_event im-create-group
p_id xxxx
im-group-name
CS320
14
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Event: Client
Map of the response XML attributes Must have the p_event attribute
Key Value
p_event im-create-group-ack
im-group-id yyyy
im-group-name CS320
<pushlet> <event p_event=“im-create-group-ack” im-group-id=“yyyy” im-group-name=“CS320” /></pushlet>
15
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
im-ui.js
32
1
4 6
7 12
1314
15
5
8
9
10
11
Interact with users Window Dialog Box
Drag & Drop API Move Resize
Pushlet Client API
im-pushlet.js
im-ui.js
IM Event
16
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
im-ui.js: Dialog Box
createDialogWindow( w, h, title, content, button, icon ) w: width h: height title: text on the title bar content: text or HTML code button: DLG_OKOnly, DLG_OKCancel, DLG_YesNoCancel, DLG_YesNo icon: DLG_Critical, DLG_Question, DLG_Exclamation, DLG_Information, DLG_NoIcon
icon contentbutton
setDialogButtonCaption( dialog, type, caption ) setDialogButtonFunction( dialog, type, function )
17
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
im-pushlet.js
Intermediary between UI and Pushlet API Client Server
Gather input from window & dialog box Basic input validation Generate query string
Server Client Process IM Event
Pushlet Client API
im-pushlet.js
im-ui.js
IM Event
18
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Pushlet Client API
Create Ajax XMLHttpRequest Send request Capture XML response Convert XML to IM Event
Pushlet Client API
im-pushlet.js
im-ui.js
IM Event
19
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Front Controller
MVC Framework Intercept request Preliminary input validation Convert request to IM Event
Pushlet Framework
Front Controller
IMCommandController
(Model)JavaBeans
IMManager
Pushlet Core
…
IM Event
20
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Model Classes
POJOs (Plain Old Java Objects) Include:
Buddy Group GroupChat AddBuddyNotification Etc.
Mapped to database tables Hibernate
Pushlet Framework
Front Controller
IMCommandController
(Model)JavaBeans
IMManager
Pushlet Core
…
IM Event
DB
21
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IMCommandController
Process IM Event Take various actions
based on event type Input validation Security check
Pushlet Framework
Front Controller
IMCommandController
(Model)JavaBeans
IMManager
Pushlet Core
…
IM Event
22
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IMManager
Service Manager Singleton pattern
Application Environment Font Emoticon
Keep track of: Active users & online status Group chats & members
Pushlet Framework
Front Controller
IMCommandController
(Model)JavaBeans
IMManager
Pushlet Core
…
IM Event
23
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (1)
IM Events are sent back and forthControl the communication and data
synchronizationDefine standard syntax of IM Event
Ex. im-create-group( p_id, im-group-name ); im-create-group-ack( im-group-id, im-group-name );
24
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (2)
join-listen( im-signin-status ); join-listen-ack( p_id, im-user-id, im-username, im-personal-message, im-font-name,
im-font-size, im-font-color, im-font-bold, im-font-italic, im-font-underline, im-signin-status );
leave( p_id ); leave-ack( p_reason ); im-get-user-info( p_id, im-user-id ); im-get-user-info-ack( im-user-id, im-username, im-personal-message, im-status,
im-listed, im-blocked, im-group-id, im-email, im-font-name, im-font-size, im-font-color, im-font-bold, im-font-italic, im-font-underline );
im-change-status( p_id, im-to-status ); im-change-status-ack(); im-status-changed( im-user-id, im-from-status, im-to-status ); im-change-pm( p_id, im-personal-message ); im-change-pm-ack(); im-pm-changed( im-user-id, im-personal-message );
25
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (3)
im-change-font( p_id, im-font-name, im-font-size, im-font-color, im-font-bold,im-font-italic, im-font-underline );
im-change-font-ack(); im-font-changed( im-user-id, im-font-name, im-font-size, im-font-color, im-font-bold,
im-font-italic, im-font-underline ); im-get-classes-enrolled( p_id ); im-get-classes-enrolled-ack( im-class-list ); im-get-users-from-class( p_id, im-class-id ); im-get-users-from-class-ack( im-class-id, im-class-code, im-user-list ); im-add-buddy( p_id, im-username, im-group-id ); im-add-buddy-ack( im-user-id, im-username ); im-add-buddies( p_id, im-user-list, im-group-id ); im-add-buddies-ack(); im-get-add-buddy-notifications( p_id ); im-get-add-buddy-notifications-ack(); im-add-buddy-notification-received( im-user-id, im-username );
26
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (4)
im-reply-add-buddy-notification( p_id, im-user-id, im-block-buddy, im-add-buddy ); im-reply-add-buddy-notification-ack(); im-remove-buddy( p_id, im-user-id, im-block-buddy ); im-remove-buddy-ack( im-user-id ); im-remove-buddies( p_id, im-user-list, im-block-buddy ); im-remove-buddies-ack(); im-block-buddy( p_id, im-user-id ); im-block-buddy-ack( im-user-id ); im-unblock-buddy( p_id, im-user-id ); im-unblock-buddy-ack( im-user-id ); im-create-group( p_id, im-group-name ); im-create-group-ack( im-group-id, im-group-name ); im-rename-group( p_id, im-group-id, im-group-name ); im-rename-group-ack( im-group-id, im-group-name ); im-delete-group( p_id, im-group-id ); im-delete-group-ack( im-group-id );
27
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (5)
im-move-buddy-to-group( p_id, im-user-id, im-group-id ); im-move-buddy-to-group-ack( im-user-id, im-group-id ); im-buddy( p_id, im-username ); im-buddy-ack( im-user-id, im-username, im-personal-message, im-status, im-listed,
im-blocked, im-group-id, im-email, im-font-name, im-font-size, im-font-color, im-font-bold, im-font-italic, im-font-underline );
im-send-individual-message( p_id, im-user-id, im-message ); im-send-individual-message-ack(); im-individual-message-received( im-user-id, im-username, im-message ); im-create-group-chat( p_id ); im-create-group-chat-ack( im-group-chat-id ); im-invite-buddy( p_id, im-group-chat-id, im-username ); im-invite-buddy-ack(); im-invite-buddies( p_id, im-group-chat-id, im-user-list ); im-invite-buddies-ack(); im-invitation-received( im-group-chat-id, im-user-id, im-username );
28
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
IM Protocol (6)
im-join-group-chat( p_id, im-group-chat-id ); im-join-group-chat-ack( im-group-chat-id, im-user-list ); im-joined-group-chat( im-group-chat-id, im-user-id, im-username ); im-leave-group-chat( p_id, im-group-chat-id ); im-leave-group-chat-ack(); im-left-group-chat( im-group-chat-id, im-user-id ); im-send-group-message( p_id, im-group-chat-id, im-message ); im-send-group-message-ack(); im-group-message-received( im-user-id, im-group-chat-id, im-message ); refresh( p_wait ); refresh( p_id ); refresh-ack(); nack( p_reason ); abort( p_reason ); im-not-ack( p_reason ); im-error( p_reason );
29
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Cross-browser Issues
Target browsers IE Firefox
IE: Combo Box BugFirefox: Blinking Cursor Bug
30
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Combo Box Bug
z-index: Stack level of elements in HTML page
z-index = 1z-index = 2
Workaround Transparent IFRAME
31
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Blinking Cursor Bug (1)
Blinking cursor fails to appear in text fields A div element has scrollbars and the input text
element in another div element overlaps the first div element
Workaround1. Wrap the text in a div whose style=overflow:auto;
2. Set the display to “none”, delay, set the display to “block”
32
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Blinking Cursor Bug (2)
<div id="myWin" style="overflow:auto;">
<textarea….>
</div>
function fixCursorBug() {
var myWin = document.getElementById('myWin');
if (myWin.style.display != "none") {
myWin.style.display = "none";
setTimeout("fixCursorBug()", 10);
} else {
myWin.style.display = "block";
}
}
2.
1.
33
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Evaluation
Deployment System OS: Red Hat Enterprise Linux AS 3 Servlet Container: Apache Tomcat 5.5 DBMS: PostgreSQL 8.2
Feature TestingPerformance Testing
34
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Feature Testing (1)
Machine OS Browser Version
1 Windows XP Service Pack 1
IE 6.0
Firefox 2.0.0.11
2 Windows Vista
IE 7.0
Firefox 1.5.0.7
Opera 9.25
3 Windows XP Service Pack 2
IE 6.0
4 Windows XP Service Pack 2
IE 6.0
Firefox 2.0.0.3
35
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Feature Testing (2)
Opera Does not support oncontextmenu event Does not fully support onunload event Slow
Recommended browser IE 6.0+ Firefox 1.5+
36
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Performance Testing (1)
JMeter Generate request Capture response
Does not execute JavaScript
Can JMeter test Ajax? Manual code inspection Proxy Recording Asynchronous issue
37
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Performance Testing (2)
New user every 5 seconds Go to home page Log in to CSNS Sign in to IM service 2 users form a pair
Send a twenty-character message every 5 seconds
38
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Performance Testing (3)
Load Test (500 users)
0
4000
8000
12000
16000
1 5 9 13 17 21 25 29 33Time (minute)
Throughput (tpm)
Response Time (ms)
39
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Performance Testing (4)
Load Test (200 users)
02000
40006000
800010000
1200014000
16000
1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61Time (minute)
Throughput (tpm)
Response Time (ms)
40
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Conclusion
Web application that provides the look and feel of a conventional GUI application
Add IM service to CSNSSupport at least 200 simultaneous users
41
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
Questions?
Q & A
42
Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS
References
J.A. van den Broecke, "Pushlets Stream Mode." Pushlets Slides. Just Objects B.V. 24 Feb. 2008. <http://www.pushlets.com/presentation/index.html>.
Walsh, Bill. "Bug 167801 - Cursor (caret) sometimes fails to appear in input text fields (shown/painted in wrong widget)." Bugzilla@Mozilla - Main Page. 10 September 2002, 13:56 PST. mozilla.org. 24 Feb. 2008. <https://bugzilla.mozilla.org/show_bug.cgi?id=167801>.
Zorn, Walter. "JavaScript: DHTML API, Drag & Drop for Images and Layers." Web Development: Advanced DHTML, JavaScript. 2005. 22 Feb. 2008. <http://www.walterzorn.com/dragdrop/dragdrop_e.htm>.
"Apache JMeter." Apache JMeter – Main Page. Apache Software Foundation. 27 Feb. 2008. <http://jakarta.apache.org/jmeter/>.