Complete Intro to Real-Time
Table of Contents
IntroductionBrian Holt introduces the course and explains how it will follow a first-principles approach by covering lower-level details first and building up to higher-level abstractions. A question about understanding API design as a prerequisite is also covered in this segment.
Code SetupBrian walks through the computer requirements and setup instructions for running the exercises. All code will be written in the an 'exercise' folder. Solutions are also provided for the exercises.
Long Polling Overview & Backend SetupBrian explains long polling is the process of making many requests to repeatedly check for changes. The backend API will send and receive the chat messages whenever the client application requests them. Since the backend API is only pushing on to an array and returning the data, these endpoints could be reused by non-polling applications as well.
Polling with setTimeoutBrian implements polling by using the setTimeout method. After the client requests the messages from the server, the setTimeout method will send another request after a specified interval. A question about displaying the posted message immediately in the interface instead of waiting for the server to respond is also answered in this segment.
Polling with requestAnimationFrameBrian uses the requestAnimationFrame method to make the application pause the polling when the window is unfocused. The requestAnimationFrame method will eventually stop firing when the user unfocuses the window. The callback function passed to requestAnimationFrame receives a timestamp that can be used to determine when to make the next API call.
Backoff & Retry OverviewBrian explains how to handle failed requests using the backoff technique. If an application continues to send retry requests to the server, it can cause the server to overload. When using backoff, the retry requests continue to be sent, but at longer and longer intervals.
Coding Backoff & RetryBrian codes the backoff functionality into the application. Try/Catch statements are also explained in this segment.
HTTP/2 Push OverviewBrian introduces HTTP/2 Push which allows for long-running HTTP calls between client applications and the server. HTTP/2 is the successor to HTTP/1.1. Questions about HTTP/3 and the difference between TCP/IP and UDP are also covered in this segment.
Coding a HTTP/2 Push BackendBrian adds a stream event listener to the Node server. If the correct endpoint is requested, the connection is established with the client and the chat messages will be sent. The connection will remain open until the client has disconnected.
Coding a HTTP/2 Push FrontendBrian codes the front-end logic to read and decode the data stream coming from the server. Each chunk of data is parsed and rendered on the screen. This logic will run continuously in a do/while loop until the connection with the server is closed.
Managing HTTP/2 ConnectionsBrian demonstrates how the server will manage multiple connected streams and push out new messages as they arrive. Questions about header properties and handling JSON data in chunks are also covered in this segment.
WebSockets By Hand
Raw WebSockets SetupBrian introduces web sockets and compares them to long polling and HTTP/2 push. In the client application, a WebSocket object on the client uses the "ws://" protocol to connect with the server.
Establishing a WebSocket ConnectionBrian codes an event listener for and "upgrade" event which will begin to establish the WebSocket connection. The server returns a specific set of headers which allow the client and serve to complete the WebSocket connection.
Using WebSocketsBrian uses the write method to send data from the server down to the client. The client listens for a "message" event on the WebSocket object. The browser does all the decoding for the client so the only parsing necessary is converting to and from JSON.
Managing Web Socket ConnectionsBrian handles the data arriving to the server and broadcasts the data to all connected clients. A connections array maintains the list of connected clients. When an "end" event is received, the connection is removed from the array.
Socket.IO OverviewBrian introduces Socket.IO and compares it to the ws socket library. Socket.IO is a framework designed around WebSockets because it manages connection pools, can send large files like photos and videos, and adds middleware for auth or rate limiting.
Establishing a Socket.IO ConnectionBrian demonstrates how to create a connection between a client and server with Socket.IO. The server application can create a separate socket server or reuse an existing server. Both the client and server listen for connect and disconnect events.
Sending & Receiving DataBrian codes the remaining elements of the Socket.IO exercise. Custom events are create for sending and receiving messages. The client and server applications listen for the custom events which are sent by Socket.IO using the emit method.