今更 WebSocket で遊ぶ話 #javado

今更 WebSocket で遊ぶ話 #javado

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

February 09, 2020
Tweet

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