Periculum est in mora

794 views

Published on

Video:
Part1 - http://video.yandex.by/users/fdconf/view/15/
Part2 - http://video.yandex.by/users/fdconf/view/18/


Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
794
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • By Maxim Dorofeev ‏@cartmendum
  • http://dev.w3.org/html5/websockets/
  • http://tools.ietf.org/html/rfc6455
  • http://tools.ietf.org/html/rfc6455
  • http://caniuse.com/#search=websocket
  • http://www.websocket.org/quantum.html
  • http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/
  • http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/
  • Periculum est in mora

    1. 1. Промедление смерти подобноКарлович Александр, <EPAM> Systems, Frontend разработчик Контакты: Email: alexkarlovich@gmail.com Twitter: http://twitter.com/AlexKarlovich Site: http://alexkarlovich.com
    2. 2. Agenda1. Применение2. Обзор технологий и инструментов3. Подробнее о веб-сокетах4. Практикум
    3. 3. Биржевая и финансовая информация
    4. 4. Спортивные события,букмекерские котировки
    5. 5. Онлайн-игры
    6. 6. Соцсети, чаты
    7. 7. Транcпорт
    8. 8. Бесконечный GIF
    9. 9. Polling
    10. 10. Polling в жизни
    11. 11. COMET- Бесконечный фрейм- Long Polling- Http streaming- Flash-объекты- Java-апплеты
    12. 12. Рубрика “No comments”– <meta http-equiv="refresh" content="60">– setTimeout(function () { location.reload();}, 6000);
    13. 13. Realtime в HTML5- WebRTC.- Server-Sent Events.- WebSocket протокол & API.
    14. 14. WebSocket API
    15. 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. 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. 17. Хидеры ответа- HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec- WebSocket-Protocol: chat
    18. 18. Поддержка браузеров
    19. 19. Серверы
    20. 20. Трафик: Web Sockets vs Polling
    21. 21. Преимущества WebSockets- Веб-стандарт- Двусторонний обмен данными- Нативная поддержка браузерами и серверами- Низкая задержка- Постоянное соединение- Кросдоменность- Неограниченное количество соединений- Кодировка UTF8- Работа с бинарными данными
    22. 22. Библиотеки- SignalR- Lightstreamer- Socket.io- Sock.js- ...
    23. 23. Практикум: рисуем онлайн
    24. 24. Материалы для воркшопа- Готовое приложение:http://alexkarlovich.com/frontendconf/workshop/client-side/views/- Материалы для воркшопа: http://alexkarlovich.com/frontendconf/workshop.zip
    25. 25. Ссылки- WebSocket-протокол: http://tools.ietf.org/html/rfc6455- WebSocket-API: http://www.w3.org/TR/2011/WD-websockets-20110419/
    26. 26. Спасибо за внимание! Email: alexkarlovich@gmail.com Twitter: http://twitter.com/AlexKarlovich Site: http://alexkarlovich.com

    ×