Tweet
Tweet

Slide 1

Slide 1 text

Node.js + WebSocket Ͱ ςβϦϯάͯ͠Έͨ 2013/6/7 M3 Tech Talk #2! ! ߳઒ पฏ

Slide 2

Slide 2 text

ࣗݾ঺հ 5/1 ೖࣾ! લ৬Ͱ͸ .NET Ͱ CAD ΧελϚΠζɺ Web ੍࡞ɺFlash ͰαΠωʔδɺ Ruby on Rails Ͱ ΋Ζ΋ΖɺͳͲ! ޷͖ͳݴޠ͸ Ruby ͱ JavaScript ͱ࠷ۙ Scala

Slide 3

Slide 3 text

https://github.com/shuhei/tether

Slide 4

Slide 4 text

Server! Client! Browser! HTTP Proxy Mobile! Safari Websit Adhoc Network Web! Socket Web! Socket Websit Websit Architecture

Slide 5

Slide 5 text

ंྠͷ࠶ൃ໊ • t.free http://connectfree.jp/tetherfree/! • https://github.com/spoletto/iOS-HTML5- Tethering! • େֶͷ՝୊
 http://cs.brown.edu/courses/cs168/s12/ handouts/tether.pdf http://www.flickr.com/photos/60317050@N08/8595670162

Slide 6

Slide 6 text

ಈػ 12/15 ιϑτόϯΫͷςβϦϯάղېΑΓલ! ͜Ε·Ͱ্ͬ໘͹͔Γɾɾɾ΋͏ͪΐͬͱԼ ͷํΛͪΌΜͱ஌Γ͍ͨ! Node.js Ͱ Express, Socket.IO ࢖Θͳ͍΋ͷ ࡞Γ͍ͨ

Slide 7

Slide 7 text

TUN TAP Software network device! ୺຤ͷύέοτશͯΛԣऔΓͰ͖Δ! Ͱ΋ɺNode.js Ͱ৮Εͳͦ͞͏ɾɾɾ! Native module ॻ͚ͳ͍͠ɾɾɾ

Slide 8

Slide 8 text

HTTP Proxy TCP Ҏ্ͳΒ Node.js Ͱ؆୯ʹ৮ΕΔ! HTTP Tunneling ͢Ε͹ɺ͍Ζ͍Ζͳϓϩτί ϧ΋αϙʔτͰ͖Δ͸ͣʂ

Slide 9

Slide 9 text

WebSocket Binary data Λྲྀ͍ͨ͠! Base64 encode/decode ஗͘ͳΔ! Socket.IO ͸ x! BinaryJS ͱ͔͋Δ͚Ͳɾɾɾ

Slide 10

Slide 10 text

ࣗ࡞ • ࡞ͬͯΈΑ͏ʂ • ࢓༷ॻ http://tools.ietf.org/html/rfc6455 • WebSocket αʔόͷ࣮૷ͱϓϩτίϧ ղઆ http://d.hatena.ne.jp/Jxck/20120725/ 1343174392 http://www.flickr.com/photos/60317050@N08/8735098936/

Slide 11

Slide 11 text

WebSocket server ͷ࣮૷ UPGRADE request! ͭͳ͗ͬͺͳ͠ͷ TCP ઀ଓ! ͦͷதͰɺϓϩτίϧʹ४ڌͨ͠σʔλͷ΍ ΓऔΓɻ

Slide 12

Slide 12 text

WebSocket Protocol 0: FIN+OPCODE, 1: Payload Length, 2-: Payload! 0: FIN+OPCODE, 1: 0x7e, 2-3: Payload Length, 4-: Payload! ҎԼಉจ! socket ͷσʔλΛ஍ಓʹ 1byte ͣͭຒΊΔ/ಡ ΈऔΔ

Slide 13

Slide 13 text

Server! Client! Browser! HTTP Proxy Mobile! Safari Websit Adhoc Network Web! Socket Web! Socket Websit Websit Architecture

Slide 14

Slide 14 text

TCP server as HTTP Proxy Browser ͔Βͷ request Λ TCP server Ͱड͚ Δ! Binary ͷ·· WebSocket Ͱ server ΁! σʔλͷઌ಄ʹ 2 byte ෼ port ൪߸Λ෇Ճ

Slide 15

Slide 15 text

TCP client as HTTP client WebSocket ͰૹΒΕ͖ͯͨ binary Λɺ࠷ॳͩ ͚ toString ͯ͠ host:port Λऔಘ! TCP ઀ଓͨ͠Βɺޙ͸ͻͨ͢Β binary Λྲྀ͢

Slide 16

Slide 16 text

Keep-alive ͷ᠘ • ϒϥ΢β͸ϓϩΩγͱͷ઀ଓΛ੾Βͣ ʹɺผͷϗετѼͷϦΫΤετΛૹͬ ͯ͘Δ! • ࠞઢʂʂʂ http://www.flickr.com/photos/hatm/5704687902/

Slide 17

Slide 17 text

HTTP server & client ʹ ΍ͬͺΓϦΫΤετຖʹ header Λ parse ͠ ͳ͍ͱବ໨ͩͬͨ! HTTP request Λ parse ͢ΔͳΒ http.Server! Node ͷ HTTP parser ͸ native

Slide 18

Slide 18 text

ࠞઢΛ๷͙ Browser ͔Βͷ request ຖʹ 16 byte ͷ UUID ΛৼΔ! Server ଆͰ΋ɺUUID Λ΋ͱʹࣝผ! ෳ਺୺຤ରԠͯ͠΋ࠞઢ͠ͳ͍͸ͣ

Slide 19

Slide 19 text

HTTPS CONNECT request! Socket ͔Βͷ data Λ browser ͔Β web server ΁ૉ௨͢͠Δ! ૉ௨͠ͳͷͰɺ҉߸Խ͞Ε͍ͯͯ΋໰୊ͳ͠

Slide 20

Slide 20 text

Demo

Slide 21

Slide 21 text

ײ૝ TCP ͍͢͝ɻॱ൪΋อূ͞ΕͯΔ! όΠφϦʹগ͠׳Εͨ! Keep-alive ͳͲ઀ଓͷ؅ཧΉ͔͍ͣ͠! ंྠͷ࠶։ൃɺͳ͔ͳ͔ͪΌΜͱಈ͔ͳ͍͚ Ͳɺಈ͘ͱָ͍͠! ςβϦϯάΦϓγϣϯղ໿΁ͷಓ͸ԕ͍...

Slide 22

Slide 22 text

ࠓޙ HTTP tunneling: SSH Λ௨͍ͨ͠! Web αʔό΁ͷಉ࣌઀ଓ਺ͷ੍ޚ