HTML5: WebSockets and                        WebWorkersКРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT ВУКРАИНЕ
Обо мне• Windows Azure MVP• Ведущий разработчик в компании Digital  Cloud Technologies• Сертифицированный специалист  Micr...
СодержаниеКонцепция«Real Time  Web»             1          WebSockets                                       2         WebW...
Концепция «живого» Веба
COMET
COMET                       Модель разработки приложений, при которой длительно                    удерживаемое HTTP-соеди...
Недостатки COMET-решений  Решение       Повышается   сложно         время       COMET – это дорогое решение ! реализовать ...
HTML5 WebSockets !                   «Венец эволюции» в Web-коммуникациях.                   Двунаправленный сокет, функци...
Организации стандартизации   Особенности протокола   Web Sockets API
Рабочие группы HTML5   Geo-      Web                     Web  Locatio   Perfor            HyBi                     Apps   ...
HTML Microdata                                HTML Canvas 2D Context                    HTML                              ...
История развития                                             Декабрь 2011                   Июнь 2010 – Ноябрь 2011       ...
DEMONSTRATION
Установка соединения       Клиент обращается к       ws://domain.com/chat              Клиент                             ...
Формат фреймов• Каждый фрейм содержит несколько заголовочных байтов• Данные могут пересылаться как в текстовом так и в  би...
W3C WebSocket API• Очень простой программный интерфейс• Основные методы и обработчики событий:   • WebSocket(URL, [protoco...
Поддержка браузерами •   Chrome 4.0+ •   Safari 5.0 & iOS 4+ •   Firefox 4+ •   Opera 10.7+ •   Internet Explorer 10+
ASP.NET SIGNALR
ASP.NET SignalR Library• Позволяет абстрагироваться от концепции  сокетов• Включает в себя серверную и клиентскую  библиот...
DEMONSTRATION
WEBWORKERS
ПроблемаПереходы           Нажатие   Скролл    по                         Скрипты           кнопок    страниц ссылкам     ...
Многопоточность в JavascriptWeb Worker - это Web-сценарий, работающий в параллельном потокевыполненияПростая модель взаимо...
DEMONSTRATION
Функциональное оснащение DOM        Window   Document   Parent   Navigator                      Timers     App      Import...
Варианты использования   Предварительная загрузка и кеширование        Real-time подсветка синтаксиса        Анализ видео ...
Полезные ссылки•   http://www.html5rocks.com•   http://dev.w3.org/html5/websockets/•   http://tools.ietf.org/html/rfc6455•...
СПАСИБО ЗАВНИМАНИЕ !
Upcoming SlideShare
Loading in...5
×

HTML5 WebSockets and WebWorkers

2,851

Published on

Presentation about a most powerfull HTML5 technologies such as WebSockets and WebWorkers. Presentation also covers a main principles about working with ASP.NET SignalR Library

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
2,851
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 WebSockets and WebWorkers"

  1. 1. HTML5: WebSockets and WebWorkersКРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT ВУКРАИНЕ
  2. 2. Обо мне• Windows Azure MVP• Ведущий разработчик в компании Digital Cloud Technologies• Сертифицированный специалист Microsoft Контактные данные• @feschenkoalex• http://feschenkoalex.blogspot.com• feschenko.alex@gmail.com, alex.feschenko@dctua.com
  3. 3. СодержаниеКонцепция«Real Time Web» 1 WebSockets 2 WebWorkers 3 Рабочие группы Программирование COMET 1.1 HTML5 2.1 3.1 WebWorker-ов Программирование Сценарии web-сокетов 2.2 применения 3.2 ASP.NET SignalR Library 2.3
  4. 4. Концепция «живого» Веба
  5. 5. COMET
  6. 6. COMET Модель разработки приложений, при которой длительно удерживаемое HTTP-соединение позволяет серверу отправлять данные браузеруРазновидности Браузер через регулярные промежутки Частый опрос (Pooling) времени отправляет HTTP-запрос на сервер Запрос удерживается сервером наУдержание соединения (Long-Pooling) протяжении определенного промежутка времени Запрос может удерживаться сервером Стриминг (Streaming) бесконечно долго
  7. 7. Недостатки COMET-решений Решение Повышается сложно время COMET – это дорогое решение ! реализовать ожиданияНерациональн SAY NO TO COMET ! о Возрастает используется нагрузка на полоса CPU пропускания It`s just a “hack” :(
  8. 8. HTML5 WebSockets ! «Венец эволюции» в Web-коммуникациях. Двунаправленный сокет, функционирующий в сети Интернет Режим Full-Duplex Сервер Обычный TCP-сокетФункционирует не только в браузере Открытое сокетное соединение Высокая производительность Понятное API Клиент Возможности масштабированияРациональное использование канала
  9. 9. Организации стандартизации Особенности протокола Web Sockets API
  10. 10. Рабочие группы HTML5 Geo- Web Web Locatio Perfor HyBi Apps n mance Ecma SVG HTML CSS Script
  11. 11. HTML Microdata HTML Canvas 2D Context HTML HTML5 working draftFirst published CSS Hyperlink Presentation CSS Grid Positioning CSS Namespaces Selector Level 3 CSS CSS Style Attributes CSS Speech CSS Animations Working Draft CSS Color Level 3 CORS Clipboard APIs and Events DOM Level 3 Events Element Traversal File API Last Call Progress Events Selectors API Server-Sent Events Web Apps From Origin Header HTML5 спецификации UMP Web IDL WARP Widget Packaging Candidate SVG 2.0Recommendation Compositing SVG Parameters Color Management SVG SVG Integration Filter Effects Masking and Clipping Recommendation
  12. 12. История развития Декабрь 2011 Июнь 2010 – Ноябрь 2011 Декабрь 2010 RFC 6455 v.00-v.06 Декабрь 2009 v.76 Candidate Recommendation Third Draft, v.75Январь 2009 First Working Draft
  13. 13. DEMONSTRATION
  14. 14. Установка соединения Клиент обращается к ws://domain.com/chat Клиент Сервер Обязательные: Обязательные: GET /chat HTTP/1.1 HTTP/1.1 101 “Switching Protocols” Host: server.domain.com Upgrade: websocket Upgrade: websocket Connection: upgrade Connection: upgrade Sec-WebSocket-Accept: 20-byte MD5 Sec-WebSocket-Key: 16-byte nonce, base64 hash in base64 Sec-WebSocket-Version: 13 Опциональные: Опциональные: Sec-WebSocket-Protocol: protocol Sec-WebSocket-Origin: http://domain.com Sec-WebSocket-Extension: extension Sec-WebSocket-Protocol: protocol Sec-WebSocket-Extensions: extension Cookie: cookie content
  15. 15. Формат фреймов• Каждый фрейм содержит несколько заголовочных байтов• Данные могут пересылаться как в текстовом так и в бинарном виде• Каждый фрейм содержит «маску» для обхода ограничений прокси-серверов op- Extended mask length Extension data Application data code length
  16. 16. W3C WebSocket API• Очень простой программный интерфейс• Основные методы и обработчики событий: • WebSocket(URL, [protocols]) – Создание соединения • onOpen() – вызывается при успешной установке соединения • Send(data) – отправка сообщения • onMessage() – вызывается при получении сообщения • onClose() – вызывается при закрытии соединения • onError() – вызывается при возникновении ошибок
  17. 17. Поддержка браузерами • Chrome 4.0+ • Safari 5.0 & iOS 4+ • Firefox 4+ • Opera 10.7+ • Internet Explorer 10+
  18. 18. ASP.NET SIGNALR
  19. 19. ASP.NET SignalR Library• Позволяет абстрагироваться от концепции сокетов• Включает в себя серверную и клиентскую библиотеки• Позволяет строить WebSocket-подобные приложения для клиентов, не поддерживающих HTML5• Два подхода к разработке • PersistentConnection • Hubs
  20. 20. DEMONSTRATION
  21. 21. WEBWORKERS
  22. 22. ПроблемаПереходы Нажатие Скролл по Скрипты кнопок страниц ссылкам Выполняются в одном потоке
  23. 23. Многопоточность в JavascriptWeb Worker - это Web-сценарий, работающий в параллельном потокевыполненияПростая модель взаимодействия с Web Worker-ом onmessage = onerror = Подключение function(event) { function(event) { скриптов: … … importScripts([url } } s]) Остановка потока: close()
  24. 24. DEMONSTRATION
  25. 25. Функциональное оснащение DOM Window Document Parent Navigator Timers App Import Location Ajax Cache Scripts
  26. 26. Варианты использования Предварительная загрузка и кеширование Real-time подсветка синтаксиса Анализ видео и аудио файлов Проверка правописания Фоновый опрос веб-сервисов Выполнение «тяжелых» операций
  27. 27. Полезные ссылки• http://www.html5rocks.com• http://dev.w3.org/html5/websockets/• http://tools.ietf.org/html/rfc6455• http://websocket.org/quantum.html• http://soa.sys-con.com/node/1551694• http://signalr.net• http://www.thevista.ru/page14623-html5_web_workers• http://en.wikipedia.org/wiki/WebSocket
  28. 28. СПАСИБО ЗАВНИМАНИЕ !
  1. A particular slide catching your eye?

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

×