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
290
Other Decks in Programming
See All in Programming
Going Staff - Keynote edition
pragtob
0
350
Honoの来た道とこれから
yusukebe
6
870
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
8
3.5k
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
0
300
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
360
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
190
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
200
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
170
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
680
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
For a Future-Friendly Web
brad_frost
174
9.4k
Six Lessons from altMBA
skipperchong
26
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
Speed Design
sergeychernyshev
23
540
Bash Introduction
62gerente
608
210k
Embracing the Ebb and Flow
colly
84
4.4k
Building Adaptive Systems
keathley
38
2.2k
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