Building multiplayer game using Streams v2

Slide 1

Slide 1 text

michalplachta.com @miciek Building multiplayer game using Streams Michał Płachta

Slide 2

Slide 2 text

michalplachta.com @miciek Streams Streams? way of defining application logic level of abstraction Threads Futures Actors

Slide 3

Slide 3 text

michalplachta.com @miciek Streams? focused on data transformations Element Our Code New Element

Slide 4

Slide 4 text

michalplachta.com @miciek Streams? explicit time dependencies time

Slide 5

Slide 5 text

michalplachta.com @miciek Streams? declarative programming Functional developer’s sanity Imperative Declarative

Slide 6

Slide 6 text

michalplachta.com @miciek What’s inside? ● how frontend web app written in streams looks like ● how backend app written using streams looks like ● how do Reactive Streams keep async communication safe?

Slide 7

Slide 7 text

michalplachta.com @miciek Meet Snake & Fruit Snake Fruit

Slide 8

Slide 8 text

michalplachta.com @miciek Our First Stream: “Ticks” stream

Slide 9

Slide 9 text

michalplachta.com @miciek “Directions” stream

Slide 10

Slide 10 text

michalplachta.com @miciek “Snake’s Head Positions” stream

Slide 11

Slide 11 text

michalplachta.com @miciek Stream operators: map & scan stream.map(f) ● transforms values from stream using function f ● returns a new stream with transformed values stream.scan(init, f) ● accumulates values from stream using function f ○ f(acc,val)=>new_acc ● returns a new stream that outputs accumulator value

Slide 12

Slide 12 text

michalplachta.com @miciek Once again: the code

Slide 13

Slide 13 text

michalplachta.com @miciek Displaying values from the stream

Slide 14

Slide 14 text

michalplachta.com @miciek Streams are reusable

Slide 15

Slide 15 text

michalplachta.com @miciek Streams & Operators are lazy No elements or No terminal function

Slide 16

Slide 16 text

michalplachta.com @miciek “You call this a game?”

Slide 17

Slide 17 text

michalplachta.com @miciek “Key presses” stream

Slide 18

Slide 18 text

michalplachta.com @miciek “Left Key Presses” stream

Slide 19

Slide 19 text

michalplachta.com @miciek “Right Key Presses” stream

Slide 20

Slide 20 text

michalplachta.com @miciek Stream operators: filter stream.filter(p) ● checks each value from stream against the predicate passed as p ● returns a new stream that outputs only values that satisfy condition p Already used: ● map(f) ● scan(init, f(acc, val))

Slide 21

Slide 21 text

michalplachta.com @miciek “Left Rotations” stream

Slide 22

Slide 22 text

michalplachta.com @miciek “Right Rotations” stream

Slide 23

Slide 23 text

michalplachta.com @miciek “Actions” stream

Slide 24

Slide 24 text

michalplachta.com @miciek Stream operators: merge stream.merge(stream2) ● stream is merged with stream2 ● returns a new stream that outputs values from both stream and stream2 as they appear Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p)

Slide 25

Slide 25 text

michalplachta.com @miciek New “Directions” stream based on user input

Slide 26

Slide 26 text

michalplachta.com @miciek Recap: Old “Directions” stream

Slide 27

Slide 27 text

michalplachta.com @miciek “Directions” stream: Better, but no timing! vs

Slide 28

Slide 28 text

michalplachta.com @miciek Stream operators: sampledBy stream.sampledBy(stream2) ● last value from stream is taken when any value appears in stream2 ● returns a new stream that outputs values from stream sampled by values from stream2 Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2)

Slide 29

Slide 29 text

michalplachta.com @miciek “Directions” stream: user input & timing

Slide 30

Slide 30 text

michalplachta.com @miciek “Snake Head Positions”: no change needed

Slide 31

Slide 31 text

michalplachta.com @miciek User moves the snake: the code

Slide 32

Slide 32 text

michalplachta.com @miciek Current implementation ● “ticks” ● “key presses” ● “left key presses” ● “right key presses” ● “left rotations” ● “right rotations” ● “actions” ● “dir changes” ● “directions” ● “snake head positions” + map, scan, filter, merge & sampledBy 10 streams

Slide 33

Slide 33 text

michalplachta.com @miciek Stream operators: slidingWindow stream.slidingWindow(n) ● aggregate last n values ● returns a new stream that outputs arrays of last n values from the stream ● can be implemented using scan Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2) ● sampledBy(stream2)

Slide 34

Slide 34 text

michalplachta.com @miciek “Snakes” stream

Slide 35

Slide 35 text

michalplachta.com @miciek Quiz: Eating a fruit? using 6 operators ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2) ● sampledBy(stream2) ● slidingWindow(n) & 11 streams ● “ticks” ● “key presses” ● “left key presses” ● “right key presses” ● “left rotations” ● “right rotations” ● “actions” ● “direction changes” ● “directions” ● “snake head positions” ● “snakes”

Slide 36

Slide 36 text

michalplachta.com @miciek “Fruit eaten events” stream

Slide 37

Slide 37 text

