html5: websockets and webworkers
Post on 20-Mar-2016
127 Views
Preview:
DESCRIPTION
TRANSCRIPT
КРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT В УКРАИНЕ
HTML5: WebSockets and WebWorkers
Обо мне• Windows Azure MVP• Ведущий разработчик в компании
Digital Cloud Technologies• Сертифицированный специалист
Microsoft
Контактные данные
• @feschenkoalex• http://feschenkoalex.blogspot.com • feschenko.alex@gmail.com,
alex.feschenko@dctua.com
1
СодержаниеКонцепци
я «Real Time Web»
2 31.1COMET 2.
1
WebSockets
Рабочие группы HTML5
2.2
Программирование web-сокетов
2.3
ASP.NET SignalR Library
WebWorkers
3.1
Программирование WebWorker-ов
3.2
Сценарии применения
Концепция «живого» Веба
COMET
COMETМодель разработки приложений, при которой длительно
удерживаемое HTTP-соединение позволяет серверу отправлять данные браузеру
РазновидностиЧастый опрос (Pooling)
Удержание соединения (Long-Pooling)
Стриминг (Streaming)
Браузер через регулярные промежутки времени отправляет HTTP-запрос на серверЗапрос удерживается сервером на протяжении определенного промежутка времени
Запрос может удерживаться сервером бесконечно долго
Решение сложно
реализовать
Повышается время
ожидания
Возрастает нагрузка на
CPU
Нерационально
используется полоса
пропускания
COMET – это дорогое решение !
SAY NO TO COMET !It`s just a “hack” :(
Недостатки COMET-решений
«Венец эволюции» в Web-коммуникациях. Двунаправленный сокет, функционирующий в сети Интернет
Режим Full-DuplexОбычный TCP-сокет
Функционирует не только в браузере
Высокая производительностьПонятное API
Возможности масштабированияРациональное использование
канала
Сервер
Клиент
Открытое сокетное соединение
HTML5 WebSockets !
Особенности протокола
Web Sockets API
Организации стандартизации
Geo-Locati
on
Web Performanc
e
CSSHTMLSVG
Web Apps
Ecma Script
HyBi
Рабочие группы HTML5
First published working draft Working Draft Last Call
Candidate Recommendatio
nRecommendatio
n
CSS
Hype
rlink
Pre
sent
atio
nCS
S Gr
id P
ositi
onin
gCS
S Na
mes
pace
sSe
lect
or L
evel
3CS
S St
yle
Attri
bute
sCS
S Sp
eech
HTM
L5
CSS
Anim
atio
nsCS
S Co
lor L
evel
3
CORS
Clip
boar
d AP
Is an
d Ev
ents
DOM
Lev
el 3
Eve
nts
Elem
ent T
rave
rsal
File
API
Prog
ress
Eve
nts
Sele
ctor
s API
Serv
er-S
ent E
vent
sFr
om O
rigin
Hea
der
UMP
Web
IDL
WAR
PW
idge
t Pac
kagi
ng
SVG
2.0
Com
posit
ing
SVG
Para
met
ers
Colo
r Man
agem
ent
SVG
Inte
grat
ion
Filte
r Effe
cts
Mas
king
and
Clip
ping
HTML CSS Web Apps SVG
HTM
L Ca
nvas
2D
Cont
ext
HTM
L M
icrod
ata
HTML5 спецификации
Январь 2009First Working Draft
Декабрь 2009
Third Draft, v.75
v.76
Декабрь 2010
v.00-v.06
Июнь 2010 – Ноябрь 2011Декабрь 2011
RFC 6455
Candidate Recommendation
История развития
DEMONSTRATION
Клиент Сервер
Клиент обращается к ws://domain.com/chat
Обязательные:GET /chat HTTP/1.1Host: server.domain.comUpgrade: websocketConnection: upgradeSec-WebSocket-Key: 16-byte nonce, base64Sec-WebSocket-Version: 13Опциональные:Sec-WebSocket-Origin: http://domain.comSec-WebSocket-Protocol: protocolSec-WebSocket-Extensions: extensionCookie: cookie content
Обязательные:HTTP/1.1 101 “Switching Protocols”Upgrade: websocketConnection: upgradeSec-WebSocket-Accept: 20-byte MD5 hash in base64Опциональные:Sec-WebSocket-Protocol: protocolSec-WebSocket-Extension: extension
Установка соединения
• Каждый фрейм содержит несколько заголовочных байтов
• Данные могут пересылаться как в текстовом так и в бинарном виде
• Каждый фрейм содержит «маску» для обхода ограничений прокси-серверов
maskop-code
length
Extended length Extension data Application data
Формат фреймов
• Очень простой программный интерфейс
• Основные методы и обработчики событий:• WebSocket(URL, [protocols]) – Создание соединения• onOpen() – вызывается при успешной установке соединения• Send(data) – отправка сообщения• onMessage() – вызывается при получении сообщения• onClose() – вызывается при закрытии соединения• onError() – вызывается при возникновении ошибок
W3C WebSocket API
• Chrome 4.0+• Safari 5.0 & iOS 4+• Firefox 4+• Opera 10.7+• Internet Explorer 10+
Поддержка браузерами
ASP.NET SIGNALR
• Позволяет абстрагироваться от концепции сокетов
• Включает в себя серверную и клиентскую библиотеки
• Позволяет строить WebSocket-подобные приложения для клиентов, не поддерживающих HTML5
• Два подхода к разработке• PersistentConnection• Hubs
ASP.NET SignalR Library
DEMONSTRATION
WEBWORKERS
СкриптыСкролл страниц
Нажатие кнопок
Переходы по
ссылкам
Выполняются в одном потоке
Проблема
Web Worker - это Web-сценарий, работающий в параллельном потоке выполнения
Простая модель взаимодействия с Web Worker-ом
onmessage = function(event) { … }
onerror = function(event) { … }
Подключение скриптов:importScripts([urls])Остановка потока:close()
Многопоточность в Javascript
DEMONSTRATION
DOM Window Document Parent Navigato
r
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
СПАСИБО ЗА ВНИМАНИЕ !
top related