0
Промедление смерти подобноКарлович Александр,      <EPAM> Systems,             Frontend разработчик                       ...
Agenda1. Применение2. Обзор технологий и инструментов3. Подробнее о веб-сокетах4. Практикум
Биржевая и финансовая    информация
Спортивные события,букмекерские котировки
Онлайн-игры
Соцсети, чаты
Транcпорт
Бесконечный GIF
Polling
Polling в жизни
COMET-   Бесконечный фрейм-   Long Polling-   Http streaming-   Flash-объекты-   Java-апплеты
Рубрика “No comments”– <meta http-equiv="refresh"  content="60">– setTimeout(function () {     location.reload();}, 6000);
Realtime в HTML5- WebRTC.- Server-Sent Events.- WebSocket протокол & API.
WebSocket API
Примерvar socket = new WebSocket(ws://frontendconf.nodejitsu.com);socket.onopen = function () {    console.log(Соединение ...
Хидеры запроса- GET /chat HTTP/1.1- Host: server.example.com- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Key: ...
Хидеры ответа- HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept:  s3pPLMBiT...
Поддержка браузеров
Серверы
Трафик: Web Sockets vs Polling
Преимущества WebSockets-   Веб-стандарт-   Двусторонний обмен данными-   Нативная поддержка браузерами и серверами-   Низк...
Библиотеки-   SignalR-   Lightstreamer-   Socket.io-   Sock.js-   ...
Практикум: рисуем онлайн
Материалы для воркшопа- Готовое приложение:http://alexkarlovich.com/frontendconf/workshop/client-side/views/- Материалы дл...
Ссылки- WebSocket-протокол:    http://tools.ietf.org/html/rfc6455- WebSocket-API:    http://www.w3.org/TR/2011/WD-websocke...
Спасибо за внимание!           Email: alexkarlovich@gmail.com           Twitter: http://twitter.com/AlexKarlovich         ...
Periculum est in mora
Periculum est in mora
Periculum est in mora
Periculum est in mora
Upcoming SlideShare
Loading in...5
×

Periculum est in mora

497

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
497
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
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/
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×