Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Socket.IO (2011)

Socket.IO (2011)

Omówienie i demonstracja głównych koncepcji i możliwości API wersji 0.7 Socket.IO, biblioteki dostarczającej mechanizm komunikacyjny na wzór WebSockets i działającej w oparciu o node.js. Prezentacja wygłoszona na spotkaniu meet.js w Poznaniu.

Adam Jodłowski

July 29, 2011
Tweet

More Decks by Adam Jodłowski

Other Decks in Programming

Transcript

  1. Adam Jodłowski
    meet.js Poznań, 29.07.2011

    View full-size slide

  2. HTTP

    żądanie-odpowiedź

    prostota

    bezstanowość

    skalowalność

    wydajność

    rozszerzalność

    View full-size slide

  3. HTTP

    żądanie-odpowiedź

    prostota

    bezstanowość

    skalowalność

    wydajność

    rozszerzalność

    przyjęty standard

    powszechne stosowanie

    View full-size slide

  4. HTTP

    żądanie-odpowiedź

    prostota

    bezstanowość

    skalowalność

    wydajność

    rozszerzalność

    przyjęty standard

    powszechne stosowanie
    mimo wielu zalet, nie nadaje się do wszystkiego

    View full-size slide

  5. Trzeba sobie jakoś radzić

    AJAX

    View full-size slide

  6. Trzeba sobie jakoś radzić

    AJAX

    same origin policy

    JSONP

    View full-size slide

  7. Trzeba sobie jakoś radzić

    AJAX

    same origin policy

    JSONP
    musimy odpytywać serwer o nowe dane

    View full-size slide

  8. Trzeba sobie jakoś radzić

    AJAX

    same origin policy

    JSONP
    musimy odpytywać serwer o nowe dane

    Comet a.k.a. Reverse AJAX

    View full-size slide

  9. 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

    View full-size slide

  10. 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)

    View full-size slide

  11. 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)

    View full-size slide

  12. Socket.IO
    mechanizm komunikacji cross-domain
    w czasie rzeczywistym

    View full-size slide

  13. Socket.IO
    mechanizm komunikacji cross-domain
    w czasie rzeczywistym

    udostępnia API na wzór WebSockets

    View full-size slide

  14. 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

    View full-size slide

  15. 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

    View full-size slide

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

    View full-size slide

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

    npm install socket.io

    View full-size slide

  18. 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

    View full-size slide

  19. 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
    łą
    });
    });

    View full-size slide

  20. Klient

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

    View full-size slide

  21. Socket.IO 0.7 – co nowego?

    przestrzenie nazw

    zdarzenia (custom events)

    potwierdzenia

    wiadomości ulotne

    grupy

    View full-size slide

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

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. 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'});
    });

    View full-size slide

  26. 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
    ł
    });

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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!');
    });

    View full-size slide

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

    View full-size slide

  31. 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
    ść ł
    });

    View full-size slide

  32. 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');
    });

    View full-size slide

  33. 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

    View full-size slide

  34. 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)

    View full-size slide

  35. 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);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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!'
    ż );
    });

    View full-size slide

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

    View full-size slide