SaCSS vol.111 https://connpass.com/event/164156/
גࣜձࣾϊʔεσΟςʔϧ։ൃ%JWJTJPOٕज़ਪਐ(SPVQUBDDLݪ!UBDDL4B$44WPMTBDTTࠓߋ8FC4PDLFUΛֶΜͰΈ݄ͨ
View Slide
!UBDDL4B$44WPMTBDTT• ໊લݪ / @tacck• ॴଐגࣜձࣾϊʔεσΟςʔϧ ։ൃDivision ٕज़ਪਐGroup / Leader• ओ࠵• ΏΔWebษڧձ@ࡳຈ• εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ• ͖ͳϑΟΪϡΞεέʔτͷٕεϓϨουɾΠʔάϧ୭PHP Conference Hokkaido 2019
!UBDDL4B$44WPMTBDTT8FC4PDLFUͱ
!UBDDL4B$44WPMTBDTT• WebΫϥΠΞϯτ - WebαʔόؒͰ͑Δɺ ͓खܰͳํ௨৴ͷن֨ɻ• Webϒϥβ؍ͰɺJavaScriptͷ ΠϕϯτϕʔεͰ࣮Մೳɻ → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ͍͢ɻ8FC4PDLFUͱ
!UBDDL4B$44WPMTBDTT)551௨৴ͱ
!UBDDL4B$44WPMTBDTTΫϥΠΞϯτͰ͢ αʔόʔͰ͢
!UBDDL4B$44WPMTBDTT௨৴͔ͯ͑͑͠?Ͱ͖ͱΔͰɻ͑͑Αɻͦͬͪ४උͰ͖ͱΔΜ͔?SYNACKSYN-ACKଓ։࢝TCP
!UBDDL4B$44WPMTBDTT͋Εͪΐ͏͍ͩɻ͑͑Αɻड͚औͬͯɻRequestResponseใऔಘHTTPGET
!UBDDL4B$44WPMTBDTT͜Ε͢Θɻ͑͑Αɻड͚औͬͨͰɻRequestResponseใૹ৴HTTPPOST/PUT/DELETE
!UBDDL4B$44WPMTBDTT……ଓҡ࣋HTTPKeepAlive
!UBDDL4B$44WPMTBDTT͑͑Ͱɻ͢Μͨ͠͠ɺ͏͑͑ΖɻଓऴྃTCP΄ͳ·ͨͳɻ΄ͳɺ͍͞ͳΒɻACKFINACKFIN
!UBDDL4B$44WPMTBDTT• ϒϥβ͔Βαʔόʔʹݺͼ͔͚ͯ௨৴։࢝ (TCP)• ϒϥβܖػͰαʔόʔͱσʔλૹड৴ (HTTP)• ΓͱΓ͕ऴΘͬͯগ͠ܨ͍ͩ·· (HTTP/1.1 KeepAlive)• ͠Β͘ܦͭͱ௨৴ऴྃ)551 ͷجຊ
!UBDDL4B$44WPMTBDTT• ͠Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ ࠷ॳͷʮѫࡰʯ෦͔Β࢝·Δɻ• ͕͔͔࣌ؒΔɻ• ௨৴։࢝Ϛγϯతʹίετ͕ߴ͍ɻ• ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ• αʔόʔ͔ΒใΛ͍͑ͨɺͱ͍͏γεςϜΛ ࣮ݱͰ͖ͳ͍ɻ)551 ͷ՝
!UBDDL4B$44WPMTBDTT• ͠Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ ࠷ॳͷʮѫࡰʯ෦͔Β࢝·Δɻ• ͕͔͔࣌ؒΔɻ• ௨৴։࢝Ϛγϯతʹίετ͕ߴ͍ɻ• ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ• αʔόʔ͔ΒใΛ͍͑ͨɺͱ͍͏γεςϜΛ ࣮ݱͰ͖ͳ͍ɻ• HTTP/2.0 ͔ΒͷɺࠓճׂѪɻ)551 ͷ՝
!UBDDL4B$44WPMTBDTT• WebSocket Λ͏ͱɺ αʔόʔܖػͰσʔλૹ৴Λߦͳ͑Δɻ (ैདྷͷ HTTP ͚ͩͰͰ͖ͳ͔ͬͨɻ)• ΫϥΠΞϯτɺ JavaScript ͷΠϕϯτͱͯ͠ ॲཧͰ͖ΔͷͰɺ࣮қͦ͜·Ͱߴ͘ͳ͍ɻ• αʔόʔͷ࣮ɺجຊͦ͜·Ͱ͘͠ͳ͍ɻ8FC4PDLFUͰ՝ղܾ
!UBDDL4B$44WPMTBDTTWebSocketΘͤͯ RequestResponseWebSocket։࢝HTTPGET͑͑Ͱɻ͔ͬ͜ΒઌWebSocketͰɻWebSocket
!UBDDL4B$44WPMTBDTTΫϥΠΞϯτ͔ΒWebSocketΫϦοΫ͞ΕͨͰ Message͑͑ײ͡ͷॲཧ͠ͱ͘Θɻ
!UBDDL4B$44WPMTBDTTαʔόʔ͔ΒWebSocket͑͑ײ͡ͷॲཧ͠ͱ͘ΘɻMessage σʔλߋ৽͞ΕͨͰ
!UBDDL4B$44WPMTBDTT࣮ફ؆୯ͳϦΞϧλΠϜථΞϓϦ
!UBDDL4B$44WPMTBDTT• Webαʔό (Node.js)• “post”ϝοηʔδΛड͚औͬͨΒɺ idΛ֬ೝͯ͠ΧϯτΞοϓɻ• ΧϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ શΫϥΠΞϯτʹ݁Ռૹ৴ɻ؆୯ͳϦΞϧλΠϜථΞϓϦ
!UBDDL4B$44WPMTBDTTsocket.on('message', message => {console.log(message)const obj = JSON.parse(message)const type = obj.messageconst data = obj.dataif (type === 'post') {selections[data.id].count++}wss.clients.forEach(client => {client.send(JSON.stringify({message: 'selections',data: selections}))})})
!UBDDL4B$44WPMTBDTT• Webϒϥβ (Vue.js)• “selections”ϝοηʔδΛड͚औͬͨΒɺ બࢶͷதͱΧϯτΛߋ৽ɻ• ϘλϯΫϦοΫͰɺ “post”ϝοηʔδૹ৴ɻ؆୯ͳϦΞϧλΠϜථΞϓϦ
!UBDDL+BWB%PͰ͠ΐ͏KBWBEPmounted() {this.ws = new WebSocket('wss://tacck-ws.herokuapp.com/')const self = thisthis.ws.addEventListener('message', message => {const obj = JSON.parse(message.data)const type = obj.messageconst data = obj.dataif (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-vuejshttps://github.com/tacck/websocket-sample-server-nodejs
!UBDDL4B$44WPMTBDTT࣮ફϦΞϧλΠϜΞϯέʔτγεςϜ
!UBDDL4B$44WPMTBDTT·ͱΊ
!UBDDL4B$44WPMTBDTT• ैདྷͷ HTTP/1.0,1.1 Ͱ αʔόʔܖػͰσʔλૹड৴͕Ͱ͖ͳ͔ͬͨɻ• WebSocket ͰͦΕΛղܾՄೳɻ• ΑΓൃలͨ͠Έ HTTP/2.0 Ҏ߱ʹ͋Δ͕ɺ ͦΕ·ͨผͷ͓ɻ·ͱΊ
!UBDDL4B$44WPMTBDTTFOE
tacck
andpad
k1low
weblyzard
soracom
forcia_dev_pr
kawaguti
nenonaninu
shin_higuchi
suzukahr
sinsoku
moritama1515
taishin
csswizardry
sferik
bkeepers
mongodb
frogandcode
dougneiner
brianwarren
aleyda
samlambert
stephaniewalter
jmmastey
palkan