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


Ł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

26.03.2023 / By  Daria Karasek

Scaling Applications: Best Practices and Strategies

As your application gains popularity and usage, ensuring it can handle the increased traffic and demand is essential. Scaling your application increases its capacity to handle more users and data. This guide offers tips and best practices for scaling your applications effectively. Understand Your Application’s Architecture. Before you can scale your application, it’s essential to […]

24.03.2023 / By  Daria Karasek

Maximizing Your Apache Kafka Investment with Consulting Services

If you’re using Apache Kafka for your data streaming needs, you may face challenges or want to optimize your implementation. Our consulting services can guide you in improving your Kafka setup, addressing issues, implementing best practices, and utilizing new features. What is Apache Kafka? Firstly, companies use Apache Kafka as an open-source distributed event streaming […]

20.03.2023 / By  Daria Karasek

7 Tips for a Successful Development Career in Fintech

Fintech is one of the world’s most exciting and fastest-growing industries. The fintech industry is worth approximately $180 billion (Deloitte). The fast-growing space is projected to reach $174 billion in 2023. And is predicted to reach $188 billion by 2024. It offers a unique set of career opportunities for future fintech developers.  If you’re thinking about beginning a […]

Need a successful project?

Estimate project