Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
リアルタイムアクションゲームから見る
Node.js 実践非同期処理
2015/05/19
DaikiTaniguchi (@kidach1)
Akatsuki inc.
kidach1
・Github https://github.com/kidach1
・Twitter https://twitter.com/kidach1
・Qiita http://qiita.com/kidach1
・Node / Ja...
Agenda
・何を作っているか
・Nodeにおける非同期処理手法
 ・Promise
 ・Generator
・非同期処理実践
・テスト
Products
・2D横スクロールアクション
・マルチプレイ
 ・4人同時対戦
 ・座標同期型
 ・プレイヤーマッチング (Rating / Keyword)
Architecture
Sequence (rough)
Platform / Protocal / Language
・Node.js
・WebSocket
・JavaScript /TypeScript
Node.js
・SingleThread
・Non-blacking
・EventDriven
Node.js
・SingleThread
・Non-blacking
・EventDriven
→ websocket(双方向通信)との相性 ◎
Node.js
Node.js
Callback Hell
Solution
最近のjs非同期処理 PromiseとGeneratorの共存
http://qiita.com/kidach1/items/d997df84a0ede39d76ad
Promise
・非同期処理と操作を抽象化したAPI
・then chain
 ・thenable
・もともと初期のNodeには実装されていた
 →deprecated
 →ブラウザ ( jQuery.Deffered() )
 →ES6でPr...
Promise
・ある非同期処理
Promise
・Promiseオブジェクトでくるむ
・基本呼び出し
Promise
・基本呼び出し
$ time node --harmony promise.js
Sync 1
Async 1
# node --harmony promise.js 0.05s user 0.05s system 8% cpu 1.179 t...
・直列処理
Promise
・直列処理
$ time node --harmony promise.js
Sync 1
Sync 2
Sync 3
# node --harmony promise.js 0.06s user 0.06s system 3% cpu 3.2...
・直列処理
$ time node --harmony promise.js
Sync 1
Sync 2
Sync 3
# node --harmony promise.js 0.06s user 0.06s system 3% cpu 3.2...
・並列処理
Promise
・並列処理
$ time node --harmony promise.js
Sync 1
[ ‘Async 1’, ‘Async 2’, ‘Async 3’ ]
# node --harmony promise.js 0.07s user 0...
・並列処理
$ time node --harmony promise.js
Sync 1
[ ‘Async 1’, ‘Async 2’, ‘Async 3’ ]
# node --harmony promise.js 0.07s user 0...
Generator
・ES6
・co-routine
・非同期処理を同期処理っぽく(縦に)書く
・yeild/next で処理の中断/再開
 ・yeildables
・try~catch
Generator
・yeild/next
 ・処理の中断/再開
 ・値の送信/受信
Generator
・yeild/next
 ・処理の中断/再開
 ・値の送信/受信
$ time node --harmony generator.js
Sync 1
Async 1
Async 2
Async 3
# node --harm...
Generator
・yeild/next
 ・処理の中断/再開
 ・値の送信/受信
$ time node --harmony generator.js
Sync 1
Async 1
Async 2
Async 3
# node --harm...
・縦に書けて良い!が・・・
 ・送信/受信(next / yield)を るのは辛い
 ・generatorオブジェクトを隠 したい
