今更 WebSocket で遊ぶ話 #javado

Java Doでしょう #17：Javaユーザーに伝えたい開発運用&フリーテーマ会！
https://javado.connpass.com/event/164021/

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