WebSocket
- 1. WebSocket Two-way realtime communication for websites
- 2. Chat on a webpage “Four times.” “Four times.”
- 3. Chat on a webpage Requirements: • Send messages client→server • Send messages server→client • Detect when client is connected to server (“presence”)
- 4. Traditional HTTP XMLHttpRequest Long Polling (HTTP from JavaScript) (Long-running XMLHttpRequest) var request = new XMLHttpRequest(); var request = new XMLHttpRequest(); request.open("POST", "/send"); request.open("GET", "/receive"); request.send("Four times."); request.send(); request.onload = function() { appendMessage(this.responseText); startNewRequest(); };
- 5. Other techniques and problems • Long-polling HTTP requests: XHR, script-tag • Streaming HTTP request: XHR, iframe • Using rtmp with Flash • Misuse of HTTP (proxies, browsers, servers) • Performance (network, httpd cpu) • Not supported in all browsers
- 6. WebSocket • Full-duplex persistent connection over TCP • Designed by W3C for the web (RFC Dec. ’11) • Uses port 80 • Handshake features HTTP’s “Upgrade”-header • The TLS version passes some HTTP-proxies • Ping/pong frames for staying alive
- 7. WebSocket JavaScript API var ws = new WebSocket("wss://host"); var ws = new WebSocket("wss://host"); ws.send("Four times."); ws.onmessage = function(event) { ws.send("It has to be."); appendMessage(event.data); };
- 8. Demo ├── README.md ├── client-sockjs │ ├── chat.js │ └── index.html ├── client-websocket │ ├── chat.js │ └── index.html └── server ├── package.json └── server.js https://github.com/njam/websocket-demo-chat
- 10. Emulation • WebSocket-like client-API plus server • Enables realtime-comm. in most used browsers • SockJS: Node.js, Erlang, Ruby, Python, .. • Socket.IO: Node.js, Java, Erlang, PHP, ....... • Ratchet: PHP • APE (C), Atmosphere (Java), Tambur.io (WS), Pusher (WS)
- 11. Server application Integration 1. Same application base: WS-server which reuses your app code Application code Apache WS Server
- 12. Server application Integration 2. Message Queue / Service API: Messaging between app and WS server (Redis-SockJS push-only broker: cargomedia/socket-redis) Message Queue Application code Broker Apache WS Server