Socket.IO Introduction - Speaker Deck

Socket.IO Introduction

by orisano

Slide 1

Slide 1 text

Socket.IOʹೖ໳ͨ͠ @orisano

Slide 2

Slide 2 text

Socket.IO஌ͬͯΔਓ

Slide 3

Slide 3 text

Socket.IO࢖ͬͨ͜ͱ͋Δਓ

Slide 4

Slide 4 text

Socket.IO஻ΕΔਓ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ͦ΋ͦ΋Socket.IOͱ͸

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Socket.IO !== WebSocket

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

େ෼୤ઢ͠·͕ͨ͠

Slide 23

Slide 23 text

Socket.IOΛ஻Δʹ͸

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ͦΕΑΓ্ͷϨΠϠʔ ͱ͍͏͜ͱʹ͠·͢

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

·ͣ͸Engine.IOΛ஻Δ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

͜ΕͰEngine.IO͸׬ᘳ

Slide 34

Slide 34 text

͋ͱ͸Socket.IO͕஻ΕΕ͹

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

npm run serve:sio npm run conn:sio

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

͜ΕͰSocket.IO΋׬ᘳ

Slide 41

Slide 41 text

ͦ΋ͦ΋

Slide 42

Slide 42 text

ͳΜͰSocket.IOͷ࿩ʁ

Slide 43

Slide 43 text

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