今更 WebSocket で遊ぶ話 #javado

Transcript

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

2. !UBDDL +BWB
   %PͰ͠ΐ͏
    KBWBEP • ໊લ ໦ݪ ୎໵ / @tacck •

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

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

4. !UBDDL +BWB
   %PͰ͠ΐ͏
    KBWBEP • Webϒϥ΢β - WebαʔόؒͰ࢖͑Δɺ
 ͓खܰͳ૒ํ޲௨৴ͷن֨ɻ • Webϒϥ΢β؍఺Ͱ͸ɺJavaScriptͷ


   ΠϕϯτϕʔεͰ࣮૷Մೳɻ
 → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ
 →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ΍͍͢ɻ 8FC4PDLFU
   ͱ͸

5. !UBDDL +BWB
   %PͰ͠ΐ͏
    KBWBEP • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ
 idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ •

   Χ΢ϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ
 શΫϥΠΞϯτʹ݁Ռૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

6. !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 } )) }) })

7. !UBDDL +BWB
   %PͰ͠ΐ͏
    KBWBEP • Webϒϥ΢β (Vue.js) • “selections”ϝοηʔδΛड͚औͬͨΒɺ
 ໰୊ͱΧ΢ϯτΛߋ৽ɻ •

   ϘλϯΫϦοΫͰɺ “post”ϝοηʔδૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

8. !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 } } )) } }

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

10. !UBDDL +BWB
    %PͰ͠ΐ͏
     KBWBEP FOE