Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今更 WebSocket で遊ぶ話 #javado
Search
Kihara, Takuya
PRO
February 09, 2020
Technology
0
440
今更 WebSocket で遊ぶ話 #javado
Java Doでしょう #17:Javaユーザーに伝えたい開発運用&フリーテーマ会!
https://javado.connpass.com/event/164021/
Kihara, Takuya
PRO
February 09, 2020
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
38
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
92
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
110
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
410
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
75
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
110
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
1
840
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
64
Other Decks in Technology
See All in Technology
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
2
150
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
120
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
140
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
240
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
460
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
480
MobileActOsaka_250704.pdf
akaitadaaki
0
160
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
550
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
300
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How to Ace a Technical Interview
jacobian
278
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Code Review Best Practice
trishagee
69
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing for Performance
lara
610
69k
Transcript
גࣜձࣾϊʔεσΟςʔϧ ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ UBDDLݪ !UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࠓߋ8FC4PDLFUͰ ༡Ϳ ݄
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP • ໊લ ݪ / @tacck •
ॴଐ גࣜձࣾϊʔεσΟςʔϧ ։ൃDivision ٕज़ਪਐGroup / Leader • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ ୭ PHP Conference Hokkaido 2019
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP 8FC4PDLFUͱ
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP • Webϒϥβ - WebαʔόؒͰ͑Δɺ ͓खܰͳํ௨৴ͷن֨ɻ • Webϒϥβ؍ͰɺJavaScriptͷ
ΠϕϯτϕʔεͰ࣮Մೳɻ → ΠϕϯττϦΨʔͰDOMߋ৽͕Ͱ͖Δ →→ νϟοτͳͲͷϦΞϧλΠϜΞϓϦ͕࡞Γ͍͢ɻ 8FC4PDLFUͱ
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP • Webαʔό (Node.js) • “post”ϝοηʔδΛड͚औͬͨΒɺ idΛ֬ೝͯ͠ΧϯτΞοϓɻ •
ΧϯτΞοϓޙʹɺ“selections”ϝοηʔδΛ શΫϥΠΞϯτʹ݁Ռૹ৴ɻ ؆୯ͳϦΞϧλΠϜථΞϓϦ
!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 } )) }) })
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP • Webϒϥβ (Vue.js) • “selections”ϝοηʔδΛड͚औͬͨΒɺ ͱΧϯτΛߋ৽ɻ •
ϘλϯΫϦοΫͰɺ “post”ϝοηʔδૹ৴ɻ ؆୯ͳϦΞϧλΠϜථΞϓϦ
!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 } } )) } }
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP ࢼͦ͏ https://github.com/tacck/websocket-sample-client-vuejs https://github.com/tacck/websocket-sample-server-nodejs
!UBDDL +BWB%PͰ͠ΐ͏ KBWBEP FOE