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