גࣜձࣾϊʔεσΟςʔϧ ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ UBDDL໦ݪ୎໵ !UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࠓߋ8FC4PDLFUͰ ༡Ϳ࿩ ೥݄೔

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

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP 8FC4PDLFUͱ͸

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

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ
 idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ • Χ΢ϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ
 શΫϥΠΞϯτʹ݁Ռૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP 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 +BWB%PͰ͠ΐ͏ KBWBEP • 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 +BWB%PͰ͠ΐ͏ KBWBEP FOE