Modern Full-Stack Development

 Handling Server-Sent Messages
Now, we get to the heart of things: handling the various messages that can come from 
the server at various points in the game. For this, we have a single event handler function 
set up:
connection.onmessage = function(inMessage: any) {
  console.log(`WS received: ${inMessage.data}`);
  const msgParts: string[] = inMessage.data.split("_");
  const message: string = msgParts[0];
First, it should be noted that what you receive in this function is an object. This 
object, most importantly to us, has a data attribute. This is the string message that was 
sent from the server.
Chapter 11   time for fun: BattleJong, the Client

---

328
After logging the message that was received, the message is broken into its 
constituent part. The first part of the message is a specific message. I know you’re 
shaking your head right now at that sentence – I realize it’s confusing! Let me try and 
clear it up: the client WebSocket receives a message from the server, and the inMessage 
argument represents that. Let’s call this the WebSocket message. But, within that 
WebSocket message string is a message that pertains to the game itself, something 
application-defined, so that you can call that the game message.
This game message is what this function is concerned with primarily because, next, a 
switch statement is used:
switch (message) {
  case "connected":
    this.state.handleMessage_connected(msgParts[1]);
  break;
  case "start":
    this.state.handleMessage_start(JSON.parse(msgParts[1]));
  break;
  case "update":
    this.state.handleMessage_update(
      msgParts[1], parseInt(msgParts[2])
    );
  break;
  case "gameOver":
    this.state.handleMessage_gameOver(msgParts[1]);
  break;
}
}.bind(inParentComponent);
Each of the four game messages that the server can send is forwarded along to 
an appropriate method in the state object to do the actual work associated with each 
message, and we’ll be looking at those in the next section. With those calls go the 
Chapter 11   time for fun: BattleJong, the Client

---

329
information in the WebSocket message string following the game message portion, 
which is specific to each message. For all but the update message, there’s just a single 
piece of information to send, so it’s the second element in the array produced by the call 
to split() earlier. For update, two pieces of information are sent.
Finally, because we need all of this to execute within the context of the BaseLayout 
component, this onmessage event handler function is bound to inParentComponent.