Neon
Complete Intro to Real-Time
3 hours, 25 minutes
CC
Course Description
Build apps where the client can push messages to the server and talk in real-time! You’ll start by learning long polling with Vanilla JavaScript and Node.js, then open web sockets by hand, and finally, you’ll learn some excellent web socket abstractions with SocketIO. You’ll learn back off and retry strategies along the way, as well as use HTTP2 push in the browser!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I completed "Complete Intro to Real-Time" by Brian Holt on Frontend Masters! The course offers a great introduction to ws, http, https and socket io.
Kiana Kaiser
gilbert_intabo
Course Details
Published: October 8, 2021
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 13 minutes
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.
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
Section Duration: 1 hour, 2 minutes
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.
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.
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.
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.
Brian codes the backoff functionality into the application. Try/Catch statements are also explained in this segment.
HTTP/2
Section Duration: 49 minutes
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.
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.
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.
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
Section Duration: 47 minutes
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.
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.
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.
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.
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
Section Duration: 25 minutes
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.
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.
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.
Wrapping Up
Section Duration: 7 minutes
Brian concludes the course by discussing some related technologies like WebRTC and SignalR. Resources and questions about sending data in a WebSocket versus over HTTP are also included in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops