Complete Intro to Real-Time
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Brian 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 Setup
Brian 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.
Polling
Long Polling Overview & Backend Setup
Brian 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 setTimeout
Brian 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 requestAnimationFrame
Brian 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 Overview
Brian 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 & Retry
Brian codes the backoff functionality into the application. Try/Catch statements are also explained in this segment.
HTTP/2
HTTP/2 Push Overview
Brian 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 Backend
Brian 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 Frontend
Brian 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 Connections
Brian 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 Setup
Brian 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 Connection
Brian 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 WebSockets
Brian 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.
Frames & Parsing Message Buffers
Brian dissects the anatomy of a frame and walks through how the server parses the message buffer sent from the client. Binary data is received through the WebSocket and decoded into UTF-8. The result can be parsed as JSON or any other JavaScript data type.
Managing Web Socket Connections
Brian 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
Socket.IO Overview
Brian 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 Connection
Brian 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 Data
Brian 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.
