גࣜձࣾϊʔεσΟςʔϧ ։ൃ%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