Socket.IO Introduction

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࣮૷Λ ࡞ͬͨͷͰએ఻