creating a websocket-chat-application with jetty embedded - techcamp 2014

Websocket-Chat-Application

WHO AM I?

Minh Nguyen Vo Cao

tech lead @ CENT Technology

koding: minhnvc

AGENDA

1. Real-time technologies

2. Jetty Embedded

3. WebSocket with Jetty

4. Build a chat application

5. Performance

CHAT APPLICATIONS

FIRST: A STORYOn a sunny morning …

The biz girl told you …

“We need to develop a chat application

like Facebook”

REAL-TIME WEB TECHNOLOIES

Do you have any news for me?

No

Do you have any news for me?

No

Do you have any news for me?

No!!!!@#$%

AJAX POLLING

• The requested webpage executes JS which requests to server at regular intervals (e.g. 0.5 seconds).

• The server calculates each response and sends it back, just like normal http traffic.

Do you have any news for me?

…

…

Here you are!

“#%#$%@@!”

Anything else?

…

AJAX LONG-POLLING

• The requested webpage executes JS which requests a file from the server.

• The server does not immediately respond with the requested information but waits until there's new information available.

• The client receives the new information and immediately sends another request to the server, re-starting the process.

Good morning!

You have new message

You have new email

Hey, What are you doing ?

HTML5 WEBSOCKETS

• The requested webpage executes JS which opens a connection with the server.

• The server and the client can now send each other messages when new data is available.

POLLING VS LONG-POLLING VS WEBSOCKET

… Ajax Polling Ajax Long-polling WebSocket

Browser support

Supported by the most of currently

used browsers

Supported by the most of currently

used browsers

IE 10+,… (caniuse.com)

Server-loading

It repeatedly calculates and responses a lot

of requests from clients.

Takes little of CPU resources,

but creates idle processes.

The best possible

solution. No loops, only

take CPU/memory

per client action.

Client-loading

Natively implemented

in the browser

Natively implemented

in the browser

Natively implemented

in the browser

TimelinessCan adjust the

interval settings.

Near real-time True real-time

JETTY EMBEDDED

• Jetty provides a Web server and javax.servlet container plus support for WebSocket.

• Standalone

WHY ??

Lightweight, mini, pluggable, …

And JAV is awesome!Sorry, JAVA

CREATE A SERVER

Don't deploy your application in Jetty, deploy Jetty in your application

Your app

HTTP HTTP …

WS WS …

java –jar myapp.jar

WEBSOCKET WITH JETTY

• Require Java 7

WEBSOCKET ANNOTATIONS

@WebSocket

@OnWebSocketConnect

@OnWebSocketClose

@OnWebSocketMessage

Chat Application

HTTP/ JSON API

WSfor Global Chat

WSfor Private

Chat

getLatestMsg()

getFriendList()

checkUserStatus()

Global Chat

Chat Application

HTTP/ JSON API

WSfor Global Chat

WSfor Private

Chat

ws://

ABC

ws://

DEF

ws://

XYZ

Make a simple chat (global)

Private Chat

WSfor Private Chat

ABC (mobile)

ws://?chanel=ABC&session=1

ABC (web)

XYZ

ws://?chanel=ABC&session=2

ws://?chanel=XYZ&session=1

{"ABC":[1,2],"XYZ":[1]}

ws.send(“A

BC||Chao ban!”)

;

ws.send(“XYZ||hi!”);

DEMO PRIVATE CHAT

FRIEND-LIST & STATUS

Chat Application

HTTP/ JSON API

ABC

User sessions

{"ABC":[1,2],"XYZ":[1]}

ONLINE - OFFLINE

Chat Application

WS for Private Chat

ABC

DEF

XYZ

XYZ is offline

XYZ is offline

PERFORMANCE !?

ONE MORE THING

• Your application feel like a Superman, if all your data is located on the memory (Local Caching is the best solution).

• And don’t read HDD too much.

THANK YOU!