michalplachta.com @miciek Frontend in action!

Slide 38

Slide 38 text

michalplachta.com @miciek Architecture: 11 streams, 2 ins & 2 outs

Slide 39

Slide 39 text

michalplachta.com @miciek Snake’s going multiplayer FINALLY SOME SCALA CODE

Slide 40

Slide 40 text

michalplachta.com @miciek Snake Server App Requirements ● clients send snake positions to the server ● server generates fruits ● server keeps scores ● server broadcasts: ○ positions of all snakes ○ positions of fruits ○ current scoreboard

Slide 41

Slide 41 text

michalplachta.com @miciek Let’s design Server App Flow! one player flow Game Event

Slide 42

Slide 42 text

michalplachta.com @miciek WebSocket connected to the Flow

Slide 43

Slide 43 text

michalplachta.com @miciek WebSocket as a stream: Server App

Slide 44

Slide 44 text

michalplachta.com @miciek Snake App Flow (one player)

Slide 45

Slide 45 text

michalplachta.com @miciek Moved to server: “Fruit eaten events” stream

Slide 46

Slide 46 text

michalplachta.com @miciek “Fruits” stream

Slide 47

Slide 47 text

michalplachta.com @miciek “Fruits” stream using Akka Stream

Slide 48

Slide 48 text

michalplachta.com @miciek Snake App Flow (one player)

Slide 49

Slide 49 text

michalplachta.com @miciek “Score updates” stream

Slide 50

Slide 50 text

michalplachta.com @miciek “Scores” stream

Slide 51

Slide 51 text

michalplachta.com @miciek “Scores” stream using Akka Stream

Slide 52

Slide 52 text

michalplachta.com @miciek Snake App Flow (one player)

Slide 53

Slide 53 text

michalplachta.com @miciek Game Logic Server Flow

Slide 54

Slide 54 text

michalplachta.com @miciek Game Logic Flow using Akka Stream

Slide 55

Slide 55 text

michalplachta.com @miciek Snake App Flow (one player)

Slide 56

Slide 56 text

michalplachta.com @miciek Merging Player Flows outputs

Slide 57

Slide 57 text

michalplachta.com @miciek Server app flow using Akka Stream

Slide 58

Slide 58 text

michalplachta.com @miciek Backend in action!

Slide 59

Slide 59 text

michalplachta.com @miciek What if there are thousands of players?

Slide 60

Slide 60 text

michalplachta.com @miciek Crossing Async Boundary Push Model ● not safe when Subscriber slower ● perfect when Subscriber faster ● too slow when Subscriber faster ● perfect when Subscriber slower Pull Model

Slide 61

Slide 61 text

michalplachta.com @miciek Reactive Streams Streams with supply & demand ● “as fast as possible, but not faster” ● consumer wants to pull elements (= demand) ● only then publisher can push ○ it supplies elements until demand is satisfied

Slide 62

Slide 62 text

michalplachta.com @miciek Reactive Streams Lack of demand = Backpressure

Slide 63

Slide 63 text

michalplachta.com @miciek Example of Reactive Streams

Slide 64

Slide 64 text

michalplachta.com @miciek Reactive Streams

Slide 65

Slide 65 text

michalplachta.com @miciek Reactive Streams API public interface Publisher { public void subscribe(Subscriber s); } public interface Subscriber { public void onSubscribe(Subscription s); public void onNext(T t); public void onError(Throwable t); public void onComplete(); } public interface Subscription { public void request(long n); public void cancel(); } public interface Processor extends Subscriber, Publisher {}

Slide 66

Slide 66 text

michalplachta.com @miciek Simple API, hard implementation... https://github.com/reactive-streams/reactive-streams-jvm/blob/v1.0.0/README.md#specification

Slide 67

Slide 67 text

michalplachta.com @miciek Reactive Streams API implementations ● Project Reactor ● Ratpack ● Vert.x ● Slick ● Akka Stream ● JDK 9 ● Integrations: ○ Kafka, ○ Mongo, ○ Cassandra

Slide 68

Slide 68 text

michalplachta.com @miciek Akka Stream model Publisher => Source Processor => Flow Subscriber => Sink Our Snake implementation uses Reactive Streams!

Slide 69

Slide 69 text

michalplachta.com @miciek ● NO ○ frontend is pushing every 100ms ● Possible solutions: ○ Reactive Streams web frameworks? ○ conflate/expand? ○ buffer between frontend & backend? Is Snake Multiplayer safe?

Slide 70

Slide 70 text

michalplachta.com @miciek Links Build YOUR OWN Snake using Streams - blog post (step-by-step tutorial) michalplachta.com/2016/05/11/reactive-ui-by-example/ Client Side Code github.com/miciek/web-snake-react-bacon Server Side Code github.com/miciek/snake-multiplayer-akka-streams Play with streams and operators! rxmarbles.com/ Akka Streams doc.akka.io/docs/akka/2.4.9/scala/stream/ BaconJS - streams in JavaScript baconjs.github.io/

Slide 71

Slide 71 text

michalplachta.com @miciek Michał Płachta THANK YOU www.michalplachta.com