Socket.IO Introduction

6247c099ad62bf727a4f9df10b6c6f23?s=47 orisano
December 04, 2018

Socket.IO Introduction

6247c099ad62bf727a4f9df10b6c6f23?s=128

orisano

December 04, 2018
Tweet

Transcript

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

  2. Socket.IO஌ͬͯΔਓ

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

  4. Socket.IO஻ΕΔਓ

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

  6. ͦ΋ͦ΋Socket.IOͱ͸

  7. Socket.IO • FEATURING THE FASTEST AND MOST RELIABLE REAL-TIME ENGINE

    • ૣͯ͘৴པͰ͖ΔϦΞϧλΠϜΤϯδϯ • ϦΞϧλΠϜͰ૒ํ޲ͷevent-basedͳ௨৴
  8. Socket.IO • Node.jsͰ࣮૷͞Ε͍ͯΔ • ࠓ͸version 2.0 • ϒϥ΢βͰϦΞϧλΠϜ௨৴ͳΒ͜Εͱ͍͏ • ΩϥʔΞϓϦͩͬͨ

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

  10. Socket.IO !== WebSocket

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

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

  13. Engine.IO • WebSocket [packet] • Polling [payload] • XMLHttpRequest •

    JSONP • MUST support three transport
  14. 8FC4PDLFU 9.-)UUQ3FRVFTU +40/1 &OHJOF*0 4PDLFU*0 #SPXTFS$MJFOU

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

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

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

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

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

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

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

  22. େ෼୤ઢ͠·͕ͨ͠

  23. Socket.IOΛ஻Δʹ͸

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

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

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

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

  28. ·ͣ͸Engine.IOΛ஻Δ

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

    type id>[data] ୯७ͳformat
  30. Engine.IO • 0 open, αʔό͔Β࠷ॳʹૹΒΕͯ͘Δ • 1 close, ੾அ͢Δͱ͖ʹૹΔ •

    2 ping, ͪ͜Β͔ΒૹΔੜଘใࠂ • 3 pong, pingΛड͚औͬͨ࣌ʹαʔό͔Βฦͬͯ͘Δ • 4 message, σʔλΛૹड৴͢Δ࣌ʹ࢖͏ • 5 upgrade, transportΛม͑Δ࣌ʹૹΔ • 6 noop, ͳʹ΋͠ͳ͍
  31. git clone https://github.com/orisano/socketio-handson cd socketio-handson npm i npm run serve:eio

    npm run conn:eio
  32. Engine.IO • < 0******* // open • > 2 //

    ping • < 3 // pong • > 4hello. engine.io // message • < 4reply:hello
  33. ͜ΕͰEngine.IO͸׬ᘳ

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

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

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

    simple
  37. Socket.IO • 0 CONNECT, αʔό͔Β࠷ॳʹૹΒΕͯ͘Δ • 1 DISCONNECT, ੾அ͢Δͱ͖ʹૹΔ •

    2 EVENT, Πϕϯτ͕ى͖ͨ࣌ʹૹड৴͢Δ • 3 ACK,ಛఆͷύέοτʹରͯ͠ฦ৴͢Δ࣌ʹ࢖͏ • 4 ERROR,Τϥʔ͕ى͖ͨ࣌ʹ࢖͏ • 5 BINARY_EVENT, όΠφϦΛૹΔ࣌͸ͬͪ͜ • 6 BINARY_ACK, όΠφϦΛฦ࣌͢͸ͬͪ͜
  38. npm run serve:sio npm run conn:sio

  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
  40. ͜ΕͰSocket.IO΋׬ᘳ

  41. ͦ΋ͦ΋

  42. ͳΜͰSocket.IOͷ࿩ʁ

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