КРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ 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

СПАСИБО ЗА ВНИМАНИЕ !