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

今更 WebSocket で遊ぶ話 #javado

今更 WebSocket で遊ぶ話 #javado

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

Kihara, Takuya

February 09, 2020
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

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

    View Slide

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

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

    ։ൃDivision ٕज़ਪਐGroup / Leader

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

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

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

    PHP Conference Hokkaido 2019

    View Slide

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

    View Slide

  4. !UBDDL
    +BWB%PͰ͠ΐ͏
    KBWBEP
    • Webϒϥ΢β - WebαʔόؒͰ࢖͑Δɺ

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

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

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

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

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

    View Slide

  5. !UBDDL
    +BWB%PͰ͠ΐ͏
    KBWBEP
    • Webαʔό (Node.js)

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

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

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

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

    View Slide

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

    View Slide

  7. !UBDDL
    +BWB%PͰ͠ΐ͏
    KBWBEP
    • Webϒϥ΢β (Vue.js)

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

    ໰୊ͱΧ΢ϯτΛߋ৽ɻ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide