Building interactivity with websockets
0 likes739 views
Wim Godden presents an overview of building interactivity using WebSockets, detailing his background as a founder and open source developer. The document outlines various methods for real-time communication, including the history and implementation differences between traditional polling, long polling, and WebSockets, highlighting their benefits such as low latency and full-duplex messaging. It also provides practical examples of client and server-side code, security considerations, and tools for WebSocket management.
![Sending information
ws.send('Some data in a string');
ws.send(JSON.stringify({'data': 'value here'}));
ws.send(new Blob(['abc123'], {type: 'text/plain'}));](https://image.slidesharecdn.com/websockets-no-notes-170309181828/85/Building-interactivity-with-websockets-29-320.jpg)
Building interactivity with websockets
- 1. Wim Godden Cu.be Solutions @wimgtr Building interactivity with WebSockets
- 2. Who am I ? Wim Godden (@wimgtr)
- 9. My town
- 10. My town
- 11. Belgium – the traffic
- 12. Who am I ? Wim Godden (@wimgtr) Founder of Cu.be Solutions (http://cu.be) Open Source developer since 1997 Developer of PHPCompatibility, OpenX, Nginx SLIC, ... Speaker at PHP and Open Source conferences
- 13. Who are you ? Developers ? System engineers ? Experience with websockets ?
- 14. OLD : Show content, wait for user to click link or button vs NEW : Show content + send user real-time updates
- 15. Real-time = key to keep users on your platform
- 16. The original implementation : refresh Client Server GET /some-page Page contents GET /some-page GET /some-page GET /some-page 60 30 0 90 Time Page contents Page contents Page contents
- 17. The first real-time implementation : AJAX polling Client Server GET /updates {status:’0’} GET /updates GET /updates {status:’1’, ...} GET /updates 3 2 1 4 Time {status:’0’} {status:’0’} New data arrives
- 18. Long polling Client Server GET /updates GET /updates 3 2 1 4 Time {status:’1’, ...} New data arrives
- 19. SSE (Server Sent Events) Client Server GET /updates 3 2 1 4 Time {status:’1’, ...} New data arrives {status:’6’, ...} New data arrives {status:’1500’, ...} New data arrives
- 20. WebSockets Client Server Initiate and upgrade connection 3 2 1 4 Time New data arrives New data arrives New data arrives New data arrives
- 21. WebSockets - Handshake Client Server GET GET /chat-client HTTP/1.1 Host: yourhost.com Upgrade: websocket Connection: upgrade Origin: http://yourhost.com Sec-Websocket-Key: c29tZXRoaW5nIHJhbmRvbQ== Sec-Websocket-Protocol: chat Sec-Websocket-Version: 13 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: upgrade Sec-Websocket-Accept: cmFuZG9tIGFnYV0aGluZw== Sec-Websocket-Protocol: chat
- 22. WebSockets - (sub)protocols Must be supported by client and server Several exist WAMP (provides PubSub) STOMP (provides messaging) Can be application specific (custom)
- 23. WebSockets – Events & Methods Events Open Close Message Error Methods send() close()
- 24. WebSockets First draft : 2007 Accepted as RFC6455 : December 2011 Browser support IE 10+ Chrome 16+ Safari 5+ Firefox 11+ Opera 12+ Android browser 4.4+ Opera Mini not yet supported Use socket.io for automatic fallback
- 25. Uses Synchronization of data between users Multiplayer HTML5 games Live feeds Auctions Real-time updates on running processes Financial applications Messaging / chat
- 26. Advantages Full-duplex messaging 100% asynchronous HTTP overhead only on initial handshake Low latency Low bandwidth Messages can be fragmented Sent partially (when message is not complete yet) Sent in-between other messages
- 27. Disadvantages No caching (unlike XHR/HTTP) Some application changes required No message acknowledgment built-in Ping-pong (present in RFC) not in most browsers Write your own Use socket.io
- 28. Client code var ws = new WebSocket("ws://www.websockets.org"); ws.onopen = function(e) { console.log("Connection open ..."); }; ws.onmessage = function(e) { console.log( "Received Message: " + e.data); }; ws.onclose = function(e) { console.log("Connection closed."); }; ws.send("Hello WebSockets!"); ws.close();
- 29. Sending information ws.send('Some data in a string'); ws.send(JSON.stringify({'data': 'value here'})); ws.send(new Blob(['abc123'], {type: 'text/plain'}));
- 30. Checking if WebSocket support is enabled if (window.WebSocket) { console.log("BROWSER SUPPORTED"); } else { console.log("BROWSER NOT SUPPORTED"); }
- 31. Server-side Code use RatchetMessageComponentInterface; use RatchetConnectionInterface; use RatchetServerIoServer; use RatchetWebSocketWsServer; class MyWsServer implements MessageComponentInterface { public function onOpen(ConnectionInterface $conn) { $conn->send('Test message'); } public function onMessage(ConnectionInterface $conn, $msg) { // Do something with the message } public function onClose(ConnectionInterface $conn) { } public function onError(ConnectionInterface $conn, Exception $e) { } } $server = IoServer::factory( new HTTPServer( new WsServer( new MyWsServer() ) ), 8090 ); $server->run();
- 32. Time for a nice demo ;-)
- 33. Security Always use TLS (wss:// instead of ws://) Verify the Origin header Pass along a random token to the handshake request
- 34. Some minor tips and tricks If you proxy WebSocket traffic through nginx : HAProxy : Interesting read : https://hpbn.co/websocket/ location /websocket { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 3600; proxy_send_timeout 3600; } defaults http timeout connect 30s timeout client 30s timeout server 30s timeout tunnel 1h
- 35. Useful tools Chrome developer console Firefox add-on : WebSockets Monitor Thor (benchmark) - https://github.com/observing/thor Websocket-bench - https://github.com/M6Web/websocket- bench Socket.io (for backward compatibility) SockJS (for backward compatibility)
- 36. Questions ?
- 37. Questions ?
- 38. Contact Twitter @wimgtr Slides http://www.slideshare.net/wimg E-mail wim@cu.be Thanks !