Modern Full-Stack Development

 Talking to the Server: socketComm.ts
Next, let’s look at the socketComm.ts source file, which contains the code that talks to the 
server via WebSockets. It begins with a single import:
import React from "react";
As it happens, this import is only needed for TypeScript purposes – if this were plain 
JavaScript, it wouldn’t be needed – and where it’s needed is the very next line:
export function createSocketComm(
  inParentComponent: React.Component
) {
Much like the state object that you saw in MailBag (and like the state object you’ll 
see next in this project), a function is necessary to return an object that will be used by 
the rest of the code due to binding requirements. The argument passed in is a React.
Component, so that’s why we need the import: to be able to specify the type of this 
argument (contrast this with the argument to the createState() method in the MailBag 
state object where it wasn’t typed, so this import wasn’t needed there).
Next, it’s time to connect up to the server:
  const connection: WebSocket = new WebSocket("ws://localhost:8080");
Chapter 11   time for fun: BattleJong, the Client

---

327
The browser provides the WebSocket object (assuming a relatively newer version: 
IE11+, Edge 18+, Firefox 11+, Chrome 78+, Safari 13+, Opera 64+), and our app just needs 
a single instance, pointed to the server and using the ws protocol prefix. You, of course, 
can change this URL as appropriate, so long as the server is changed accordingly. This 
line establishes communication with the server, assuming it’s listening.
Next, an event listener is hooked up to the WebSocket object to log a message when 
the connection is opened:
connection.onopen = () => {
  console.log("Connection opened to server");
};
That’s all we need to do in this instance, so there’s not much to see. Also, handling 
errors in some way is a good thing to do, so that event handler is hooked up next:
connection.onerror = error => {
  console.log(`WebSocket error: ${error}`)
};
Since error recovery can be a whole topic on its own, I went the simple route and 
just ensured that the error is logged. As relatively simple as this API is, I felt that this was 
sufficient.