Instant Messaging for CSNS

1. Instant Messaging for CSNS Chanwit Suebsureekul Advisor: Dr. Chengyu Sun

2. Outline • Introduction • Demo • Technologies • Design and Implementation • Evaluation • Conclusion

3. Introduction • CSNS: Computer Science Network Services • Instant Messaging • Real-time communication • Contact list • Online status

4. Objectives • Encourage the use of CSNS • Encourage interaction among members of the CS department • Students, instructors, staff, and alumni • Improve student learning

5. 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. Technologies • Server Side • J2EE, Spring Framework, Hibernate, Pushlet • Client Side • HTML, CSS, DOM, JavaScript, Ajax, Drag & Drop API, Pushlet

7. 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. 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. Pushlet: Stream Mode • Use a single persistent connection Client Pushlet Publisher msg 1 msg 1 msg 2 msg 2 msg 3 msg 3 msg N msg N

10. Pushlet: Poll Mode • Periodically poll the server for new information Client Pushlet Publisher msg 1 msg 2 msg 1-2 poll interval msg 3 poll interval msg 3

11. Pushlet: Pull Mode • The server keeps the connection open until new data is available Client Pushlet Publisher msg 1 msg 2 msg 1-2 msg 3 msg 3 heartbeat

12. Design and Implementation:System Architecture Server Front Controller Client Ajax request Pushlet Client API IM Event IM Event Pushlet Framework im-pushlet.js XML response IMCommandController IMManager … Pushlet Core im-ui.js DB (Model) JavaBeans User

13. 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

14. IM Event: Client • Map of the response XML attributes • Must have the p_event attribute <pushlet> <event p_event=“im-create-group-ack”im-group-id=“yyyy” im-group-name=“CS320” /> </pushlet>

15. Pushlet Client API IM Event im-pushlet.js im-ui.js im-ui.js 2 1 3 5 6 4 8 9 7 12 • Interact with users • Window • Dialog Box • Drag & Drop API • Move • Resize 10 11 13 15 14

16. 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 • setDialogButtonCaption( dialog, type, caption ) • setDialogButtonFunction( dialog, type, function ) icon button content

17. Pushlet Client API IM Event im-pushlet.js im-ui.js 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

18. Pushlet Client API IM Event im-pushlet.js im-ui.js Pushlet Client API • Create Ajax XMLHttpRequest • Send request • Capture XML response • Convert XML to IM Event

19. Front Controller IM Event Pushlet Framework IMCommandController IMManager … Pushlet Core (Model) JavaBeans Front Controller • MVC Framework • Intercept request • Preliminary input validation • Convert request to IM Event

20. Front Controller IM Event Pushlet Framework IMCommandController IMManager … DB Pushlet Core (Model) JavaBeans Model Classes • POJOs (Plain Old Java Objects) • Include: • Buddy • Group • GroupChat • AddBuddyNotification • Etc. • Mapped to database tables • Hibernate

21. Front Controller IM Event Pushlet Framework IMCommandController IMManager … Pushlet Core (Model) JavaBeans IMCommandController • Process IM Event • Take various actionsbased on event type • Input validation • Security check

22. Front Controller IM Event Pushlet Framework IMCommandController IMManager … Pushlet Core (Model) JavaBeans IMManager • Service Manager • Singleton pattern • Application Environment • Font • Emoticon • Keep track of: • Active users & online status • Group chats & members

23. IM Protocol (1) • IM Events are sent back and forth • Control the communication and data synchronization • Define 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. 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. 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. 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. 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. 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. Cross-browser Issues • Target browsers • IE • Firefox • IE: Combo Box Bug • Firefox: Blinking Cursor Bug

30. Combo Box Bug • z-index: Stack level of elements in HTML page z-index = 2 z-index = 1 • Workaround • Transparent IFRAME

31. 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 • Workaround 1. Wrap the text in a div whose style=overflow:auto; 2. Set the display to “none”, delay, set the display to “block”

32. Blinking Cursor Bug (2) <div id="myWin" style="overflow:auto;"> <textarea….> </div> 1. 2. function fixCursorBug() { var myWin = document.getElementById('myWin'); if (myWin.style.display != "none") { myWin.style.display = "none"; setTimeout("fixCursorBug()", 10); } else { myWin.style.display = "block"; } }

33. Evaluation • Deployment System • OS: Red Hat Enterprise Linux AS 3 • Servlet Container: Apache Tomcat 5.5 • DBMS: PostgreSQL 8.2 • Feature Testing • Performance Testing

34. Feature Testing (1)

35. 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. Performance Testing (1) • JMeter • Generate request • Capture response • Does not execute JavaScript • Can JMeter test Ajax? • Manual code inspection • Proxy Recording • Asynchronous issue

37. 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. Performance Testing (3)

39. Performance Testing (4)

40. Conclusion • Web application that provides the look and feel of a conventional GUI application • Add IM service to CSNS • Support at least 200 simultaneous users

41. Q & A Questions?

42. 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/>.