HTML5: WebSockets and WebWorkers

1. HTML5: WebSockets and WebWorkers

2. Обо мне • Windows Azure MVP • Ведущий разработчик в компании Digital Cloud Technologies • Сертифицированный специалист Microsoft Контактные данные • @feschenkoalex • http://feschenkoalex.blogspot.com • feschenko.alex@gmail.com, alex.feschenko@dctua.com

3. Содержание 1 2 3 Концепция «Real Time Web» WebSockets WebWorkers 1.1 2.1 3.1 Рабочие группы HTML5 Программирование WebWorker-ов COMET 2.2 3.2 Программирование web-сокетов Сценарии применения 2.3 ASP.NET SignalR Library

4. Концепция «живого» Веба

5. COMET

6. COMET Модель разработки приложений, при которой длительно удерживаемое HTTP-соединение позволяет серверу отправлять данные браузеру Разновидности Браузер через регулярные промежутки времени отправляет HTTP-запрос на сервер Частый опрос (Pooling) Запрос удерживается сервером на протяжении определенного промежутка времени Удержание соединения (Long-Pooling) Запрос может удерживаться сервером бесконечно долго Стриминг (Streaming)

7. Недостатки COMET-решений COMET – это дорогое решение ! SAY NO TO COMET ! It`s just a “hack” :(

8. HTML5 WebSockets ! «Венец эволюции» в Web-коммуникациях. Двунаправленный сокет, функционирующий в сети Интернет Режим Full-Duplex Сервер Открытое сокетное соединение Обычный TCP-сокет Функционирует не только в браузере Высокая производительность Понятное API Клиент Возможности масштабирования Рациональное использование канала

9. Организации стандартизации Особенности протокола Web Sockets API

10. Рабочие группы HTML5 Geo-Location Web Performance Web Apps HyBi SVG HTML Ecma Script CSS

11. HTML5 спецификации CSS Hyperlink Presentation Clipboard APIs and Events HTML Canvas 2D Context Masking and Clipping DOM Level 3 Events CSS Grid Positioning From Origin Header Server-Sent Events CSS Namespaces Element Traversal Widget Packaging Color Management CSS Style Attributes Selector Level 3 CSS Color Level 3 CSS Animations Progress Events HTML Microdata SVG Parameters SVG Integration Filter Effects CSS Speech Selectors API Compositing HTML5 File API Web IDL SVG 2.0 UMP WARP CORS HTML CSS Web Apps SVG

12. История развития Декабрь 2011 Июнь 2010 – Ноябрь 2011 Декабрь 2010 RFC 6455 v.00-v.06 v.76 Декабрь 2009 Candidate Recommendation Third Draft, v.75 Январь 2009 First Working Draft

13. Demonstration

14. Установка соединения Клиент обращается к ws://domain.com/chat Клиент Сервер Обязательные: GET /chat HTTP/1.1 Host: server.domain.com Upgrade: websocket Connection: upgrade Sec-WebSocket-Key: 16-byte nonce, base64 Sec-WebSocket-Version: 13 Опциональные: Sec-WebSocket-Origin: http://domain.com Sec-WebSocket-Protocol: protocol Sec-WebSocket-Extensions: extension Cookie: cookie content Обязательные: HTTP/1.1 101 “Switching Protocols” Upgrade: websocket Connection: upgrade Sec-WebSocket-Accept: 20-byte MD5 hash in base64 Опциональные: Sec-WebSocket-Protocol: protocol Sec-WebSocket-Extension: extension

15. Формат фреймов • Каждый фрейм содержит несколько заголовочных байтов • Данные могут пересылаться как в текстовом так и в бинарном виде • Каждый фрейм содержит «маску» для обхода ограничений прокси-серверов mask op-code length Extended length Application data Extension data

16. W3C WebSocket API • Очень простой программный интерфейс • Основные методы и обработчики событий: • WebSocket(URL, [protocols]) – Создание соединения • onOpen() – вызывается при успешной установке соединения • Send(data) – отправка сообщения • onMessage() – вызывается при получении сообщения • onClose() – вызывается при закрытии соединения • onError() – вызывается при возникновении ошибок

17. Поддержка браузерами • Chrome 4.0+ • Safari 5.0 & iOS 4+ • Firefox 4+ • Opera 10.7+ • Internet Explorer 10+

18. ASP.NET SignalR

19. ASP.NET SignalR Library • Позволяет абстрагироваться от концепции сокетов • Включает в себя серверную и клиентскую библиотеки • Позволяет строить WebSocket-подобные приложения для клиентов, не поддерживающих HTML5 • Два подхода к разработке • PersistentConnection • Hubs

20. Demonstration

21. WEbWorkers

22. Проблема Переходы по ссылкам Нажатие кнопок Скролл страниц Скрипты Выполняются в одном потоке

23. Многопоточность в Javascript Web Worker- это Web-сценарий, работающий в параллельном потоке выполнения Простая модель взаимодействия с Web Worker-ом Подключение скриптов: importScripts([urls]) Остановка потока: close() onmessage = function(event) { … } onerror = function(event) { … }

24. Demonstration

25. Функциональное оснащение DOM Window Document Parent Navigator Timers Location Ajax App Cache Import Scripts

26. Варианты использования Предварительная загрузка и кеширование Real-time подсветка синтаксиса Анализ видео и аудио файлов Проверка правописания Фоновый опрос веб-сервисов Выполнение «тяжелых» операций

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. Спасибо за внимание !