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

Socket.IO Introduction

orisano
December 04, 2018

Socket.IO Introduction

orisano

December 04, 2018
Tweet

More Decks by orisano

Other Decks in Technology

Transcript

  1. Socket.IOʹೖ໳ͨ͠
    @orisano

    View Slide

  2. Socket.IO஌ͬͯΔਓ

    View Slide

  3. Socket.IO࢖ͬͨ͜ͱ͋Δਓ

    View Slide

  4. Socket.IO஻ΕΔਓ

    View Slide

  5. ΰʔϧ
    Socket.IO͕஻ΕΔΑ͏ʹͳΔ

    View Slide

  6. ͦ΋ͦ΋Socket.IOͱ͸

    View Slide

  7. Socket.IO
    • FEATURING THE FASTEST AND MOST
    RELIABLE REAL-TIME ENGINE
    • ૣͯ͘৴པͰ͖ΔϦΞϧλΠϜΤϯδϯ
    • ϦΞϧλΠϜͰ૒ํ޲ͷevent-basedͳ௨৴

    View Slide

  8. Socket.IO
    • Node.jsͰ࣮૷͞Ε͍ͯΔ
    • ࠓ͸version 2.0
    • ϒϥ΢βͰϦΞϧλΠϜ௨৴ͳΒ͜Εͱ͍͏
    • ΩϥʔΞϓϦͩͬͨ

    View Slide

  9. Α͋͘Δޡղͱͯ͠
    Socket.IO == WebSocket

    View Slide

  10. Socket.IO !== WebSocket

    View Slide

  11. Socket.IO
    • Ή͠ΖWebSocketͷରԠঢ়گ͕ѱ͔ͬͨ࣌ظ
    ʹಉ༷ͷ͜ͱΛ͢ΔͨΊͷ΋ͷͩͬͨ
    • Transport͸WebSocketͰͳͯ͘΋Α͍
    • Transport͸Engine.IOͰந৅Խ͞Ε͍ͯΔ

    View Slide

  12. Engine.IO
    • Socket.IOͷͨΊʹ࡞ΒΕͨRealtime Engine
    • ௨৴ϨΠϠʔ·Ͱ͔͠ݟͳ͍
    • eventͱ͔ͦ͏͍͏ػೳ͸ଘࡏ͠ͳ͍

    View Slide

  13. Engine.IO
    • WebSocket [packet]
    • Polling [payload]
    • XMLHttpRequest
    • JSONP
    • MUST support three transport

    View Slide

  14. 8FC4PDLFU 9.-)UUQ3FRVFTU +40/1
    &OHJOF*0
    4PDLFU*0
    #SPXTFS$MJFOU

    View Slide

  15. ͑ͬ໘౗ष͞
    ࠓͷ࣌୅
    WebSocketͰ͍͍Ͱ͠ΐ

    View Slide

  16. https://blog.jxck.io/entries/
    2016-08-22/websocket-
    connectivity.html

    View Slide

  17. ·ͱΊ
    • RFCʹଇͬͨWebSocket͸IE11͔Β
    • Connection: UpgradeΛམͱ͢ϛυϧϘοΫε
    • HTTPͰ௕࣌ؒுΓͬͺͳ͠ͷίωΫγϣϯΛ
    ੾ΔϛυϧϘοΫε

    View Slide

  18. ·ͱΊ
    • RFCʹଇͬͨWebSocket͸IE11͔Β
    • Connection: UpgradeΛམͱ͢ϛυϧϘοΫε
    • HTTPͰ௕࣌ؒுΓͬͺͳ͠ͷίωΫγϣϯΛ
    ੾ΔϛυϧϘοΫε
    IEͬͯͳΜͰ͔͢ʁ

    View Slide

  19. ·ͱΊ
    • RFCʹଇͬͨWebSocket͸IE11͔Β
    • Connection: UpgradeΛམͱ͢ϛυϧϘοΫε
    • HTTPͰ௕࣌ؒுΓͬͺͳ͠ͷίωΫγϣϯΛ
    ੾ΔϛυϧϘοΫε
    IEͬͯͳΜͰ͔͢ʁ
    ҉߸Խ͢Ε͹໰୊ͳ͍Ͱ͢. wssΛ࢖͏.

    View Slide

  20. ·ͱΊ
    • RFCʹଇͬͨWebSocket͸IE11͔Β
    • Connection: UpgradeΛམͱ͢ϛυϧϘοΫε
    • HTTPͰ௕࣌ؒுΓͬͺͳ͠ͷίωΫγϣϯΛ
    ੾ΔϛυϧϘοΫε
    IEͬͯͳΜͰ͔͢ʁ
    ҉߸Խ͢Ε͹໰୊ͳ͍Ͱ͢. wssΛ࢖͏.
    Ͳ͏ʹ΋ͳΒͳ͍

    View Slide

  21. ·ͱΊ
    • ࣮ࡍͲͷఔ౓ଘࡏ͢Δͷ͔Θ͔Βͳ͍
    • ͍ΜͨʔͶͬͱ͸೉͍͠ͷͰଞͷݪҼ΋͋Δ
    • ϦΞϧλΠϜ௨৴͕؊Ͱ͍ΖΜͳ؀ڥͷϢʔβ
    ʹ࢖ͬͯ΋Β͍͍ͨ৔߹͸Socket.IO

    View Slide

  22. େ෼୤ઢ͠·͕ͨ͠

    View Slide

  23. Socket.IOΛ஻Δʹ͸

    View Slide

  24. 8FC4PDLFU 9.-)UUQ3FRVFTU +40/1
    &OHJOF*0
    4PDLFU*0
    #SPXTFS$MJFOU

    View Slide

  25. ਓ͕ؒ
    WebSocket஻Δͷ͸
    “””೉͍͠”””

    View Slide

  26. ͦΕΑΓ্ͷϨΠϠʔ
    ͱ͍͏͜ͱʹ͠·͢

    View Slide

  27. 8FC4PDLFU 9.-)UUQ3FRVFTU +40/1
    &OHJOF*0
    4PDLFU*0
    #SPXTFS$MJFOU

    View Slide

  28. ·ͣ͸Engine.IOΛ஻Δ

    View Slide

  29. Engine.IO
    • https://github.com/socketio/engine.io-protocol
    • ࠓ͸revision: 3
    • ͘͢͝γϯϓϧͰ໋ྩ͕7छྨ͔͠ͳ͍
    • [data] ୯७ͳformat

    View Slide

  30. Engine.IO
    • 0 open, αʔό͔Β࠷ॳʹૹΒΕͯ͘Δ
    • 1 close, ੾அ͢Δͱ͖ʹૹΔ
    • 2 ping, ͪ͜Β͔ΒૹΔੜଘใࠂ
    • 3 pong, pingΛड͚औͬͨ࣌ʹαʔό͔Βฦͬͯ͘Δ
    • 4 message, σʔλΛૹड৴͢Δ࣌ʹ࢖͏
    • 5 upgrade, transportΛม͑Δ࣌ʹૹΔ
    • 6 noop, ͳʹ΋͠ͳ͍

    View Slide

  31. git clone https://github.com/orisano/socketio-handson
    cd socketio-handson
    npm i
    npm run serve:eio
    npm run conn:eio

    View Slide

  32. Engine.IO
    • < 0******* // open
    • > 2 // ping
    • < 3 // pong
    • > 4hello. engine.io // message
    • < 4reply:hello

    View Slide

  33. ͜ΕͰEngine.IO͸׬ᘳ

    View Slide

  34. ͋ͱ͸Socket.IO͕஻ΕΕ͹

    View Slide

  35. Socket.IO
    • https://github.com/socketio/socket.io-protocol
    • ࠓ͸revision: 4
    • ͘͢͝γϯϓϧͰ໋ྩ͕7छྨ͔͠ͳ͍
    • formatͷৄࡉʹ͍ͭͯ͸͋·Γॻ͍ͯͳ͍

    View Slide

  36. Socket.IO
    • socket.io-parserͷ࣮૷ΛݟΔ
    • [(attachments)-]
    [(namespace:/),][id][data]
    • ͏Μ, simple

    View Slide

  37. Socket.IO
    • 0 CONNECT, αʔό͔Β࠷ॳʹૹΒΕͯ͘Δ
    • 1 DISCONNECT, ੾அ͢Δͱ͖ʹૹΔ
    • 2 EVENT, Πϕϯτ͕ى͖ͨ࣌ʹૹड৴͢Δ
    • 3 ACK,ಛఆͷύέοτʹରͯ͠ฦ৴͢Δ࣌ʹ࢖͏
    • 4 ERROR,Τϥʔ͕ى͖ͨ࣌ʹ࢖͏
    • 5 BINARY_EVENT, όΠφϦΛૹΔ࣌͸ͬͪ͜
    • 6 BINARY_ACK, όΠφϦΛฦ࣌͢͸ͬͪ͜

    View Slide

  38. npm run serve:sio
    npm run conn:sio

    View Slide

  39. Socket.IO
    • > 0 // e:open
    • > 40 // e:message s:connect
    • < 42[“message”,”hello”] // e:message s:event data
    • > 42[“reply”,”?hello”] // e:message s:event data
    • < 41 // e:message s:disconnect
    • < 42[“message”,”hello”] // e:message s:event data
    • < 40 // e:message s:connect
    • < 42[“message”,”hello”] // e:message s:event data
    • > 42[“reply”,”?hello”] // e:message s:event data

    View Slide

  40. ͜ΕͰSocket.IO΋׬ᘳ

    View Slide

  41. ͦ΋ͦ΋

    View Slide

  42. ͳΜͰSocket.IOͷ࿩ʁ

    View Slide

  43. https://github.com/orisano/gomasio
    socket.io-clientͷgolang࣮૷Λ
    ࡞ͬͨͷͰએ఻

    View Slide