Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kihara, Takuya

February 12, 2020
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

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

    View Slide

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

    • ॴଐ
    גࣜձࣾϊʔεσΟςʔϧ

    ։ൃDivision ٕज़ਪਐGroup / Leader

    • ओ࠵
    • ΏΔWebษڧձ@ࡳຈ

    • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ

    • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
    εϓϨουɾΠʔάϧ

    PHP Conference Hokkaido 2019

    View Slide

  3. !UBDDL
    4B$44WPM
    TBDTT
    8FC4PDLFUͱ͸

    View Slide

  4. !UBDDL
    4B$44WPM
    TBDTT
    • WebΫϥΠΞϯτ - WebαʔόؒͰ࢖͑Δɺ

    ͓खܰͳ૒ํ޲௨৴ͷن֨ɻ

    • Webϒϥ΢β؍఺Ͱ͸ɺJavaScriptͷ

    ΠϕϯτϕʔεͰ࣮૷Մೳɻ

    → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ

    →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ΍͍͢ɻ
    8FC4PDLFUͱ͸

    View Slide

  5. !UBDDL
    4B$44WPM
    TBDTT
    )551௨৴ͱ͸

    View Slide

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

    View Slide

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

    View Slide

  8. !UBDDL
    4B$44WPM
    TBDTT
    ͋Εͪΐ͏͍ͩɻ
    ͑͑Αɻ
    ड͚औͬͯ΍ɻ
    Request
    Response
    ৘ใऔಘ
    HTTP
    GET

    View Slide

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

    View Slide

  10. !UBDDL
    4B$44WPM
    TBDTT


    ઀ଓҡ࣋
    HTTP
    KeepAlive

    View Slide

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

    View Slide

  12. !UBDDL
    4B$44WPM
    TBDTT
    • ϒϥ΢β͔Βαʔόʔʹݺͼ͔͚ͯ௨৴։࢝ (TCP)

    • ϒϥ΢βܖػͰαʔόʔͱσʔλૹड৴ (HTTP)

    • ΍ΓͱΓ͕ऴΘͬͯ΋গ͠͸ܨ͍ͩ·· (HTTP/1.1 KeepAlive)

    • ͠͹Β͘ܦͭͱ௨৴ऴྃ
    )551 ͷجຊ

    View Slide

  13. !UBDDL
    4B$44WPM
    TBDTT
    • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ

    ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ

    • ͕͔͔࣌ؒΔɻ

    • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

    • ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ

    • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ

    ࣮ݱͰ͖ͳ͍ɻ
    )551 ͷ՝୊

    View Slide

  14. !UBDDL
    4B$44WPM
    TBDTT
    • ͠͹Β͘ܦͬͨ͋ͱʹ௨৴͠Α͏ͱ͢Δͱɺ

    ࠷ॳͷʮѫࡰʯ෦෼͔Β࢝·Δɻ

    • ͕͔͔࣌ؒΔɻ

    • ௨৴։࢝͸Ϛγϯతʹ΋ίετ͕ߴ͍ɻ

    • ʮΫϥΠΞϯτ͔Βʯ͔͠σʔλૹड৴։࢝Ͱ͖ͳ͍ɻ

    • αʔόʔ͔Β৘ใΛ఻͍͑ͨɺͱ͍͏γεςϜΛ

    ࣮ݱͰ͖ͳ͍ɻ

    • HTTP/2.0 ͔Βͷ࿩͸ɺࠓճׂѪɻ
    )551 ͷ՝୊

    View Slide

  15. !UBDDL
    4B$44WPM
    TBDTT
    • WebSocket Λ࢖͏ͱɺ

    αʔόʔܖػͰσʔλૹ৴Λߦͳ͑Δɻ

    (ैདྷͷ HTTP ͚ͩͰ͸Ͱ͖ͳ͔ͬͨɻ)

    • ΫϥΠΞϯτ͸ɺ JavaScript ͷΠϕϯτͱͯ͠

    ॲཧͰ͖ΔͷͰɺ࣮૷೉қ౓͸ͦ͜·Ͱߴ͘ͳ͍ɻ

    • αʔόʔͷ࣮૷΋ɺجຊ͸ͦ͜·Ͱ೉͘͠ͳ͍ɻ
    8FC4PDLFUͰ՝୊ղܾ

    View Slide

  16. !UBDDL
    4B$44WPM
    TBDTT
    WebSocket
    ࢖Θͤͯ΍ Request
    Response
    WebSocket։࢝
    HTTP
    GET
    ͑͑Ͱɻ
    ͔ͬ͜Βઌ͸
    WebSocket΍Ͱɻ
    WebSocket

    View Slide

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

    View Slide

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

    View Slide

  19. !UBDDL
    4B$44WPM
    TBDTT
    ࣮ફ

    ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

    View Slide

  20. !UBDDL
    4B$44WPM
    TBDTT
    • Webαʔό (Node.js)

    • “post”ϝοηʔδΛड͚औͬͨΒɺ

    idΛ֬ೝͯ͠Χ΢ϯτΞοϓɻ

    • Χ΢ϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ

    શΫϥΠΞϯτʹ݁Ռૹ৴ɻ
    ؆୯ͳϦΞϧλΠϜ౤ථΞϓϦ

    View Slide

  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
    }
    ))
    })
    })

    View Slide

  22. !UBDDL
    4B$44WPM
    TBDTT
    • Webϒϥ΢β (Vue.js)

    • “selections”ϝοηʔδΛड͚औͬͨΒɺ

    બ୒ࢶͷத਎ͱΧ΢ϯτΛߋ৽ɻ

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

    View Slide

  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
    }
    }
    ))
    }
    }

    View Slide

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

    View Slide

  25. !UBDDL
    4B$44WPM
    TBDTT
    ࣮ફ

    ϦΞϧλΠϜ
    ΞϯέʔτγεςϜ

    View Slide

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

    View Slide

  27. !UBDDL
    4B$44WPM
    TBDTT
    • ैདྷͷ HTTP/1.0,1.1 Ͱ͸

    αʔόʔܖػͰσʔλૹड৴͕Ͱ͖ͳ͔ͬͨɻ

    • WebSocket ͰͦΕΛղܾՄೳɻ

    • ΑΓൃలͨ͠࢓૊Έ͸ HTTP/2.0 Ҏ߱ʹ͋Δ͕ɺ

    ͦΕ͸·ͨผͷ͓࿩ɻ
    ·ͱΊ

    View Slide

  28. !UBDDL
    4B$44WPM
    TBDTT
    FOE

    View Slide