Tweet
Tweet

Slide 1

Slide 1 text

Adam Jodłowski meet.js Poznań, 29.07.2011

Slide 2

Slide 2 text

HTTP ● żądanie-odpowiedź ● prostota ● bezstanowość ● skalowalność ● wydajność ● rozszerzalność

Slide 3

Slide 3 text

HTTP ● żądanie-odpowiedź ● prostota ● bezstanowość ● skalowalność ● wydajność ● rozszerzalność ● przyjęty standard ● powszechne stosowanie

Slide 4

Slide 4 text

HTTP ● żądanie-odpowiedź ● prostota ● bezstanowość ● skalowalność ● wydajność ● rozszerzalność ● przyjęty standard ● powszechne stosowanie mimo wielu zalet, nie nadaje się do wszystkiego

Slide 5

Slide 5 text

Trzeba sobie jakoś radzić ● AJAX

Slide 6

Slide 6 text

Trzeba sobie jakoś radzić ● AJAX  same origin policy  JSONP

Slide 7

Slide 7 text

Trzeba sobie jakoś radzić ● AJAX  same origin policy  JSONP musimy odpytywać serwer o nowe dane

Slide 8

Slide 8 text

Trzeba sobie jakoś radzić ● AJAX  same origin policy  JSONP musimy odpytywać serwer o nowe dane ● Comet a.k.a. Reverse AJAX

Slide 9

Slide 9 text

Trzeba sobie jakoś radzić ● AJAX  same origin policy  JSONP musimy odpytywać serwer o nowe dane ● Comet a.k.a. Reverse AJAX  forever iframe  long polling

Slide 10

Slide 10 text

WebSockets • technologia dwustronnej komunikacji sieciowej • wykorzystuje jedno gniazdko protokołu TCP • załatano krytyczne luki w bezpieczeństwie • standaryzacja w trakcie, aktualnie draft 10 (IETF, W3C)

Slide 11

Slide 11 text

WebSockets • technologia dwustronnej komunikacji sieciowej • wykorzystuje jedno gniazdko protokołu TCP • załatano krytyczne luki w bezpieczeństwie • standaryzacja w trakcie, aktualnie draft 10 (IETF, W3C) nawiązanie połączenia następuje poprzez HTTP (handshake) i przełączenie na protokół WS (Connection: Upgrade)

Slide 12

Slide 12 text

Socket.IO mechanizm komunikacji cross-domain w czasie rzeczywistym

Slide 13

Slide 13 text

Socket.IO mechanizm komunikacji cross-domain w czasie rzeczywistym ● udostępnia API na wzór WebSockets

Slide 14

Slide 14 text

Socket.IO mechanizm komunikacji cross-domain w czasie rzeczywistym ● udostępnia API na wzór WebSockets ● wewnętrznie korzysta z różnych transportów  WebSocket  Adobe Flash Socket  AJAX long polling  AJAX multipart streaming  Forever iframe  JSONP polling

Slide 15

Slide 15 text

Socket.IO mechanizm komunikacji cross-domain w czasie rzeczywistym ● udostępnia API na wzór WebSockets ● wewnętrznie korzysta z różnych transportów  WebSocket  Adobe Flash Socket  AJAX long polling  AJAX multipart streaming  Forever iframe  JSONP polling ● działa w IE 5.5+, Safari 3+, Chrome 4+, Firefox 3+, Opera 10.61+, iOS Safari, Android WebKit, WebOS WebKit

Slide 16

Slide 16 text

Socket.IO jeden z wielu modułów do NodeJS

Slide 17

Slide 17 text

Socket.IO jeden z wielu modułów do NodeJS ● npm install socket.io

Slide 18

Slide 18 text

Socket.IO jeden z wielu modułów do NodeJS ● npm install socket.io może współpracować z frameworkiem Express lub działać na własnym porcie jako osobny serwer

Slide 19

Slide 19 text

Serwer var io = require('socket.io').listen(1337); io.sockets.on('connection', function(socket) { // po czenie klienta łą socket.on('message', function(data) { // odebranie wiadomo ci ś }); socket.on('disconnect', function() { // roz czenie klienta łą }); });

Slide 20

Slide 20 text

Klient var socket = io.connect('http://server/'); socket.on('connect', function() { // po czenie z serwerem łą socket.send(msg); // wys anie wiadomo ci ł ś socket.on('message', function(data) { // odebranie wiadomo ci ś }); });

Slide 21

Slide 21 text

Socket.IO 0.7 – co nowego? ● przestrzenie nazw ● zdarzenia (custom events) ● potwierdzenia ● wiadomości ulotne ● grupy

Slide 22

Slide 22 text

Przestrzenie nazw (namespaces) standardowy WebSocket pozwala na komunikację w ramach jednego wewnętrznego protokołu

Slide 23

Slide 23 text

Przestrzenie nazw (namespaces) standardowy WebSocket pozwala na komunikację w ramach jednego wewnętrznego protokołu dla rozróżnienia rodzaju i sposobu obsługi komunikatów musimy wprowadzać dodatkowe informacje sterujące

Slide 24

Slide 24 text

Przestrzenie nazw (namespaces) standardowy WebSocket pozwala na komunikację w ramach jednego wewnętrznego protokołu dla rozróżnienia rodzaju i sposobu obsługi komunikatów musimy wprowadzać dodatkowe informacje sterujące multipleksacją wiadomości zajmuje się Socket.IO, serwer musi zaimplementować obsługę wielu kanałów a klient podłączyć się na dedykowane im adresy

Slide 25

Slide 25 text

Przestrzenie nazw (serwer) var io = require('socket.io').listen(1337); var chat = io .of('/chat'). .on('connection', function (socket) { chat.send('someone connected'); }); var news = io .of('/news'). .on('connection', function (socket) { news.json.send({news: 'breaking news'}); });

Slide 26

Slide 26 text

Przestrzenie nazw (klient) var chat = io.connect('http://server:1337/chat'); var news = io.connect('http://server:1337/news'); chat.on('connect', function() { // obs uga wiadomo ci z chatu ł ś }); news.on('connect', function() { // obs uga newsów ł });

Slide 27

Slide 27 text

Zdarzenia (custom events) zdarzenia definiowane przez użytkowników zwiększają elastyczność i czytelność komunikacji

Slide 28

Slide 28 text

Zdarzenia (custom events) zdarzenia definiowane przez użytkowników zwiększają elastyczność i czytelność komunikacji game.emit('new player', {nick: 'adamus', hp: 100});

Slide 29

Slide 29 text

Zdarzenia (custom events) zdarzenia definiowane przez użytkowników zwiększają elastyczność i czytelność komunikacji game.emit('new player', {nick: 'adamus', hp: 100}); game.on('new player', function (player) { console.log(player.nick + ' connected!'); });

Slide 30

Slide 30 text

Potwierdzenia (acknowledgements) ostatnim parametrem funkcji .send() i .emit() może być callback wykonywany po dostarczeniu wiadomości

Slide 31

Slide 31 text

Potwierdzenia (acknowledgements) ostatnim parametrem funkcji .send() i .emit() może być callback wykonywany po dostarczeniu wiadomości socket.send('lubi placki' ę , function() { // wiadomo dotar a do adresata ść ł });

Slide 32

Slide 32 text

Potwierdzenia (acknowledgements) dodatkowo, korzystając z .emit() możemy odsyłać własne dane wraz z potwierdzeniem odbioru socket.emit('has o?' ł , function (pass) { console.log('received password = ' + pass); }); socket.on('has o?' ł , function (callback) { callback('qwerty'); });

Slide 33

Slide 33 text

Wiadomości ulotne (volatile) komunikacja w czasie rzeczywistym wymaga czasem odstąpienia od wysyłania kolejnych wiadomości w przypadku zbyt dużego obciążenia strony odbierającej

Slide 34

Slide 34 text

Wiadomości ulotne (volatile) komunikacja w czasie rzeczywistym wymaga czasem odstąpienia od wysyłania kolejnych wiadomości w przypadku zbyt dużego obciążenia strony odbierającej jest to szczególnie ważne w przypadku stosowania bardziej zawodnych transportów (long polling)

Slide 35

Slide 35 text

Wiadomości ulotne (volatile) komunikacja w czasie rzeczywistym wymaga czasem odstąpienia od wysyłania kolejnych wiadomości w przypadku zbyt dużego obciążenia strony odbierającej jest to szczególnie ważne w przypadku stosowania bardziej zawodnych transportów (long polling) socket.volatile.emit('new tweet', tweet);

Slide 36

Slide 36 text

Grupy obsługa grup wprowadza kolejną warstwę abstrakcji ułatwiającą kontrolę nad komunikacją

Slide 37

Slide 37 text

Grupy obsługa grup wprowadza kolejną warstwę abstrakcji ułatwiającą kontrolę nad komunikacją typowym zastosowaniem mogą być pokoje w czacie

Slide 38

Slide 38 text

Grupy obsługa grup wprowadza kolejną warstwę abstrakcji ułatwiającą kontrolę nad komunikacją typowym zastosowaniem mogą być pokoje w czacie io.sockets.on('connection', function(socket) { socket.join('js-news'); // do czenie łą // broadcast do wszystkich z mojej grupy socket.broadcast.to('js-news').send('witam!'); // do wszystkich z innej grupy io.sockets.in('ruby-news').emit(' egnam!' ż ); });

Slide 39

Slide 39 text

Przyszłość? Many exciting things are still to come.