This document discusses building a real-time chat application using websockets and the Jetty embedded server. It begins with an introduction and agenda. It then covers real-time technologies like AJAX polling, long-polling, and websockets. It discusses the Jetty embedded server and how to create a websocket server with Jetty annotations. It provides an example chat application architecture using HTTP/JSON APIs and websockets for global and private chat. It also discusses maintaining friend lists, user statuses, and performance.

1. Websocket-Chat-Application

2. WHO AM I?
Minh Nguyen Vo Cao
tech lead @ CENT Technology
koding: minhnvc

3. AGENDA
1. Real-time technologies
2. Jetty Embedded
3. WebSocket with Jetty
4. Build a chat application
5. Performance

4. CHAT APPLICATIONS

5. FIRST: A STORY
On a sunny morning …
The biz girl told you …
“We need to develop a chat application
like Facebook”

6. REAL-TIME WEB TECHNOLOIES

7. Do you have any news for me?
No
Do you have any news for me?
No
Do you have any news for me?
No!!!!@#$%

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

9. Do you have any news for me?
…
…
Here you are!
“#%#$%@@!”
Anything else?
…

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

11. Good morning!
You have new message
You have new email
Hey, What are you doing ?

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

13. POLLING VS LONG-POLLING VS
WEBSOCKET

14. … 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
Timeliness
Can adjust the
interval settings.
Near real-time True real-time

16. JETTY EMBEDDED
• Jetty provides a Web server and javax.servlet
container plus support for WebSocket.
• Standalone

17. WHY ??
Lightweight, mini,
pluggable, …
And JAV is awesome!
Sorry, JAVA

18. CREATE A SERVER

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

20. Your app
HTTP HTTP …
WS WS …
java –jar myapp.jar

21. WEBSOCKET WITH JETTY
• Require Java 7

22. WEBSOCKET ANNOTATIONS
@WebSocket
@OnWebSocketConnect
@OnWebSocketClose
@OnWebSocketMessage

23. Chat Application
HTTP/ JSON API
WS
for Global Chat
WS
for Private Chat
getLatestMsg()
getFriendList()
checkUserStatus()

24. Global Chat
Chat Application
HTTP/ JSON API
WS
for Global Chat
WS
for Private Chat
ABC
DEF
XYZ

25. Make a simple chat (global)

26. Private Chat
WS
for 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]}

27. DEMO PRIVATE CHAT

28. FRIEND-LIST & STATUS
Chat Application
HTTP/ JSON API
ABC
User sessions
{"ABC":[1,2],"XYZ":[1]}

29. ONLINE - OFFLINE
Chat Application
WS for Private
Chat
ABC
DEF
XYZ

30. PERFORMANCE !?

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

32. THANK YOU!
