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
47
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
Operating Operator
shhnjk
1
620
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
290
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
150
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
CDK Toolkit Libraryにおけるテストの考え方
smt7174
0
120
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
410
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
420
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
9
2.3k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
SREのためのeBPF活用ステップアップガイド
egmc
1
200
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Code Reviewing Like a Champion
maltzj
524
40k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Raft: Consensus for Rubyists
vanstee
140
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.1k
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