Introduction on WebSocket. For Webilea on 2013-02-06: http://www.meetup.com/webilea/events/101312452/

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

9. Compatibility
http://caniuse.com/websockets

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

13. Thanks
cargomedia.ch/jobs