TypeScript: Modern JavaScript Development

Connecting to the server

We can connect to the server with the WebSocket class:

const socket = new WebSocket("ws://localhost:8800/"); 

Since we're using React, we add the following to the state. We create a new component, App, that will show the menu or a chat room based on the state. In lib/client/index.tsx, we first define the state and props of that component:

import * as React from "react"; import * as ReactDOM from "react-dom"; import * as api from "../shared/api"; import * as model from "./model"; import { Menu } from "./menu"; import { Room } from "./room"; interface Props { apiUrl: string; } interface State { socket: WebSocket; username: string; connected: boolean; completions: string[]; room: model.Room; } class App extends React.Component<Props, ...