Let’s Build It

Public interface

The big picture is that we’re opening up the public interface we created for the game server to the web. The game server is a stateful system. Modern web front-ends are also stateful. We’ll build a Phoenix Channel as a stateful, persistent connection between these two stateful systems. This new channel’s public interface will become the mechanism clients will use to interact with the game.

Here’s the plan

We build this Channel function by function and check its behavior at each step by calling JavaScript code in the browser’s developer tools console. We want the new Channel to communicate directly with an individual GenServer process for a game. Since Channels multiplex messages, a single channel can handle clients sending messages to many topics. This means that a single Channel can handle the communication for numerous games. To check that this communication works means, we need to be able to see what’s happening from the browser all the way down to the server.

To fully exercise this, we use two separate browser windows. This mimics two players playing the game on the web. We work with the developer tools JavaScript console in each browser window. We also have an IEx session open to check what’s happening to the state of the game server.

This setup is going to look like the following figure: