HTML5: WebSockets and WebWorkers КРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT В УКРАИНЕ Обо мне • Windows Azure MVP • Ведущий разработчик в компании Digital Cloud Technologies • Сертифицированный специалист Microsoft Контактные данные • @feschenkoalex • http://feschenkoalex.blogspot.com • feschenko.alex@gmail.com, alex.feschenko@dctua.com Содержание Концепция «Real Time Web» COMET 1 WebSockets 2 1.1 Рабочие группы HTML5 2.1 Программирование WebWorker-ов 3.1 Программирование web-сокетов 2.2 Сценарии применения 3.2 ASP.NET SignalR Library 2.3 WebWorkers 3 Концепция «живого» Веба COMET COMET Модель разработки приложений, при которой длительно удерживаемое HTTP-соединение позволяет серверу отправлять данные браузеру Разновидности Частый опрос (Pooling) Удержание соединения (Long-Pooling) Стриминг (Streaming) Браузер через регулярные промежутки времени отправляет HTTP-запрос на сервер Запрос удерживается сервером на протяжении определенного промежутка времени Запрос может удерживаться сервером бесконечно долго Недостатки COMET-решений Решение сложно реализовать Повышается время ожидания COMET – это дорогое решение ! Нерациональн о используется полоса пропускания Возрастает нагрузка на CPU SAY NO TO COMET ! It`s just a “hack” :( HTML5 WebSockets ! «Венец эволюции» в Web-коммуникациях. Двунаправленный сокет, функционирующий в сети Интернет Режим Full-Duplex Сервер Обычный TCP-сокет Функционирует не только в браузере Высокая производительность Понятное API Возможности масштабирования Рациональное использование канала Открытое сокетное соединение Клиент Организации стандартизации Особенности протокола Web Sockets API Рабочие группы HTML5 GeoLocatio n Web Perfor mance Web Apps HyBi SVG HTML Ecma Script CSS CSS Hyperlink Presentation CSS Grid Positioning CSS Namespaces Selector Level 3 CSS Style Attributes CSS Speech CSS Animations CSS Color Level 3 HTML CSS First published working draft Working Draft Last Call SVG 2.0 Compositing SVG Parameters Color Management SVG Integration Filter Effects Masking and Clipping CORS Clipboard APIs and Events DOM Level 3 Events Element Traversal File API Progress Events Selectors API Server-Sent Events From Origin Header UMP Web IDL WARP Widget Packaging HTML Microdata HTML Canvas 2D Context HTML5 HTML5 спецификации Web Apps SVG Candidate Recommendation Recommendation История развития Декабрь 2011 Июнь 2010 – Ноябрь 2011 Декабрь 2010 v.76 Декабрь 2009 Third Draft, v.75 Январь 2009 First Working Draft v.00-v.06 RFC 6455 Candidate Recommendation DEMONSTRATION Установка соединения Клиент обращается к 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 Формат фреймов • Каждый фрейм содержит несколько заголовочных байтов • Данные могут пересылаться как в текстовом так и в бинарном виде • Каждый фрейм содержит «маску» для обхода ограничений прокси-серверов mask Extended oplength length code Extension data Application data W3C WebSocket API • Очень простой программный интерфейс • Основные методы и обработчики событий: • WebSocket(URL, [protocols]) – Создание соединения • onOpen() – вызывается при успешной установке соединения • Send(data) – отправка сообщения • onMessage() – вызывается при получении сообщения • onClose() – вызывается при закрытии соединения • onError() – вызывается при возникновении ошибок Поддержка браузерами • • • • • Chrome 4.0+ Safari 5.0 & iOS 4+ Firefox 4+ Opera 10.7+ Internet Explorer 10+ ASP.NET SIGNALR ASP.NET SignalR Library • Позволяет абстрагироваться от концепции сокетов • Включает в себя серверную и клиентскую библиотеки • Позволяет строить WebSocket-подобные приложения для клиентов, не поддерживающих HTML5 • Два подхода к разработке • PersistentConnection • Hubs DEMONSTRATION WEBWORKERS Проблема Переходы по ссылкам Нажатие кнопок Скролл страниц Скрипты Выполняются в одном потоке Многопоточность в Javascript Web Worker - это Web-сценарий, работающий в параллельном потоке выполнения Простая модель взаимодействия с Web Worker-ом onmessage = function(event) { … } onerror = function(event) { … } Подключение скриптов: importScripts([url s]) Остановка потока: close() DEMONSTRATION Функциональное оснащение DOM Window Document Parent Navigator Location Ajax Timers App Cache Import Scripts Варианты использования Предварительная загрузка и кеширование Real-time подсветка синтаксиса Анализ видео и аудио файлов Проверка правописания Фоновый опрос веб-сервисов Выполнение «тяжелых» операций Полезные ссылки • • • • • • • • 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 СПАСИБО ЗА ВНИМАНИЕ !