+ All Categories
Transcript
Page 1: Instant Messaging for CSNS

Instant Messaging for CSNS

Chanwit Suebsureekul

Advisor: Dr. Chengyu Sun

Page 2: Instant Messaging for CSNS

2

Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS

Outline

IntroductionDemoTechnologiesDesign and ImplementationEvaluationConclusion

Page 3: Instant Messaging for CSNS

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

Page 4: Instant Messaging for CSNS

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

Page 5: Instant Messaging for CSNS

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

Page 6: Instant Messaging for CSNS

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

Page 7: Instant Messaging for CSNS

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

Page 8: Instant Messaging for CSNS

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

Page 9: Instant Messaging for CSNS

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

Page 10: Instant Messaging for CSNS

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

Page 11: Instant Messaging for CSNS

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

Page 12: Instant Messaging for CSNS

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

Page 13: Instant Messaging for CSNS

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

Page 14: Instant Messaging for CSNS

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>

Page 15: Instant Messaging for CSNS

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

Page 16: Instant Messaging for CSNS

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 )

Page 17: Instant Messaging for CSNS

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

Page 18: Instant Messaging for CSNS

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

Page 19: Instant Messaging for CSNS

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

Page 20: Instant Messaging for CSNS

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

Page 21: Instant Messaging for CSNS

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

Page 22: Instant Messaging for CSNS

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

Page 23: Instant Messaging for CSNS

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 );

Page 24: Instant Messaging for CSNS

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 );

Page 25: Instant Messaging for CSNS

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 );

Page 26: Instant Messaging for CSNS

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 );

Page 27: Instant Messaging for CSNS

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 );

Page 28: Instant Messaging for CSNS

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 );

Page 29: Instant Messaging for CSNS

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

Page 30: Instant Messaging for CSNS

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

Page 31: Instant Messaging for CSNS

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”

Page 32: Instant Messaging for CSNS

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.

Page 33: Instant Messaging for CSNS

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

Page 34: Instant Messaging for CSNS

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

Page 35: Instant Messaging for CSNS

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+

Page 36: Instant Messaging for CSNS

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

Page 37: Instant Messaging for CSNS

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

Page 38: Instant Messaging for CSNS

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)

Page 39: Instant Messaging for CSNS

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)

Page 40: Instant Messaging for CSNS

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

Page 41: Instant Messaging for CSNS

41

Chanwit Suebsureekul - California State University, Los Angeles – IM for CSNS

Questions?

Q & A

Page 42: Instant Messaging for CSNS

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


Top Related