はじめてのexpress+socket.io

Transcript

1. ͸͡Ίͯͷ express+socket.io גࣜձࣾnanapi ख௩ ྄ @inureo
2. ಋೖ
3. ࣗݾ঺հ ख௩ ྄ @inureo גࣜձࣾnanapi ΤϯδχΞ - άϥϑΟοΫσβΠϯͷઐ໳ֶߍΛଔۀ - Web੍࡞ձࣾ 5೥ - 2013೥10݄ nanapiʹΤϯδχΞͱͯ͠ೖࣾ དྷྺ ݩʑσβΠφʔͳͷͰϑϩϯτपΓ͕ಘҙ ϝΠϯͷۀ຿Ͱ͸RailsʴCoffee+Markup
4. αʔϏε঺հ IGNITION͸೔ʑͷੜ׆ʹʮܹࢗʯ ΍ʮಈػʯΛ༩͑ΔϝσΟΞͰ͢ɻ Ϟοτʔ͸ɺίϯςϯπΛ௨ͯ͡ߴ ඼࣭ͳϢʔβʔମݧΛఏڙ͠ɺಡऀ ͕ೳಈతʹͳΔ͖͔͚ͬʢಈػʣΛ ༩͑Δ͜ͱͰ͢ɻ - ӳޠݍΛத৺ʹల։ - http://ignition.co
5. αʔϏε঺հ
6. αʔϏε঺հ എܠΧϥʔબ୒ ه๏Ϧετ
7. ͸͡Ίͯexpress+socket.ioΛ ࢖ͬͯΈͨΒखܰͰָ͔ͬͨ͠࿩ ࠓ೔࿩͢͜ͱ
8. ͳΜͰ࢖ͬͨͷ͔ - LTͷ͓࿩Λ͍͍͔ͨͩͨΒ
9. - LTͷ͓࿩Λ͍͍͔ͨͩͨΒ - ձࣾͷΠϕϯτͰ࢖͑ͦ͏͔ͩΒ ͳΜͰ࢖ͬͨͷ͔
10. - LTͷ͓࿩Λ͍͍͔ͨͩͨΒ - ձࣾͷΠϕϯτͰ࢖͑ͦ͏͔ͩΒ ͳΜͰ࢖ͬͨͷ͔
11. ͳΜͰ࢖ͬͨͷ͔ 10/3ʹ100ਓ͍ۙن໛Ͱ5प೥ه೦ύʔςΟΛ͢Δ
12. ͳΜͰ࢖ͬͨͷ͔ Πϕϯτ಺ͰΫΠζΛ΍ͬͨΓ΋͢Δ
13. ͳΜͰ࢖ͬͨͷ͔ 60ਓن໛ͷஈ֊Ͱ…
14. ͳΜͰ࢖ͬͨͷ͔ ճ౴ͷूܭ͕ͱͬͯ΋ਏ͍
15. ͳΜͰ࢖ͬͨͷ͔ ͳͷͰ
16. ͳΜͰ࢖ͬͨͷ͔ ͜Μͳײ͡ͷճ౴γεςϜΛWebsocketͰ࣮૷͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ
17. ͳΜͰ࢖ͬͨͷ͔ ͜Μͳײ͡ͷճ౴γεςϜΛWebsocketͰ࣮૷͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ ճ౴ͷૹ৴
18. ͳΜͰ࢖ͬͨͷ͔ ͜Μͳײ͡ͷճ౴γεςϜΛWebsocketͰ࣮૷͍ͨ͠ ήʔϜϚελʔ ΫϥΠΞϯτ ਖ਼൱ͷૹ৴ ࣌ؒͰͷճ౴కΊ੾Γ ճ౴ͷૹ৴
19. ௐࠪ
20. ௐࠪ ࣅͨαʔϏε͸ͳ͍ͷ͔
21. ϚδΧϧˑϏϯΰ COCORO ௐࠪ http://bingo.mindfree.co.jp/
22. Quizar ௐࠪ http://www.quizar.info/
23. ήʔϜϚελʔ - ΫϥΠΞϯτ ͱ͍͏ߏ੒ͷαʔϏε2͕ͭ͋ͬͨ ௐࠪ
24. αʔϏεΛ೷͍ͯΈΔ ௐࠪ - 3೥લʹsocket.ioΛ࢖ͬͯ࡞ΒΕͨ΋ͷ - RoutingΛݟΑ͏ͱͨ͠Βαʔόཱ͕ͬͯͳ͔ͬͨ ʢλΠϜΞ΢τʣ - express.jsͳͲͷϑϨʔϜϫʔΫΛ࢖͍ͬͯͳ͔ͬͨ - αʔϏε͕ಈ͍͍ͯΔͷRouting͸ࢀߟʹͰ͖ͦ͏ Quizar ϚδΧϧˑϏϯΰ COCORO
25. ௐࠪ ࢀߟʹͳΔ ιʔε͕ͳ͍…ʂ
26. ௐࠪ Ͱ΋͖ͬͱ expressͱ͔͕ ॿ͚ͯ͘ΕΔʂ
27. ௐࠪ ͱ͍͏Θ͚Ͱ
28. ϑϨʔϜϫʔΫͷબఆ λΠτϧͲ͓Γ expressͱsocket.ioΛ࢖͏ ௐࠪ
29. expressΛબΜͩཧ༝ - υοτΠϯετʔϧʹ΋͋Δ - খن໛ͱ͖͍͍ͯͨͷͰֶशίετ͕௿ͦ͏ - ษڧձͷexpress͕ओ୊ͷ1ͭͩͬͨ ௐࠪ
30. socket.ioΛબΜͩཧ༝ - υοτΠϯετʔϧʹ΋͋Δ - ௐ΂ͨ݁Ռɺ΄΅Ұ୒ ௐࠪ
31. 2ͭͱ΋ϦϑΝϨϯε͕ ଟ͍ͷͰ͍͚ͦ͏ʂ ௐࠪ
32. ࣮ફ
33. ࣮ફ ·ͣ͸΍ͬͺΓ
34. υοτΠϯετʔϧ Expressೖ໳ (શ21ճ) - ϓϩάϥϛϯάͳΒυοτΠϯετʔϧ http://dotinstall.com/lessons/basic_expressjs ஫ҙ఺ - expressͷόʔδϣϯ͕3ͳͷͰ஫ҙʢݱࡏ͸4ʣ - ಈըΛݟΔ্Ͱόʔδϣϯมߋ͕བྷΉ෦෼͸ɺmiddlewareͷมߋ͙Β͍ɻ LoggerͳͲͷmiddleware͕express͔Β੾Γ෼͚ΒΕͨͷͰɺඞཁʹԠ͡ ͯnpm installɾrequireΛ͢Δײ͡ ࣮ફ
35. มߋ͸͜Μͳײ͡ express.hogehogeͷ෦෼͕֘౰ ࣮ફ
36. υοτΠϯετʔϧͰֶΜͩ΋ͷ جຊతͳػೳ -Routing -Middleware -View ࣮ફ
37. Routing ࣮ફ
38. Middleware ΞΫηεϩάΛ؆қʹग़ྗ putɺdeleteͳͲͷHTTPϝιουͷ࣮ݱ ࣮ફ
39. ViewͷϨϯμϦϯά ςϯϓϨʔτΤϯδϯͱ߹Θͤͯࢦఆͯ͠ ϨϯμϦϯά ࣮ફ
40. ֎ଆ͚ͩ͸ Ͱ͖ͦ͏ ࣮ફ
41. ࣍ʹ ࣮ફ
42. socket.ioͷνϡʔτϦΞϧ ࣮ફ
43. socket.ioͷνϡʔτϦΞϧ Script͸͜Ε͚ͩ Server side Client side ࣮ફ
44. Server side Client side socket.ioͷνϡʔτϦΞϧ ઀ଓΛ଴ͪड͚Δ ࣮ફ
45. Server side Client side socket.ioͷνϡʔτϦΞϧ #buttonΛΫϦοΫ ࣮ફ
46. Server side Client side socket.ioͷνϡʔτϦΞϧ ͜͜Ͱ௨৴ Ҿ਺ʹ#mͷvalue΋ ࣮ફ
47. Server side Client side socket.ioͷνϡʔτϦΞϧ connection΋ड͚औΓ chat message΋ड͚औΔ ࣮ફ
48. Server side Client side socket.ioͷνϡʔτϦΞϧ ಉ͘͡chat messageΛ ଴ͪड͚ɺड৴ ࣮ફ
49. Server side Client side socket.ioͷνϡʔτϦΞϧ ର৅ͷཁૉʹappend() ϝοηʔδΛදࣔ ࣮ફ
50. ૝૾Ҏ্ʹ ؆୯ͳAPI…ʂ ࣮ફ
51. ͜Ε͸͍͚Δ ʢ֬৴ʣ ࣮ફ
52. ·ͱΊ
53. ·ͱΊ - جຊ͸͙͢ʹཧղͰ͖ΔͷͰֶΜͰΔײָ͕͍͠ - ࠔͬͨ࣌΋࠷ѱιʔεΛಡΜͰͳΜͱ͔ͳΔɺ͸ͣ - express3ͷ࣌ͷ৘ใ͕ଟ͍ͨΊɺ༧૝ΑΓ΋ɹɹ ϦϑΝϨϯε͕ͳ͍ - ࣗ༝౓ߴͯ͘ΞονίονͰ৭ʑॲཧ͕Ͱ͖ΔͷͰ ൥ࡶʹͳΓͦ͏ - ͜͏ॻ͘ͱ͍͍Αతͳ͓࡞๏͕ͳ͍ͷͰ໎͏ ྑ͔ͬͨ఺ ೰ΈͲ͜Ζ
54. ຖ೔1࣌ؒͣͭ৮Δ͚ͩͰ΋ े෼ָ͠ΊΔͷͰੋඇʂ ௒͓खܰͰ͢ʂ
55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