今更 WebSocket を学んでみた話 #sacss

גࣜձࣾϊʔεσΟςʔϧ ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ UBDDL໦ݪ୎໵ !UBDDL 4B$44WPM TBDTT ࠓߋ8FC4PDLFUΛ ֶΜͰΈͨ࿩ ೥݄೔

!UBDDL 4B$44WPM TBDTT • ໊લ ໦ݪ ୎໵ / @tacck •
ॴଐ גࣜձࣾϊʔεσΟςʔϧ  ։ൃDivision ٕज़ਪਐGroup / Leader • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ ୭ PHP Conference Hokkaido 2019

!UBDDL 4B$44WPM TBDTT 8FC4PDLFUͱ͸

!UBDDL 4B$44WPM TBDTT • WebΫϥΠΞϯτ - WebαʔόؒͰ࢖͑Δɺ  ͓खܰͳ૒ํ޲௨৴ͷن֨ɻ • Webϒϥ΢β؍఺Ͱ͸ɺJavaScriptͷ 
ΠϕϯτϕʔεͰ࣮૷Մೳɻ  → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ  →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ΍͍͢ɻ 8FC4PDLFUͱ͸

!UBDDL 4B$44WPM TBDTT )551௨৴ͱ͸

!UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτͰ͢ αʔόʔͰ͢

!UBDDL 4B$44WPM TBDTT ௨৴ͯ͠΋͔͑͑? Ͱ͖ͱΔͰɻ ͑͑Αɻ ͦͬͪ͸४උ Ͱ͖ͱΔΜ͔? SYN ACK
SYN-ACK ઀ଓ։࢝ TCP

!UBDDL 4B$44WPM TBDTT ͋Εͪΐ͏͍ͩɻ ͑͑Αɻ ड͚औͬͯ΍ɻ Request Response ৘ใऔಘ HTTP
GET

!UBDDL 4B$44WPM TBDTT ͜Ε౉͢Θɻ ͑͑Αɻ ड͚औͬͨͰɻ Request Response ৘ใૹ৴ HTTP
POST/PUT/ DELETE

!UBDDL 4B$44WPM TBDTT … … ઀ଓҡ࣋ HTTP KeepAlive

!UBDDL 4B$44WPM TBDTT ͑͑Ͱɻ ౉͢΋Μ౉ͨ͠͠ɺ ΋͏͑͑΍Ζɻ ઀ଓऴྃ TCP ΄ͳ·ͨͳɻ ΄ͳɺ͍͞ͳΒɻ
ACK FIN ACK FIN

!UBDDL 4B$44WPM TBDTT • ϒϥ΢β͔Βαʔόʔʹݺͼ͔͚ͯ௨৴։࢝ (TCP) • ϒϥ΢βܖػͰαʔόʔͱσʔλૹड৴ (HTTP) •
΍ΓͱΓ͕ऴΘͬͯ΋গ͠͸ܨ͍ͩ·· (HTTP/1.1 KeepAlive) • ͠͹Β͘ܦͭͱ௨৴ऴྃ )551 ͷجຊ

!UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ  ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ
• ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ  ࣮ݱͰ͖ͳ͍ɻ )551 ͷ՝୊

!UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ  ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ
• ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ  ࣮ݱͰ͖ͳ͍ɻ • HTTP/2.0 ͔Βͷ࿩͸ɺࠓճׂѪɻ )551 ͷ՝୊

!UBDDL 4B$44WPM TBDTT • WebSocket Λ࢖͏ͱɺ  αʔόʔܖػͰσʔλૹ৴Λߦͳ͑Δɻ  (ैདྷͷ HTTP ͚ͩͰ͸Ͱ͖ͳ͔ͬͨɻ)
• ΫϥΠΞϯτ͸ɺ JavaScript ͷΠϕϯτͱͯ͠  ॲཧͰ͖ΔͷͰɺ࣮૷೉қ౓͸ͦ͜·Ͱߴ͘ͳ͍ɻ • αʔόʔͷ࣮૷΋ɺجຊ͸ͦ͜·Ͱ೉͘͠ͳ͍ɻ 8FC4PDLFUͰ՝୊ղܾ

!UBDDL 4B$44WPM TBDTT WebSocket ࢖Θͤͯ΍ Request Response WebSocket։࢝ HTTP GET
͑͑Ͱɻ ͔ͬ͜Βઌ͸ WebSocket΍Ͱɻ WebSocket

!UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτ͔Β WebSocket ΫϦοΫ͞ΕͨͰ Message ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ

!UBDDL 4B$44WPM TBDTT αʔόʔ͔Β WebSocket ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ Message σʔλߋ৽͞ΕͨͰ

!UBDDL 4B$44WPM TBDTT ࣮ફ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

!UBDDL 4B$44WPM TBDTT • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ  idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ •
Χ΢ϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ  શΫϥΠΞϯτʹ݁Ռૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

!UBDDL 4B$44WPM TBDTT socket.on('message', message => { console.log(message) const obj
= JSON.parse(message) const type = obj.message const data = obj.data if (type === 'post') { selections[data.id].count++ } wss.clients.forEach(client => { client.send(JSON.stringify( { message: 'selections', data: selections } )) }) })

!UBDDL 4B$44WPM TBDTT • Webϒϥ΢β (Vue.js) • “selections”ϝοηʔδΛड͚औͬͨΒɺ  બ୒ࢶͷத਎ͱΧ΢ϯτΛߋ৽ɻ •
ϘλϯΫϦοΫͰɺ “post”ϝοηʔδૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP mounted() { this.ws = new WebSocket('wss://tacck-ws.herokuapp.com/') const
self = this this.ws.addEventListener('message', message => { const obj = JSON.parse(message.data) const type = obj.message const data = obj.data if (type === 'selections') { self.selections = data } }) }, methods: { send(id) { this.ws.send(JSON.stringify( { message: 'post', data: { id: id } } )) } }

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࢼͦ͏ https://github.com/tacck/websocket-sample-client-vuejs https://github.com/tacck/websocket-sample-server-nodejs

