1. , Systems, Frontend :Email: alexkarlovich@gmail.comTwitter: http://twitter.com/AlexKarlovichSite: http://alexkarlovich.com

2. Agenda1. 2. 3. -4. 3. 4. , 5. - 6. , 7. c 8. GIF 9. Polling 10. Polling 11. COMET- - Long Polling- Http streaming- Flash-- Java- 12. No comments setTimeout(function () { location.reload();}, 6000); 13. Realtime HTML5- WebRTC.- Server-Sent Events.- WebSocket & API. 14. WebSocket API 15. var socket = new WebSocket(ws://frontendconf.nodejitsu.com);socket.onopen = function () {console.log( .);socket.send(JSON.stringify({ token: bVfr4 }));};socket.onmessage = function (message) {var data= JSON.parse(message.data);if (data.type === user) {alert(data.user.title);}console.log( :+ message.data);};socket.onclose = function () {console.log( .)};socket.onerror = function () {console.log(- .)};//socket.binaryType = arraybuffer; 16. - GET /chat HTTP/1.1- Host: server.example.com- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==- Origin: http://example.com- Sec-WebSocket-Protocol: chat, superchat- Sec-WebSocket-Version: 13 17. - HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec- WebSocket-Protocol: chat 18. 19. 20. : Web Sockets vs Polling 21. WebSockets- -- - - - - - - UTF8- 22. - SignalR- Lightstreamer- Socket.io- Sock.js- ... 23. : 24. - :http://alexkarlovich.com/frontendconf/workshop/client-side/views/- : http://alexkarlovich.com/frontendconf/workshop.zip 25. - WebSocket-:http://tools.ietf.org/html/rfc6455- WebSocket-API:http://www.w3.org/TR/2011/WD-websockets-20110419/ 26. ! Email: alexkarlovich@gmail.com Twitter: http://twitter.com/AlexKarlovich Site: http://alexkarlovich.com