Event-sourced game implementation example – Part 2/3: Building web application

Event-sourced game implementation example – Part 2/3: Building web application

Event-sourced game implementation example – Part 2/3: Building web application

Welcome to the 2nd part of the event-sourced game post series! In case you haven’t yet read the previous part, I highly recommend reading it before.

Today we’ll focus on the frontend server part, the one that’ll be responsible for handling user interface interactions as well as backend server communication.

What do we have so far?

Quick recap of what has been done so far in part 1:

  • we’ve implemented a backend server that lets us play games using its REST API
  • we’ve been able to peek at generated game events in the RabbitMQ console

Now it’s time to create a UI that’ll seamlessly combine the two to create a decent user experience. Here’s what it will look like:


For this, we’ll use:

  • Play! Framework as our frontend server
  • WebSocket for real-time browser <-> frontend server communication
  • Reactive rabbit to receive game events from RabbitMQ
  • AngularJS on the UI side

The action flow from the UI point of view will be as follows:

  • the user creates a new game (the command is sent)
  • the game is created (the response is received)
  • UI binds itself to events from a newly created game (WebSocket connection is created)
  • the user chooses the players count and starts the game (the command is sent)
  • GameStarted event is received through WebSocket connection, the UI is updated
  • the user chooses the player and rolls the dice (the command is sent)
  • DiceRolled events are received, the UI is updated

Looking at these, our Play! the server will need to handle:

  • routes to execute commands
  • WebSocket route to receive events from a given game


First, let’s add these routes to our Play! application:



POST ones are for commands and the GET route is for websocket connection. Let’s take a look at the implementation.

Commands routes:



Nothing special here, commands are just forwarded to our backend server (with some additional responses mapping).

Websocket route is a little bit more complex:



acceptWithActor takes two type parameters: one for incoming messages (it’s just a String, since we don’t send anything to the server anyway) and another for outgoing messages, which are GameEvents.



To make it work that way we need to tell Play! how to actually send GameEvent through WebSocket. It’s done by bringing implicit FrameFormatter[GameEvent] to the scope. We’ll format GameEvents as JSON and use FrameFormatter.jsonFrame which Play! provides:



What’s next in acceptWithActor is a method that takes a HTTP request and an ActorRef out (which is used to send messages from server to client) and returns Props to create WebSocket connection handling Actor. We’re telling it to create one WebsocketEventPublisher for every WebSocket connection, we also pass out reference to it, which it can later use to send messages through the connection.

Receiving and passing events

Let’s have a closer look at WebsocketEventPublisher.



What we do, when the actor starts, is create a new queue and bind it to the events from given game. It’s the last parameter in queueBind – argumentswhich says “hey, I want to receive only events from the game with id == gameId”.

Once the queue is bound, we create a Source out of it, which we attach Sinkto. Our sink is an EventSubscriber actor, which will receive every incoming event (or, at this point, rather a message that represents an event).



Once it receives an event, it’ll pass it back to WebsocketEventPublisher(that’s why we pass self reference to its props).WebsocketEventPublisher will pass it further, to out reference (which will use FrameFormatter to serialize the message and send it through WebSocket connection).



requestStrategy in EventSubscriber tells streams implementations how many more messages the actor wants to receive.

Here it’s implemented to always be at least 1, meaning we want to receive as many messages as there are. It may not however be always appropriate elsewhere. I don’t want to focus too much on back pressure in this post, so we’ll just stick with this.

Those watchful may say that it doesn’t look good to pass these rather backend-side events directly to the browser. It’s true, usually, some additional processing/validation would be added before passing them to WebSocket, but it’s not necessary for our simple application.

Frontend part

Now that we have our backend stuff ready, let’s see how can we use it on the frontend.


Let’s start with two Angular services:

  • one for sending commands (create game, start game, roll the dice)
  • and another for subscribing to events for a given game (using our WebSocket endpoint)

Here’s what they both look like:



There’s really nothing special here, I won’t even comment the command part – these are just http POSTs.

On the event side, we simply broadcast every incoming message, were the name parameter of $broadcast contains an event type so that we can later easily listen for a particular game event.


User at given time can see one of three pages (stored in rootScope):



This variable determines the currently shown content (and used controller) with ng-switch:



Each controller handles a different set of user actions, let’s examine them:

The first one is CreateGameController:



It’s really simple. It just POSTs to create a new game and upon success connects the event service to the event stream, changing the currently shown page to choose_players with corresponding StartGameController:



This gives the user the possibility to specify players’ count and handles the “Start game” button click. It also shows a popover in case of an error.

If there were no errors and the game was started, GameStarted event is handled in the main application:



The game state is stored in the game variable in rootScope and is updated according to the events received:



Finally, we have GameController that handles user inputs when the game is running:



It also listens to game events to update the view accordingly. When the game is finished the “Play Again” button is visible which, upon clicking, redirects the user back to the “create” view.

You can find all the related views in index.scala.html file.


That’s it for the 2nd part. Our game is ready :)

We can now consume events from RabbitMQ and send commands to our backend server. Both functionalities are seamlessly integrated into our modest interface and the distinction is invisible to the user. But the fun is not over yet. In the 3rd part, we’ll see how easy it is to grab some statistics from the games played and expose collected data.

As usual, the full source code is available on GitHub.

Other parts:


Do you like this post? Want to stay updated? Follow us on Twitter or subscribe to our Feed.

See also

Download e-book:

Scalac Case Study Book

Download now


Łukasz Gąsior
Łukasz Gąsior

I'm a passionate Scala developer, working on commercial Java and Scala projects since 2013. I'm a big fan of DDD, CQRS/ES and distributed systems. I've been using technologies such as Akka (Core, Persistence, Streams, Cluster), Play! Framework, Spray and many others.

Łukasz Gąsior
Łukasz Gajowy

I’m a (currently Scala) Software Developer, Apache Committer (Beam), and a good software design enthusiast. I like statically-typed functional programming, working with cutting-edge technologies and doing technical research for new projects. You can follow me on Twitter (@lgajowy)!

Latest Blogposts

19.07.2024 / By 

CrowdStrike Falcon Down: How a single security update shutdown Windows worldwide

Today, on July 19, 2024, a CrowdStrike code update led to global issues affecting Windows computers. The operating systems crashed repeatedly, displaying Blue Screen of Death (BSoD), keeping them in a non-usable loop state. This outage caused around 1400 flights to be cancelled, as well as numerous services to be stuck in a dysfunctional state: […]

27.06.2024 / By 

Scalendar July 2024

Welcome to the July edition of our newsletter! We bring you the latest updates on Scala conferences in July 2024, as well as frontend development and software architecture events. There are several conferences and meetups this month for developers of all levels, despite the start of a vacation season. Whether you’re looking to deepen your […]

19.06.2024 / By 

How Akka Specialists Drive Innovation in Software Projects

Akka Specialists

Why do you need Akka Specialists? Today’s global software development ecosystem is, to say the least, fast-paced, dynamic, and diverse. Every company, even partially operating in it, should always keep its finger on the pulse – innovation is the key to staying ahead of the competition. Companies constantly look for new ways to improve the […]

software product development

Need a successful project?

Estimate project