Complete Intro to Real-Time

3 hours, 25 minutes CC
Complete Intro to Real-Time

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
Close

Course Details

Published: October 8, 2021

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 13 minutes
  • 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

Section Duration: 1 hour, 2 minutes
  • 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

Section Duration: 49 minutes

WebSockets By Hand

Section Duration: 47 minutes

Socket.IO

Section Duration: 25 minutes

Wrapping Up

Section Duration: 7 minutes
  • Wrapping Up
    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.
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

Kiana Kaiser

gilbert_intabo

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now