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 STORY
On 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 s...
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 immedia...
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...
POLLING VS LONG-POLLING VS
WEBSOCKET
… Ajax Polling
Ajax Long-
polling
WebSocket
Browser support
Supported by the
most of currently
used browsers
Supported by ...
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
WS
for Global Chat
WS
for Private Chat
getLatestMsg()
getFriendList()
checkUserStatus()
Global Chat
Chat Application
HTTP/ JSON API
WS
for Global Chat
WS
for Private Chat
ABC
DEF
XYZ
Make a simple chat (global)
Private Chat
WS
for Private Chat
ABC (mobile)
ws://?chanel=ABC&session=1
ABC (web)
XYZ
ws://?chanel=ABC&session=2
ws://?ch...
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
PERFORMANCE !?
ONE MORE THING
• Your application feel
like a Superman, if all
your data is located on
the memory (Local
Caching is the be...
THANK YOU!

Creating a WebSocket-Chat-Application with Jetty Embedded - Techcamp 2014
Upcoming SlideShare
Loading in …5
×

Creating a WebSocket-Chat-Application with Jetty Embedded - Techcamp 2014

2,979
-1

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,979
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Creating a WebSocket-Chat-Application with Jetty Embedded - Techcamp 2014

  1. 1. Websocket-Chat-Application
  2. 2. WHO AM I? Minh Nguyen Vo Cao tech lead @ CENT Technology koding: minhnvc
  3. 3. AGENDA 1. Real-time technologies 2. Jetty Embedded 3. WebSocket with Jetty 4. Build a chat application 5. Performance
  4. 4. CHAT APPLICATIONS
  5. 5. FIRST: A STORY On a sunny morning … The biz girl told you … “We need to develop a chat application like Facebook”
  6. 6. REAL-TIME WEB TECHNOLOIES
  7. 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. 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. 9. Do you have any news for me? … … Here you are! “#%#$%@@!” Anything else? …
  10. 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. 11. Good morning! You have new message You have new email Hey, What are you doing ?
  12. 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. 13. POLLING VS LONG-POLLING VS WEBSOCKET
  14. 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
  15. 15. JETTY EMBEDDED • Jetty provides a Web server and javax.servlet container plus support for WebSocket. • Standalone
  16. 16. WHY ?? Lightweight, mini, pluggable, … And JAV is awesome! Sorry, JAVA
  17. 17. CREATE A SERVER
  18. 18. Don't deploy your application in Jetty, deploy Jetty in your application
  19. 19. Your app HTTP HTTP … WS WS … java –jar myapp.jar
  20. 20. WEBSOCKET WITH JETTY • Require Java 7
  21. 21. WEBSOCKET ANNOTATIONS @WebSocket @OnWebSocketConnect @OnWebSocketClose @OnWebSocketMessage
  22. 22. Chat Application HTTP/ JSON API WS for Global Chat WS for Private Chat getLatestMsg() getFriendList() checkUserStatus()
  23. 23. Global Chat Chat Application HTTP/ JSON API WS for Global Chat WS for Private Chat ABC DEF XYZ
  24. 24. Make a simple chat (global)
  25. 25. 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]}
  26. 26. DEMO PRIVATE CHAT
  27. 27. FRIEND-LIST & STATUS Chat Application HTTP/ JSON API ABC User sessions {"ABC":[1,2],"XYZ":[1]}
  28. 28. ONLINE - OFFLINE Chat Application WS for Private Chat ABC DEF XYZ
  29. 29. PERFORMANCE !?
  30. 30. 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.
  31. 31. THANK YOU! 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×