今更 WebSocket を学んでみた話 #sacss

今更 WebSocket を学んでみた話 #sacss

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

February 12, 2020
Tweet

Transcript

  1. גࣜձࣾϊʔεσΟςʔϧ ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ UBDDL໦ݪ୎໵ !UBDDL 4B$44WPM TBDTT ࠓߋ8FC4PDLFUΛ ֶΜͰΈͨ࿩ ೥݄೔

  2. !UBDDL 4B$44WPM TBDTT • ໊લ ໦ݪ ୎໵ / @tacck •

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

  4. !UBDDL 4B$44WPM TBDTT • WebΫϥΠΞϯτ - WebαʔόؒͰ࢖͑Δɺ
 ͓खܰͳ૒ํ޲௨৴ͷن֨ɻ • Webϒϥ΢β؍఺Ͱ͸ɺJavaScriptͷ


    ΠϕϯτϕʔεͰ࣮૷Մೳɻ
 → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ
 →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ΍͍͢ɻ 8FC4PDLFUͱ͸
  5. !UBDDL 4B$44WPM TBDTT )551௨৴ͱ͸

  6. !UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτͰ͢ αʔόʔͰ͢

  7. !UBDDL 4B$44WPM TBDTT ௨৴ͯ͠΋͔͑͑? Ͱ͖ͱΔͰɻ ͑͑Αɻ ͦͬͪ͸४උ Ͱ͖ͱΔΜ͔? SYN ACK

    SYN-ACK ઀ଓ։࢝ TCP
  8. !UBDDL 4B$44WPM TBDTT ͋Εͪΐ͏͍ͩɻ ͑͑Αɻ ड͚औͬͯ΍ɻ Request Response ৘ใऔಘ HTTP

    GET
  9. !UBDDL 4B$44WPM TBDTT ͜Ε౉͢Θɻ ͑͑Αɻ ड͚औͬͨͰɻ Request Response ৘ใૹ৴ HTTP

    POST/PUT/ DELETE
  10. !UBDDL 4B$44WPM TBDTT … … ઀ଓҡ࣋ HTTP KeepAlive

  11. !UBDDL 4B$44WPM TBDTT ͑͑Ͱɻ ౉͢΋Μ౉ͨ͠͠ɺ ΋͏͑͑΍Ζɻ ઀ଓऴྃ TCP ΄ͳ·ͨͳɻ ΄ͳɺ͍͞ͳΒɻ

    ACK FIN ACK FIN
  12. !UBDDL 4B$44WPM TBDTT • ϒϥ΢β͔Βαʔόʔʹݺͼ͔͚ͯ௨৴։࢝ (TCP) • ϒϥ΢βܖػͰαʔόʔͱσʔλૹड৴ (HTTP) •

    ΍ΓͱΓ͕ऴΘͬͯ΋গ͠͸ܨ͍ͩ·· (HTTP/1.1 KeepAlive) • ͠͹Β͘ܦͭͱ௨৴ऴྃ )551 ͷجຊ
  13. !UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ
 ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

    • ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ
 ࣮ݱͰ͖ͳ͍ɻ )551 ͷ՝୊
  14. !UBDDL 4B$44WPM TBDTT • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ
 ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ • ͕͔͔࣌ؒΔɻ • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

    • ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ
 ࣮ݱͰ͖ͳ͍ɻ • HTTP/2.0 ͔Βͷ࿩͸ɺࠓճׂѪɻ )551 ͷ՝୊
  15. !UBDDL 4B$44WPM TBDTT • WebSocket Λ࢖͏ͱɺ
 αʔόʔܖػͰσʔλૹ৴Λߦͳ͑Δɻ
 (ैདྷͷ HTTP ͚ͩͰ͸Ͱ͖ͳ͔ͬͨɻ)

    • ΫϥΠΞϯτ͸ɺ JavaScript ͷΠϕϯτͱͯ͠
 ॲཧͰ͖ΔͷͰɺ࣮૷೉қ౓͸ͦ͜·Ͱߴ͘ͳ͍ɻ • αʔόʔͷ࣮૷΋ɺجຊ͸ͦ͜·Ͱ೉͘͠ͳ͍ɻ 8FC4PDLFUͰ՝୊ղܾ
  16. !UBDDL 4B$44WPM TBDTT WebSocket ࢖Θͤͯ΍ Request Response WebSocket։࢝ HTTP GET

    ͑͑Ͱɻ ͔ͬ͜Βઌ͸ WebSocket΍Ͱɻ WebSocket
  17. !UBDDL 4B$44WPM TBDTT ΫϥΠΞϯτ͔Β WebSocket ΫϦοΫ͞ΕͨͰ Message ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ

  18. !UBDDL 4B$44WPM TBDTT αʔόʔ͔Β WebSocket ͑͑ײ͡ͷॲཧ ͠ͱ͘Θɻ Message σʔλߋ৽͞ΕͨͰ

  19. !UBDDL 4B$44WPM TBDTT ࣮ફ  ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

  20. !UBDDL 4B$44WPM TBDTT • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ
 idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ •

    Χ΢ϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ
 શΫϥΠΞϯτʹ݁Ռૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ
  21. !UBDDL 4B$44WPM TBDTT 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 } )) }) })
  22. !UBDDL 4B$44WPM TBDTT • Webϒϥ΢β (Vue.js) • “selections”ϝοηʔδΛड͚औͬͨΒɺ
 બ୒ࢶͷத਎ͱΧ΢ϯτΛߋ৽ɻ •

    ϘλϯΫϦοΫͰɺ “post”ϝοηʔδૹ৴ɻ ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ
  23. !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 } } )) } }
  24. !UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࢼͦ͏ https://github.com/tacck/websocket-sample-client-vuejs https://github.com/tacck/websocket-sample-server-nodejs

  25. !UBDDL 4B$44WPM TBDTT ࣮ફ  ϦΞϧλΠϜ ΞϯέʔτγεςϜ

  26. !UBDDL 4B$44WPM TBDTT ·ͱΊ

  27. !UBDDL 4B$44WPM TBDTT • ैདྷͷ HTTP/1.0,1.1 Ͱ͸
 αʔόʔܖػͰσʔλૹड৴͕Ͱ͖ͳ͔ͬͨɻ • WebSocket

    ͰͦΕΛղܾՄೳɻ • ΑΓൃలͨ͠࢓૊Έ͸ HTTP/2.0 Ҏ߱ʹ͋Δ͕ɺ
 ͦΕ͸·ͨผͷ͓࿩ɻ ·ͱΊ
  28. !UBDDL 4B$44WPM TBDTT FOE