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