Generator
co
https://github.com/tj/co
co
https://github.com/tj/co
Generator
Generator
Generator
・yieldに渡すメソッドのインターフェースは?
co
https://github.com/tj/co
co
https://github.com/tj/co
thenable is yieldables.
・直列処理
Generator with co
・直列処理
Generator with co
$ time node --harmony generator.js
Sync 1
Async 1
Async 2
Async 3
# node --harmony generator.js 0....
・直列処理
Generator with co
・直列処理
Generator with co
$ time node --harmony generator.js
Sync
aSyNc
ASYNC
async
# node --harmony generator.js 0.07s user...
・Error Handling
Generator
・Error Handling
Generator
・Error Handling
$ time node --harmony generator.js
Sync 1
Error: err!
# node --harmony generator.js 0.08s user 0.03s syste...
・Error Handling
Promise
・Error Handling
$ time node --harmony promise.js
Sync 1
Error: err!
# node --harmony promise.js 0.07s user 0.03s system 8%...
非同期処理実例
- ユーザー情報のセット
- レーティングごとまたは指定ルームNoごとのユーザー一覧の更新
- 同一ルームNoのユーザー/レートの近いユーザー(候補者)の取得
- 候補者からマッチング相手の絞込み
- マッチングしたことを各ユーザーに通知
・プ...
Examples
・プレイヤーマッチング処理 (callback ver)
・プレイヤーマッチング処理 (Promise ver)
Examples
・プレイヤーマッチング処理 (Promise ver)
Examples
・Promise objcet
Examples
・プレイヤーマッチング処理 (Generator ver)
Examples
・プレイヤーマッチング処理 (Promise ver)
Examples
- roomに終了済ユーザー情報をセット
- 全員終了済かどうか判定
- 終了済ならroomに通知
・ゲーム終了判定処理
Examples
・ゲーム終了判定処理 (Promise ver)
Examples
・ゲーム終了判定処理 (Generator ver)
Examples
- socket.idからユーザー情報/ルーム情報を取得
- ルーム情報からルームメンバーを取得
- メンバーにdisconnectを通知
- ルーム情報からユーザー情報を除去
・プレイヤーdisconnect時の処理
Examples
・プレイヤーdisconnect時の処理 (Promise ver)
Examples
・プレイヤーdisconnect時の処理 (Promise ver)
Examples
・プレイヤーdisconnect時の処理 (Generator ver)
Examples
非同期処理のテスト
Testing
・接続シーケンスのシミュレート
・Mocha / should http://mochajs.org/
 ・高機能TestingFW & matcher
・sinon http://sinonjs.org/
 ・mock, st...
・CONNECTの後にCONNECTEDが返却されること
Testing
・discoonectが同一ルームのメンバーに通知されること
Testing
・discoonectが同一ルームのメンバーに通知されること
Testing
・discoonectが同一ルームのメンバーに通知されること
Testing
Testing
・discoonectが別ルームのメンバーに通知されないこと
Testing
・discoonectが別ルームのメンバーに通知されないこと
Testing
・discoonectが別ルームのメンバーに通知されないこと
・Client Class
Testing
まとめ
・thenable is yieldables
 ・個々の処理はPromiseベースでくるんでおき
 ・Promiseで事足りるならそのまま
 ・複雑性が増しそうならgeneratorの世界を訪れる
まとめ
・thenable is yieldables
 ・個々の処理はPromiseベースでくるんでおき
 ・Promiseで事足りるならそのまま
 ・複雑性が増しそうならgeneratorの世界を訪れる
→ 気軽に行き来出来る!
PromiseとGeneratorで気持ち良い非同期処理を!
Questions
Appendix
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Promise 内部実装イメージ
	
  $	
  node	
  promise.js	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
Demo
Generator
Stream
・サイズの大きいdataを取り扱うI/O
 ・dataをchunkに分割
 ・メモリ効率
 ・パフォーマンス
  ・読み込みながら(並列的に)別処理
 ・優れたインターフェース
  ・pipeで繋ぐ
Stream
Upcoming SlideShare
Loading in …5
×

Node.js 実践非同期処理

5,991 views

Published on

PromiseとGeneratorを活用したNode.js非同期処理

Published in: Internet

