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

1. HTML5: WebSockets and
WebWorkers
КРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT В
УКРАИНЕ

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

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. Концепция «живого» Веба

5. COMET

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

7. Недостатки COMET-решений
Решение Повышается
сложно время COMET – это дорогое решение !
реализовать ожидания
Нерациональн
SAY NO TO COMET !
о Возрастает
используется нагрузка на
полоса CPU
пропускания
It`s just a “hack” :(

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

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

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

11. HTML Microdata
HTML Canvas 2D Context
HTML
HTML5
working draft
First 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.0
Recommendation
Compositing
SVG Parameters
Color Management
SVG
SVG Integration
Filter Effects
Masking and Clipping
Recommendation

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. DEMONSTRATION

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

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-ом
onmessage = onerror = Подключение
function(event) { function(event) { скриптов:
… … importScripts([url
} } s])
Остановка потока:
close()

24. DEMONSTRATION

25. Функциональное оснащение
DOM Window Document Parent Navigator
Timers App Import
Location Ajax
Cache 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. СПАСИБО ЗА
ВНИМАНИЕ !