WebWorkers

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
СПАСИБО ЗА
ВНИМАНИЕ !