Node.js 実践非同期処理

  1. 1. リアルタイムアクションゲームから見る Node.js 実践非同期処理 2015/05/19 DaikiTaniguchi (@kidach1) Akatsuki inc.
  2. 2. kidach1 ・Github https://github.com/kidach1 ・Twitter https://twitter.com/kidach1 ・Qiita http://qiita.com/kidach1 ・Node / JavaScript /TypeScript  Ruby / Rails  Dvorak Keyboard
  3. 3. Agenda ・何を作っているか ・Nodeにおける非同期処理手法  ・Promise  ・Generator ・非同期処理実践 ・テスト
  4. 4. Products ・2D横スクロールアクション ・マルチプレイ  ・4人同時対戦  ・座標同期型  ・プレイヤーマッチング (Rating / Keyword)
  5. 5. Architecture
  6. 6. Sequence (rough)
  7. 7. Platform / Protocal / Language ・Node.js ・WebSocket ・JavaScript /TypeScript
  8. 8. Node.js ・SingleThread ・Non-blacking ・EventDriven
  9. 9. Node.js ・SingleThread ・Non-blacking ・EventDriven → websocket(双方向通信)との相性 ◎
  10. 10. Node.js
  11. 11. Node.js Callback Hell
  12. 12. Solution 最近のjs非同期処理 PromiseとGeneratorの共存 http://qiita.com/kidach1/items/d997df84a0ede39d76ad
  13. 13. Promise ・非同期処理と操作を抽象化したAPI ・then chain  ・thenable ・もともと初期のNodeには実装されていた  →deprecated  →ブラウザ ( jQuery.Deffered() )  →ES6でPromiseA+として復活 ・ES6系機能は--harmony optionが必要(v0.12)   Node.jsのv0.12の時に harmony はdefaultにならないという結論になりました。 - from scratch   http://yosuke-furukawa.hatenablog.com/entry/2014/01/31/153207
  14. 14. Promise ・ある非同期処理
  15. 15. Promise ・Promiseオブジェクトでくるむ
  16. 16. ・基本呼び出し Promise
  17. 17. ・基本呼び出し $ time node --harmony promise.js Sync 1 Async 1 # node --harmony promise.js 0.05s user 0.05s system 8% cpu 1.179 total Promise
  18. 18. ・直列処理 Promise
  19. 19. ・直列処理 $ time node --harmony promise.js Sync 1 Sync 2 Sync 3 # node --harmony promise.js 0.06s user 0.06s system 3% cpu 3.218 total Promise
  20. 20. ・直列処理 $ time node --harmony promise.js Sync 1 Sync 2 Sync 3 # node --harmony promise.js 0.06s user 0.06s system 3% cpu 3.218 total Promise
  21. 21. ・並列処理 Promise
  22. 22. ・並列処理 $ time node --harmony promise.js Sync 1 [ ‘Async 1’, ‘Async 2’, ‘Async 3’ ] # node --harmony promise.js 0.07s user 0.03s system 8% cpu 1.079 total Promise
  23. 23. ・並列処理 $ time node --harmony promise.js Sync 1 [ ‘Async 1’, ‘Async 2’, ‘Async 3’ ] # node --harmony promise.js 0.07s user 0.03s system 8% cpu 1.079 total Promise
  24. 24. Generator ・ES6 ・co-routine ・非同期処理を同期処理っぽく(縦に)書く ・yeild/next で処理の中断/再開  ・yeildables ・try~catch
  25. 25. Generator ・yeild/next  ・処理の中断/再開  ・値の送信/受信
  26. 26. Generator ・yeild/next  ・処理の中断/再開  ・値の送信/受信 $ time node --harmony generator.js Sync 1 Async 1 Async 2 Async 3 # node --harmony generator.js 0.07s user 0.03s system 2% cpu 3.099 total
  27. 27. Generator ・yeild/next  ・処理の中断/再開  ・値の送信/受信 $ time node --harmony generator.js Sync 1 Async 1 Async 2 Async 3 # node --harmony generator.js 0.07s user 0.03s system 2% cpu 3.099 total
  28. 28. ・縦に書けて良い!が・・・  ・送信/受信(next / yield)を るのは辛い  ・generatorオブジェクトを隠 したい Generator
  29. 29. co https://github.com/tj/co
  30. 30. co https://github.com/tj/co
  31. 31. Generator
  32. 32. Generator
  33. 33. Generator ・yieldに渡すメソッドのインターフェースは?
  34. 34. co https://github.com/tj/co
  35. 35. co https://github.com/tj/co
  36. 36. thenable is yieldables.
  37. 37. ・直列処理 Generator with co
  38. 38. ・直列処理 Generator with co $ time node --harmony generator.js Sync 1 Async 1 Async 2 Async 3 # node --harmony generator.js 0.06s user 0.02s system 2% cpu 3.081 total
  39. 39. ・直列処理 Generator with co
  40. 40. ・直列処理 Generator with co $ time node --harmony generator.js Sync aSyNc ASYNC async # node --harmony generator.js 0.07s user 0.02s system 2% cpu 3.074 total
  41. 41. ・Error Handling Generator
  42. 42. ・Error Handling Generator
  43. 43. ・Error Handling $ time node --harmony generator.js Sync 1 Error: err! # node --harmony generator.js 0.08s user 0.03s system 10% cpu 1.103 total Generator
  44. 44. ・Error Handling Promise
  45. 45. ・Error Handling $ time node --harmony promise.js Sync 1 Error: err! # node --harmony promise.js 0.07s user 0.03s system 8% cpu 1.076 total Promise
  46. 46. 非同期処理実例
  47. 47. - ユーザー情報のセット - レーティングごとまたは指定ルームNoごとのユーザー一覧の更新 - 同一ルームNoのユーザー/レートの近いユーザー(候補者)の取得 - 候補者からマッチング相手の絞込み - マッチングしたことを各ユーザーに通知 ・プレイヤーマッチング処理 (Promise ver) Examples
  48. 48. Examples ・プレイヤーマッチング処理 (callback ver)
  49. 49. ・プレイヤーマッチング処理 (Promise ver) Examples
  50. 50. ・プレイヤーマッチング処理 (Promise ver) Examples
  51. 51. ・Promise objcet Examples
  52. 52. ・プレイヤーマッチング処理 (Generator ver) Examples
  53. 53. ・プレイヤーマッチング処理 (Promise ver) Examples
  54. 54. - roomに終了済ユーザー情報をセット - 全員終了済かどうか判定 - 終了済ならroomに通知 ・ゲーム終了判定処理 Examples
  55. 55. ・ゲーム終了判定処理 (Promise ver) Examples
  56. 56. ・ゲーム終了判定処理 (Generator ver) Examples
  57. 57. - socket.idからユーザー情報/ルーム情報を取得 - ルーム情報からルームメンバーを取得 - メンバーにdisconnectを通知 - ルーム情報からユーザー情報を除去 ・プレイヤーdisconnect時の処理 Examples
  58. 58. ・プレイヤーdisconnect時の処理 (Promise ver) Examples
  59. 59. ・プレイヤーdisconnect時の処理 (Promise ver) Examples
  60. 60. ・プレイヤーdisconnect時の処理 (Generator ver) Examples
  61. 61. 非同期処理のテスト
  62. 62. Testing ・接続シーケンスのシミュレート ・Mocha / should http://mochajs.org/  ・高機能TestingFW & matcher ・sinon http://sinonjs.org/  ・mock, stub
  63. 63. ・CONNECTの後にCONNECTEDが返却されること Testing
  64. 64. ・discoonectが同一ルームのメンバーに通知されること Testing
  65. 65. ・discoonectが同一ルームのメンバーに通知されること Testing
  66. 66. ・discoonectが同一ルームのメンバーに通知されること Testing
  67. 67. Testing ・discoonectが別ルームのメンバーに通知されないこと
  68. 68. Testing ・discoonectが別ルームのメンバーに通知されないこと
  69. 69. Testing ・discoonectが別ルームのメンバーに通知されないこと
  70. 70. ・Client Class Testing
  71. 71. まとめ ・thenable is yieldables  ・個々の処理はPromiseベースでくるんでおき  ・Promiseで事足りるならそのまま  ・複雑性が増しそうならgeneratorの世界を訪れる
  72. 72. まとめ ・thenable is yieldables  ・個々の処理はPromiseベースでくるんでおき  ・Promiseで事足りるならそのまま  ・複雑性が増しそうならgeneratorの世界を訪れる → 気軽に行き来出来る!
  73. 73. PromiseとGeneratorで気持ち良い非同期処理を!
  74. 74. Questions
  75. 75. Appendix
  76. 76. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  77. 77. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  78. 78. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  79. 79. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  80. 80. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  81. 81. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  82. 82. Promise 内部実装イメージ  $  node  promise.js                                                                                                                                                   42
  83. 83. Demo Generator
  84. 84. Stream ・サイズの大きいdataを取り扱うI/O  ・dataをchunkに分割  ・メモリ効率  ・パフォーマンス   ・読み込みながら(並列的に)別処理  ・優れたインターフェース   ・pipeで繋ぐ
  85. 85. Stream

×