Your SlideShare is downloading. ×
0
Промедление смерти подобноКарлович Александр,<EPAM> Systems,Frontend разработчикКонтакты:Email: alexkarlovich@gmail.comTwi...
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.jit.su);socket.onopen = function () {console.log(Соединение открыто.);s...
Хидеры запроса- GET /chat HTTP/1.1- Host: server.example.com- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Key:d...
Хидеры ответа- HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept:s3pPLMBiTxa...
Поддержка браузеров
Серверы
Трафик: Web Sockets vs Polling
Задержка (Polling)
Задержка (WebSocket)
Преимущества WebSockets- Веб-стандарт- Двусторонний обмен данными- Нативная поддержка браузерами и серверами- Низкая задер...
Библиотеки- SignalR- Lightstreamer- Socket.io- Sock.js- …
Практикум: рисуем онлайн
Ссылки• WebSocket-протокол:http://tools.ietf.org/html/rfc6455• WebSocket-API:http://www.w3.org/TR/2011/WD-websockets-20110...
Periculum est in mora
Periculum est in mora
Upcoming SlideShare
Loading in...5
×

Periculum est in mora

344

Published on

by Alex Krlovich on Frontend DEV Conf'13
http://bit.ly/Alex_karlovich
Воркшоп с написанием клиентской части, используя веб-сокеты

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

  • Be the first to like this

No Downloads
Views
Total Views
344
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://tools.ietf.org/html/rfc6455
  • http://caniuse.com/#search=websocket31.03.2013
  • Transcript of "Periculum est in mora"

    1. 1. Промедление смерти подобноКарлович Александр,<EPAM> Systems,Frontend разработчикКонтакты:Email: alexkarlovich@gmail.comTwitter: http://twitter.com/AlexKarlovichSite: 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.jit.su);socket.onopen = function () {console.log(Соединение открыто.);socket.send(JSON.stringify({ token: bVfr4 }));};socket.onmessage = function (data) {var message = JSON.parse(data);if (message.type === user) {alert(message.user.title);}console.log(Пришло сообщение от сервера: + 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. Задержка (Polling)
    22. 22. Задержка (WebSocket)
    23. 23. Преимущества WebSockets- Веб-стандарт- Двусторонний обмен данными- Нативная поддержка браузерами и серверами- Низкая задержка- Постоянное соединение- Кросдоменность- Неограниченное количество соединений- Кодировка UTF8- Работа с бинарными данными
    24. 24. Библиотеки- SignalR- Lightstreamer- Socket.io- Sock.js- …
    25. 25. Практикум: рисуем онлайн
    26. 26. Ссылки• WebSocket-протокол:http://tools.ietf.org/html/rfc6455• WebSocket-API:http://www.w3.org/TR/2011/WD-websockets-20110419/
    1. A particular slide catching your eye?

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

    ×