• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Periculum est in mora
 

Periculum est in mora

on

  • 592 views

by Alex Krlovich on Frontend DEV Conf'13

by Alex Krlovich on Frontend DEV Conf'13
http://bit.ly/Alex_karlovich
Воркшоп с написанием клиентской части, используя веб-сокеты

Statistics

Views

Total Views
592
Views on SlideShare
592
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://tools.ietf.org/html/rfc6455
  • http://caniuse.com/#search=websocket31.03.2013

Periculum est in mora Periculum est in mora Presentation Transcript

  • Промедление смерти подобноКарлович Александр,<EPAM> Systems,Frontend разработчикКонтакты:Email: alexkarlovich@gmail.comTwitter: http://twitter.com/AlexKarlovichSite: http://alexkarlovich.com
  • Agenda1. Применение2. Обзор технологий и инструментов3. Подробнее о веб-сокетах4. Практикум
  • Биржевая и финансоваяинформация
  • Спортивные события,букмекерские котировки
  • Онлайн-игры
  • Соцсети, чаты
  • Транcпорт
  • Бесконечный GIF
  • Polling
  • Polling в жизни
  • COMET- Бесконечный фрейм- Long Polling- Http streaming- Flash-объекты- Java-апплеты
  • Рубрика “No comments”– <meta http-equiv="refresh"content="60">– setTimeout(function () {location.reload();}, 6000);
  • Realtime в HTML5- WebRTC.- Server-Sent Events.- WebSocket протокол & API.
  • WebSocket API
  • Примерvar socket = new WebSocket(ws://frontendconf.jit.su);socket.onopen = function () {console.log(Соединение открыто.);socket.send(JSON.stringify({ token: bVfr4 }));};socket.onmessage = function (data) {var message = JSON.parse(data);if (message.type === user) {alert(message.user.title);}console.log(Пришло сообщение от сервера: + data);};socket.onclose = function () {console.log(Соединение закрылось.)};socket.onerror = function () {console.log(Что то пошло не так.)};//socket.binaryType = arraybuffer;
  • Хидеры запроса- GET /chat HTTP/1.1- Host: server.example.com- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==- Origin: http://example.com- Sec-WebSocket-Protocol: chat, superchat- Sec-WebSocket-Version: 13
  • Хидеры ответа- HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec- WebSocket-Protocol: chat
  • Поддержка браузеров
  • Серверы
  • Трафик: Web Sockets vs Polling
  • Задержка (Polling)
  • Задержка (WebSocket)
  • Преимущества WebSockets- Веб-стандарт- Двусторонний обмен данными- Нативная поддержка браузерами и серверами- Низкая задержка- Постоянное соединение- Кросдоменность- Неограниченное количество соединений- Кодировка UTF8- Работа с бинарными данными
  • Библиотеки- SignalR- Lightstreamer- Socket.io- Sock.js- …
  • Практикум: рисуем онлайн
  • Ссылки• WebSocket-протокол:http://tools.ietf.org/html/rfc6455• WebSocket-API:http://www.w3.org/TR/2011/WD-websockets-20110419/