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
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
Клиент
Возможности масштабирования
Рациональное использование канала
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
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+
19. ASP.NET SignalR Library
• Позволяет абстрагироваться от концепции
сокетов
• Включает в себя серверную и клиентскую
библиотеки
• Позволяет строить WebSocket-подобные
приложения для клиентов, не
поддерживающих HTML5
• Два подхода к разработке
• PersistentConnection
• Hubs
22. Проблема
Переходы
Нажатие Скролл
по Скрипты
кнопок страниц
ссылкам
Выполняются в одном потоке
23. Многопоточность в Javascript
Web Worker - это Web-сценарий, работающий в параллельном потоке
выполнения
Простая модель взаимодействия с Web Worker-ом
onmessage = onerror = Подключение
function(event) { function(event) { скриптов:
… … importScripts([url
} } s])
Остановка потока:
close()
26. Варианты использования
Предварительная загрузка и кеширование
Real-time подсветка синтаксиса
Анализ видео и аудио файлов
Проверка правописания
Фоновый опрос веб-сервисов
Выполнение «тяжелых» операций