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
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで...
Search
堀家隆宏
July 02, 2016
Programming
3
4.2k
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで行うリアルタイム可視化の仕組み/inovationegg-8
堀家隆宏
July 02, 2016
Tweet
Share
More Decks by 堀家隆宏
See All by 堀家隆宏
オープンソースコミュニティで加速するサーバーレスの未来/serverless will be
horike37
4
690
auth0-meetup.pdf
horike37
1
240
What’s happening with Serverless Framework, and it lives with AWS SAM.
horike37
0
77
What is Serverless. Why is Serverless.
horike37
1
59
aws-with-functional-saas
horike37
2
160
serverless-with-oss
horike37
0
100
slsconftokyo
horike37
0
5.3k
slsconfworkshop
horike37
3
2.5k
Test Driven Development For Lambda
horike37
2
280
Other Decks in Programming
See All in Programming
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
GoのIteratorに詳しくなってしまう
inatonix
1
200
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
530
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
440
Jakarta EE meets AI
ivargrimstad
1
480
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
220
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Web Components: a chance to create the future
zenorocha
308
42k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Code Review Best Practice
trishagee
62
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Scaling GitHub
holman
458
140k
Infographics Made Easy
chrislema
239
18k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Docker and Python
trallard
39
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
How GitHub (no longer) Works
holman
310
140k
Transcript
Amazon Kinesis + socket.io + D3.jsΛͬͨ webϒϥβͰߦ͏ϦΞϧλΠϜՄࢹԽͷΈ @Amimoto_Ami amimoto-ami.com
ࣗݾհ • ໊લɿງՈོ • ॴଐɿAMIMOTO TEAM • Githubɿhttps://github.com/horike37 • Qiitaɿhttp://qiita.com/horike37
• ಘҙͳ͜ͱɿAWS, WordPress
https://ja.amimoto-ami.com/ AMIMOTO
Qiita http://qiita.com/horike37
https://github.com/horike37/ Github
ࠓ͢͜ͱ
AWSͰՄࢹԽΞʔΩςΫνϟΛ࡞Δٕज़
ࠓ͞ͳ͍͜ͱ
ՄࢹԽͷతɺ֓೦ɺֶ
ΞδΣϯμ
• TweetՄࢹԽπʔϧʮSocial Stream MonitorʯͷσϞ • Social Stream MonitorΞʔΩςΫνϟͷ • ϦΞϧλΠϜՄࢹԽ+σʔλͷӬଓԽ
Social Straem Monitor
Social Straem Monitorͱ TwitterͷετϦʔϛϯάσʔλΛ ϦΞϧλΠϜʹՄࢹԽ͢Δπʔϧ
https://github.com/megumiteam/social-stream-monitor Github
·ͣɺσϞ
ΞʔΩςΫνϟ
Amazon Kinesis ϦΞϧλΠϜ ετϦʔϛϯάॲཧ
ΞʔΩςΫνϟ ετϦʔϛϯά σʔλΛॲཧ
Amazon Kinesisͱ • ϑϧϚωʔδυͳϦΞϧλΠϜσʔλॲ ཧαʔϏε • େྔͷετϦʔϛϯάσʔλΛγϟʔ υʹอଘɻόοΫΤϯυͷΞϓϦέʔ γϣϯͰऔΓग़ͯ͠ॲཧ
Amazon Kinesis͕ແ͍ͱ͖ ετϦʔϛϯάσʔλ σʔλॲཧܥ
Amazon Kinesis͕͋Δ࣌ ετϦʔϛϯάσʔλ σʔλॲཧܥ ॲཧܥ͕ѻ͍͍͢Α͏ʹσʔλΛอଘ
Social Stream Metor্ͷׂ • TwitterͷετϦʔϛϯάσʔλΛҰ࣌ తʹอଘͯ͠ΞϓϦέʔγϣϯ͔Βσʔ λͱͯ͠ॲཧ͘͢͢͠Δ
Lambda ίʔυͷ࣮ߦ
ΞʔΩςΫνϟ Kinesis͔Βड͚ औͬͨσʔλΛ SNSʹ͢
Lambdaͱ • AWS ΠϯϑϥετϥΫνϟΛ༻ͯ͠ ίʔυͷ࣮ߦΛߦ͢ΔίϯϐϡʔςΟ ϯάαʔϏε • ΠϕϯτυϦϒϯͳॲཧ͕Մೳ
SNS http endpointσʔλΛ͢ σʔλϨίʔυΛSNSʹpublish
Social Stream Metor্ͷׂ • webϒϥβͰදࣔ͢ΔͨΊʹhttpϓϩ τίϧͰσʔλΛྲྀ͢ඞཁ͕͋Δ • ͦͷͨΊͷSNS http push௨σʔλ
Λ͢
ΞʔΩςΫνϟ HTTPΤϯυϙΠϯ τσʔλΛpush
SNS HTTP notification HTTPΤϯυϙΠϯτ PUSH௨
SNS HTTP notificationͱ • Amazon SNS Λ༻ͯ͠ɺ1 ͭҎ্ͷ HTTPΤϯυϙΠϯτʹ௨ϝοηʔδ Λૹ৴
• HTTP POST ϦΫΤετΛૹ৴͠ɺ௨ ͷ༰Λड৴ొͨ͠ΤϯυϙΠϯ τʹ৴
SNS HTTP notificationͱ Topicʹड৴ొ͞ΕͨΤϯυϙΠϯτʹσʔλΛPOST
Social Stream Metor্ͷׂ • webϒϥβͰදࣔ͢ΔͨΊʹhttpϓϩτίϧͰ σʔλΛྲྀ͢ඞཁ͕͋Δ • websocketͰϒϥβʹσʔλΛૹ৴͢ΔͨΊͷ socket.ioαʔόʹσʔλΛpush͢Δ
socket.io ϦΞϧλΠϜͳ WebΞϓϦ
ΞʔΩςΫνϟ WebSocketͰϒϥ βʹσʔλૹ৴
socket.io • ͯ͢ͷϒϥβɾϞόΠϧσόΠεͰ ϦΞϧλΠϜ௨৴ΛՄೳͱ͢Δ͜ͱΛ తʹ࡞ΒΕͨJavaScriptϥΠϒϥϦ • WebSocketʹΑΔϒϥβͱαʔόͷ ํ௨৴
Social Stream Metor্ͷׂ • SNS͔ΒૹΒΕ͖ͯͨTweetΛWebSocketΛ͍ ϒϥβϦΞϧλΠϜʹૹ৴
SNS͔ΒૹΒΕ͖ͯͨσʔλΛड৴ https://github.com/megumiteam/social-stream-monitor/blob/master/app.js
ϒϥβσʔλΛૹ৴ https://github.com/megumiteam/social-stream-monitor/blob/master/app.js
D3.js σʔλɾυϦϒϯɾ υΩϡϝϯτ
ΞʔΩςΫνϟ D3.jsʹΑΔඳը
D3.jsͱ • javascriptͷσʔλϏδϡΞϥΠθʔ γϣϯΤϯδϯ • σʔλΛجʹDOMΛૢ࡞ • άϥϑඳըϥΠϒϥϦͰͳ͍ɻD3Λ ϕʔεʹͨ͠άϥϑඳըϥΠϒϥϦଟ ଘࡏ
ϦΞϧλΠϜνϟʔτ
Real-time Charting Library http://epochjs.github.io/epoch/
εϐʔυϝʔλʔ
http://iop.io/iopctrl Speedometer
͜͜·ͰͷྲྀΕΛཧ͢Δͱ • KinesisʹΑΓTweetσʔλΛऩू • LambdaʹΑΓKinesis͔ΒσʔλΛऔಘ ͯ͠SNS Topicʹσʔλૹ৴ • SNS HTTP
notification pushʹΑΓ socket.ioαʔόʹσʔλૹ৴ • socket.ioαʔό͔Βϒϥβ͔Βૹ৴ ͞ΕͨσʔλΛD3.jsͰՄࢹԽ
σʔλͷӬଓԽ
՝ • ϦΞϧλΠϜͳՄࢹԽʹ߹ΘͤͯɺσʔλΛੵͯ͠ੳΛߦ͍͍ͨ
DynamoDB Stream σʔλϕʔεͷ σʔλΩϟϓνϟ
DynamoDB Streamͱ • DynamoDB ςʔϒϧʹอଘ͞Ε߲ͨͷมߋΛɺม ߋͷൃੜ࣌ʹΩϟϓνϟͰ͖Δ Ϣʔεέʔε • ৽͍͠ը૾ΛΞοϓϩʔυ͢Δͱ͙͢ʹɺάϧʔϓ ͷͯ͢ͷ༑ਓͷϞόΠϧσόΠεʹ௨Λࣗಈૹ৴
• Ϣʔβొ͕͋ΕɺΑ͏ͦ͜ϝʔϧΛૹ৴͢Δ
ΞʔΩςΫνϟ
ΞʔΩςΫνϟ σʔλͷӬଓԽ+ ετϦʔϛϯάσʔλ৴
ΞʔΩςΫνϟ τϦΨʔΛ༗ޮԽͯ͠ DynamoDB Streamͷ σʔλॲཧ
σʔλͷӬଓԽ
LambdaϑΝϯΫγϣϯͷτϦΨʔ༗ޮԽ
τϦΨʔϑΝϯΫγϣϯ SNS Topicʹσʔλૹ৴ DynamoDBϨίʔυऔಘ
ӬଓԽ͞ΕͨσʔλΛޙ͔ΒऔΓग़͢ DymanoDB Lambda API Gateway
͜͜·ͰͷྲྀΕΛཧ͢Δͱ • DynamoDBΛΈࠐΉ͜ͱͰΓσʔλ ͷӬଓԽ͕Մೳ • ӬଓԽͤͨ͞σʔλɺϨϙʔτσʔ λͱͯ͠ޙ͔ΒऔΓग़͢͜ͱ͕ग़དྷΔ
CloudFormation ͰߏΛݻΊΔ
՝ • ͜͜·ͰෳࡶͳߏΛຖճ࡞Δͷݱ࣮తͰͳ͍
CloudFormation ΞʔΩςΫνϟΛ ΞʔΧΠϒ
CloudFormation https://github.com/megumiteam/social-stream-monitor/blob/master/ social_stream_processing.template
CloudFormationϝϦοτ • ಉ͡ߏΛ͍ͭ͘Ͱ্ཱͪ͛ΒΕΔ • ࣅͨΑ͏ͳՄࢹԽߏΛͭ͘ΔͷͰ͋Ε ϑΥʔΫͯ͠վม͢ΕޮΑ͘ΞʔΩςΫ νϟ͕ΊΔ
·ͱΊ • ࠓճհͨ͠ߏΛϕʔεʹ͢ΕTwitterҎ֎ͷՄࢹԽՄೳ • AWS IoTʹMQTT over WebSocketͱ͍͏Έ͕͋Δͷ ͰηϯαʔσʔλͷϒϥβՄࢹԽͬͱΓ͍͢ •
࡞ͬͨߏCloudFormationͰݻΊͯ࠶ར༻Մೳʹ͢Δͷ ͕Φεεϝ • ࠓճհͨ͠ߏͰϦΞϧλΠϜՄࢹԽ+σʔλͷӬଓԽ͕Մೳ
·ͱΊ http://qiita.com/horike37 ࠓհͨ͠ΞʔΩςΫνϟͷৄࡉQiitaͷํʹιʔείʔυؚΊͯॻ͍͍ͯ·͢ ڵຯ͋Δํੋඇͷ͍ͧͯΈ͍ͯͩ͘͞
@Amimoto_Ami amimoto-ami.com THANK YOU! Amazon Kinesis + socket.io + D3.jsΛͬͨ
webϒϥβͰߦ͏ϦΞϧλΠϜՄࢹԽͷΈ
None