1. CS5220 Advanced Topics in Web Programming Introduction to WebSocket
Chengyu Sun
California State University, Los Angeles

2. HTML5 JavaScript APIs Canvas, SVG, Media, Web Audio
Web Storage, Indexed DB, File
Web Worker, Geolocation …
Web Socket

3. The Need for Real-Time, Two-Way Communication for Web App
Chat and collaboration
Multi-player games
Financial applications

4. The Problem with HTTP Request-Response Model
No response unless there’s a request
Underlying TCP connection is short-lived (even with the keep-alive header)
Good for server/network resource utilization
Bad for constant, real-time communication

5. Workaround (I) Traditional Polling
Client periodically sends requests to the server
Only good for applications that require infrequent updates, e.g. checking for new s or breaking news every few minutes

6. Workaround (II) Long Polling
Client sends a request to server, and server does not respond until there’s new information; upon receiving a response, the client immediately sends another request
Problems: timeouts, header overhead, latency

7. Workaround (III) HTTP Streaming
Client sends a request to server; the server keeps the response open, and sends back new information as part of the same response
Problems
Handling of partial response by browser and network intermediaries
Additional work to interpret the response stream at the application level

8. The Solution: Web Socket
A protocol upgrade/switch after an initial HTTP handshake
Underlying TCP connection remain open
Allow sending/receiving text and binary messages
Need both client and server support, e.g. IE 10 above and Tomcat 7 or above

9. Server-Side Java API JSR-356: JavaTM API for WebSocket
Dependency: javax.websocket:javax.websocket-api
@ServerEndpoint
@PathParam
Session
@OnOpen
@OnClose
@OnError
@OnMessage

10. Java API Example @ServerEndpoint("/bookings/{guest-id}")
public class BookingServer {
@OnMessage
public void processBookingRequest(
@PathParam("guest-id") String guestID,
String message,
Session session)
{ ... } }
Optional
Parameters

11. Deploy a JSR-356 Application
Servlet container scans for all classes annotated (requires Servlet 3.0 or above)

12. Example: Simple Chat (Server-Side)
A client can join chat at /chat/{name}
Store all connections in a static collection
Handle lifecycle events
Broadcast all messages to all clients
One endpoint instance per connection (default endpoint configuration)

13. Client-Side JavaScript API
WebSocket(url)
ws or wss protocol
close()
send(data)
Binary data may not be supported
onopen
onclose
onerror
onmessage
MessageEvent

14. Example: Chat (Client-Side)
John: Hello
Me: My name is Steve
Jane: I’m here too

15. Further Considerations
What if we want additional features like chat rooms, offline messages, administration, etc.?
Message format
Message routing
Message queuing
Integration with other application components

16. From WebSocket to Messaging
STOMP, RabbitMQ, SockJS, Spring Integration …