!UBDDL 4B$44WPM TBDTT ࣮ફ ϦΞϧλΠϜ ΞϯέʔτγεςϜ

!UBDDL 4B$44WPM TBDTT ·ͱΊ

!UBDDL 4B$44WPM TBDTT • ैདྷͷ HTTP/1.0,1.1 Ͱ͸  αʔόʔܖػͰσʔλૹड৴͕Ͱ͖ͳ͔ͬͨɻ • WebSocket
ͰͦΕΛղܾՄೳɻ • ΑΓൃలͨ͠࢓૊Έ͸ HTTP/2.0 Ҏ߱ʹ͋Δ͕ɺ  ͦΕ͸·ͨผͷ͓࿩ɻ ·ͱΊ

!UBDDL 4B$44WPM TBDTT FOE

今更 WebSocket を学んでみた話 #sacss

今更 WebSocket を学んでみた話 #sacss

Kihara, Takuya

More Decks by Kihara, Takuya

Other Decks in Technology

Featured

Transcript

גࣜձࣾϊʔεσΟςʔϧ ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ UBDDL໦ݪ୎໵ !UBDDL 4B$44WPM TBDTT ࠓߋ8FC4PDLFUΛ ֶΜͰΈͨ࿩ ೥݄೔

!UBDDL 4B$44WPM TBDTT • ໊લ ໦ݪ ୎໵ / @tacck •

!UBDDL 4B$44WPM TBDTT 8FC4PDLFUͱ͸

!UBDDL 4B$44WPM TBDTT • WebΫϥΠΞϯτ - WebαʔόؒͰ࢖͑Δɺ  ͓खܰͳ૒ํ޲௨৴ͷن֨ɻ • Webϒϥ΢β؍఺Ͱ͸ɺJavaScriptͷ

!UBDDL 4B$44WPM TBDTT )551௨৴ͱ͸

!UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτͰ͢ αʔόʔͰ͢

!UBDDL 4B$44WPM TBDTT ௨৴ͯ͠΋͔͑͑? Ͱ͖ͱΔͰɻ ͑͑Αɻ ͦͬͪ͸४උ Ͱ͖ͱΔΜ͔? SYN ACK

!UBDDL 4B$44WPM TBDTT ͋Εͪΐ͏͍ͩɻ ͑͑Αɻ ड͚औͬͯ΍ɻ Request Response ৘ใऔಘ HTTP

!UBDDL 4B$44WPM TBDTT ͜Ε౉͢Θɻ ͑͑Αɻ ड͚औͬͨͰɻ Request Response ৘ใૹ৴ HTTP

!UBDDL 4B$44WPM TBDTT … … ઀ଓҡ࣋ HTTP KeepAlive

!UBDDL 4B$44WPM TBDTT ͑͑Ͱɻ ౉͢΋Μ౉ͨ͠͠ɺ ΋͏͑͑΍Ζɻ ઀ଓऴྃ TCP ΄ͳ·ͨͳɻ ΄ͳɺ͍͞ͳΒɻ

!UBDDL 4B$44WPM TBDTT • ϒϥ΢β͔Βαʔόʔʹݺͼ͔͚ͯ௨৴։࢝ (TCP) • ϒϥ΢βܖػͰαʔόʔͱσʔλૹड৴ (HTTP) •

!UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ  ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

!UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ  ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

!UBDDL 4B$44WPM TBDTT • WebSocket Λ࢖͏ͱɺ  αʔόʔܖػͰσʔλૹ৴Λߦͳ͑Δɻ  (ैདྷͷ HTTP ͚ͩͰ͸Ͱ͖ͳ͔ͬͨɻ)

!UBDDL 4B$44WPM TBDTT WebSocket ࢖Θͤͯ΍ Request Response WebSocket։࢝ HTTP GET

!UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτ͔Β WebSocket ΫϦοΫ͞ΕͨͰ Message ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ

!UBDDL 4B$44WPM TBDTT αʔόʔ͔Β WebSocket ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ Message σʔλߋ৽͞ΕͨͰ

!UBDDL 4B$44WPM TBDTT ࣮ફ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

!UBDDL 4B$44WPM TBDTT • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ  idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ •

!UBDDL 4B$44WPM TBDTT socket.on('message', message => { console.log(message) const obj

!UBDDL 4B$44WPM TBDTT • Webϒϥ΢β (Vue.js) • “selections”ϝοηʔδΛड͚औͬͨΒɺ  બ୒ࢶͷத਎ͱΧ΢ϯτΛߋ৽ɻ •

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP mounted() { this.ws = new WebSocket('wss://tacck-ws.herokuapp.com/') const

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࢼͦ͏ https://github.com/tacck/websocket-sample-client-vuejs https://github.com/tacck/websocket-sample-server-nodejs

!UBDDL 4B$44WPM TBDTT ࣮ફ ϦΞϧλΠϜ ΞϯέʔτγεςϜ

!UBDDL 4B$44WPM TBDTT ·ͱΊ

!UBDDL 4B$44WPM TBDTT • ैདྷͷ HTTP/1.0,1.1 Ͱ͸  αʔόʔܖػͰσʔλૹड৴͕Ͱ͖ͳ͔ͬͨɻ • WebSocket

!UBDDL 4B$44WPM TBDTT FOE