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
はじめてのexpress+socket.io
Search
inureo
August 26, 2014
Technology
1
4.1k
はじめてのexpress+socket.io
inureo
August 26, 2014
Tweet
Share
More Decks by inureo
See All by inureo
IGNITION: What we did to provide a high-quality experience
inureo
0
96
SVGアニメーションをやってみたら結構いい感じにできた話
inureo
1
150
リアルタイム回答集計システムを作って、実際にイベントで使った話
inureo
1
830
Other Decks in Technology
See All in Technology
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
830
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.4k
君は隠しイベントを見つけれるか?
mujyun
0
290
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
330
一休.comレストランにおけるRustの活用
kymmt90
3
580
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.5k
Happy Clients
brianwarren
97
6.7k
RailsConf 2023
tenderlove
29
880
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Unsuck your backbone
ammeep
668
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Done Done
chrislema
181
16k
Transcript
͡Ίͯͷ express+socket.io גࣜձࣾnanapi ख௩ ྄ @inureo
ಋೖ
ࣗݾհ ख௩ ྄ @inureo גࣜձࣾnanapi ΤϯδχΞ - άϥϑΟοΫσβΠϯͷઐֶߍΛଔۀ - Web੍࡞ձࣾ
5 - 201310݄ nanapiʹΤϯδχΞͱͯ͠ೖࣾ དྷྺ ݩʑσβΠφʔͳͷͰϑϩϯτपΓ͕ಘҙ ϝΠϯͷۀͰRailsʴCoffee+Markup
αʔϏεհ IGNITIONʑͷੜ׆ʹʮܹʯ ʮಈػʯΛ༩͑ΔϝσΟΞͰ͢ɻ ϞοτʔɺίϯςϯπΛ௨ͯ͡ߴ ࣭ͳϢʔβʔମݧΛఏڙ͠ɺಡऀ ͕ೳಈతʹͳΔ͖͔͚ͬʢಈػʣΛ ༩͑Δ͜ͱͰ͢ɻ - ӳޠݍΛத৺ʹల։ -
http://ignition.co
αʔϏεհ
αʔϏεհ എܠΧϥʔબ ه๏Ϧετ
͡Ίͯexpress+socket.ioΛ ͬͯΈͨΒखܰͰָ͔ͬͨ͠ ࠓ͢͜ͱ
ͳΜͰͬͨͷ͔ - LTͷ͓Λ͍͍͔ͨͩͨΒ
- LTͷ͓Λ͍͍͔ͨͩͨΒ - ձࣾͷΠϕϯτͰ͑ͦ͏͔ͩΒ ͳΜͰͬͨͷ͔
- LTͷ͓Λ͍͍͔ͨͩͨΒ - ձࣾͷΠϕϯτͰ͑ͦ͏͔ͩΒ ͳΜͰͬͨͷ͔
ͳΜͰͬͨͷ͔ 10/3ʹ100ਓ͍ۙنͰ5पه೦ύʔςΟΛ͢Δ
ͳΜͰͬͨͷ͔ ΠϕϯτͰΫΠζΛͬͨΓ͢Δ
ͳΜͰͬͨͷ͔ 60ਓنͷஈ֊Ͱ…
ͳΜͰͬͨͷ͔ ճͷूܭ͕ͱͬͯਏ͍
ͳΜͰͬͨͷ͔ ͳͷͰ
ͳΜͰͬͨͷ͔ ͜Μͳײ͡ͷճγεςϜΛWebsocketͰ࣮͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ
ͳΜͰͬͨͷ͔ ͜Μͳײ͡ͷճγεςϜΛWebsocketͰ࣮͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ ճͷૹ৴
ͳΜͰͬͨͷ͔ ͜Μͳײ͡ͷճγεςϜΛWebsocketͰ࣮͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ ਖ਼൱ͷૹ৴ ࣌ؒͰͷճకΊΓ ճͷૹ৴
ௐࠪ
ௐࠪ ࣅͨαʔϏεͳ͍ͷ͔
ϚδΧϧˑϏϯΰ COCORO ௐࠪ http://bingo.mindfree.co.jp/
Quizar ௐࠪ http://www.quizar.info/
ήʔϜϚελʔ - ΫϥΠΞϯτ ͱ͍͏ߏͷαʔϏε2͕ͭ͋ͬͨ ௐࠪ
αʔϏεΛ͍ͯΈΔ ௐࠪ - 3લʹsocket.ioΛͬͯ࡞ΒΕͨͷ - RoutingΛݟΑ͏ͱͨ͠Βαʔόཱ͕ͬͯͳ͔ͬͨ ʢλΠϜΞτʣ - express.jsͳͲͷϑϨʔϜϫʔΫΛ͍ͬͯͳ͔ͬͨ -
αʔϏε͕ಈ͍͍ͯΔͷRoutingࢀߟʹͰ͖ͦ͏ Quizar ϚδΧϧˑϏϯΰ COCORO
ௐࠪ ࢀߟʹͳΔ ιʔε͕ͳ͍…ʂ
ௐࠪ Ͱ͖ͬͱ expressͱ͔͕ ॿ͚ͯ͘ΕΔʂ
ௐࠪ ͱ͍͏Θ͚Ͱ
ϑϨʔϜϫʔΫͷબఆ λΠτϧͲ͓Γ expressͱsocket.ioΛ͏ ௐࠪ
expressΛબΜͩཧ༝ - υοτΠϯετʔϧʹ͋Δ - খنͱ͖͍͍ͯͨͷͰֶशίετ͕ͦ͏ - ษڧձͷexpress͕ओͷ1ͭͩͬͨ ௐࠪ
socket.ioΛબΜͩཧ༝ - υοτΠϯετʔϧʹ͋Δ - ௐͨ݁Ռɺ΄΅Ұ ௐࠪ
2ͭͱϦϑΝϨϯε͕ ଟ͍ͷͰ͍͚ͦ͏ʂ ௐࠪ
࣮ફ
࣮ફ ·ͣͬͺΓ
υοτΠϯετʔϧ Expressೖ (શ21ճ) - ϓϩάϥϛϯάͳΒυοτΠϯετʔϧ http://dotinstall.com/lessons/basic_expressjs ҙ - expressͷόʔδϣϯ͕3ͳͷͰҙʢݱࡏ4ʣ -
ಈըΛݟΔ্Ͱόʔδϣϯมߋ͕བྷΉ෦ɺmiddlewareͷมߋ͙Β͍ɻ LoggerͳͲͷmiddleware͕express͔ΒΓ͚ΒΕͨͷͰɺඞཁʹԠ͡ ͯnpm installɾrequireΛ͢Δײ͡ ࣮ફ
มߋ͜Μͳײ͡ express.hogehogeͷ෦͕֘ ࣮ફ
υοτΠϯετʔϧͰֶΜͩͷ جຊతͳػೳ -Routing -Middleware -View ࣮ફ
Routing ࣮ફ
Middleware ΞΫηεϩάΛ؆қʹग़ྗ putɺdeleteͳͲͷHTTPϝιουͷ࣮ݱ ࣮ફ
ViewͷϨϯμϦϯά ςϯϓϨʔτΤϯδϯͱ߹Θͤͯࢦఆͯ͠ ϨϯμϦϯά ࣮ફ
֎ଆ͚ͩ Ͱ͖ͦ͏ ࣮ફ
࣍ʹ ࣮ફ
socket.ioͷνϡʔτϦΞϧ ࣮ફ
socket.ioͷνϡʔτϦΞϧ Script͜Ε͚ͩ Server side Client side ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ ଓΛͪड͚Δ ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ #buttonΛΫϦοΫ ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ ͜͜Ͱ௨৴ Ҿʹ#mͷvalue ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ connectionड͚औΓ chat messageड͚औΔ ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ ಉ͘͡chat messageΛ ͪड͚ɺड৴ ࣮ફ
Server side Client side socket.ioͷνϡʔτϦΞϧ ରͷཁૉʹappend() ϝοηʔδΛදࣔ ࣮ફ
૾Ҏ্ʹ ؆୯ͳAPI…ʂ ࣮ફ
͜Ε͍͚Δ ʢ֬৴ʣ ࣮ફ
·ͱΊ
·ͱΊ - جຊ͙͢ʹཧղͰ͖ΔͷͰֶΜͰΔײָ͕͍͠ - ࠔͬͨ࣌࠷ѱιʔεΛಡΜͰͳΜͱ͔ͳΔɺͣ - express3ͷ࣌ͷใ͕ଟ͍ͨΊɺ༧ΑΓɹɹ ϦϑΝϨϯε͕ͳ͍ - ࣗ༝ߴͯ͘ΞονίονͰ৭ʑॲཧ͕Ͱ͖ΔͷͰ
ࡶʹͳΓͦ͏ - ͜͏ॻ͘ͱ͍͍Αతͳ͓࡞๏͕ͳ͍ͷͰ໎͏ ྑ͔ͬͨ ΈͲ͜Ζ
ຖ1࣌ؒͣͭ৮Δ͚ͩͰ ेָ͠ΊΔͷͰੋඇʂ ͓खܰͰ͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