SocketIO v4, with websockets – the 2024 details.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome Video

Lecture 2: Course Overview

Lecture 3: All my code (github link)

Lecture 4: It's 2023: native websockets or socket.io… what should we use?

Chapter 2: Websockets – Before Socketio…

Lecture 1: Pre-socketio

Lecture 2: Housekeeping – How I do node/express

Lecture 3: TCP/UDP and networking 101

Lecture 4: Networking 201 – What is a socket and why should I care?

Lecture 5: HTTP vs Websockets

Lecture 6: A short overview of native websockets (finally some code!!)

Lecture 7: A short overview of native websockets continued

Chapter 3: Socket.io 101

Lecture 1: SECTION NOTICE

Lecture 2: Intro

Lecture 3: Why Socket.io? This is why.

Lecture 4: The basics of socket.io

Lecture 5: An important pitfall – connect/reconnect

Lecture 6: Small Chat app – in socket.io!

Lecture 7: Docs – new Server

Lecture 8: Docs – Server options

Lecture 9: The big 3 – .emit, .on, .connect

Lecture 10: Docs – The Client

Chapter 4: Section 2 – Let's Make It Slack (namespaces & rooms)

Lecture 1: SECTION NOTICE

Lecture 2: Section Intro and folder setup

Lecture 3: A quick illustration

Lecture 4: Namespaces & Rooms cheatsheet

Lecture 5: Project Whiteboarding & Steps

Lecture 6: Setup slack with sanity checks

Lecture 7: Steps 1-3 – Populate spaces and rooms from the server

Lecture 8: Rooms and Namespaces classes

Lecture 9: Add rooms to DOM

Lecture 10: UX Cleanup

Lecture 11: Docs – Namespaces

Lecture 12: Namespaces code review

Lecture 13: Docs – Rooms

Lecture 14: Step 4-6

Lecture 15: Whiteboarding – performance thinking Websockets

Lecture 16: Implementing nsChange and Express route –> io.emit

Lecture 17: Implementing nsChange continued…

Lecture 18: Slack – Joining a Room- Steps 7-9

Lecture 19: Acknowledgement Functions, fetchSockets() – steps 7-9 continued

Lecture 20: emitWithAck, init join room

Lecture 21: emit messages to room – steps 7-9 continued

Lecture 22: Slack – Sending the history – Steps 7-9 continued

Lecture 23: Passing query data on connection – basic auth intro

Chapter 5: Multiplayer Canvas Game – Agar.io clone

Lecture 1: SECTION NOTICE

Lecture 2: Project Demo & setting expectations

Lecture 3: Project Strategy – performance matters!

Lecture 4: Socket.io App Organization

Lecture 5: Getting the DOM setup

Lecture 6: A few UI Loose ends

Lecture 7: Draw the player

Lecture 8: The ugly math of moving the right direction

Lecture 9: Get, and draw, the game orbs (non-players)

Lecture 10: Whiteboarding Player classes – What does the server NEED to send?

Lecture 11: The Player Classes

Lecture 12: Refactoring init for performance

Lecture 13: Tick-Tock – send player data from the server to the clients and vice-versa

Lecture 14: Step 1 of drawing the players from the server

Lecture 15: Tock event – sending player direction from client to server

Lecture 16: Clamping the camera (and a little cleanup)

Lecture 17: Collision Testing (the Math part)

Lecture 18: Collision Testing (the code part)

Lecture 19: Leaderboard

Lecture 20: Disconnect

Chapter 6: Advanced Project – w/React, cluster module/adapter – a performance monitor

Lecture 1: Project Demo

Lecture 2: Socket.io scaling options

Lecture 3: Project Setup and dependencies

Lecture 4: Architecture

Lecture 5: Pulling performance data

Lecture 6: Figuring CPU load

Lecture 7: How the cluster module works

Lecture 8: Using the cluster module

Lecture 9: Connecting React to the socket.io server (for testing!)

Lecture 10: Connecting nodeClient to the socket server

Lecture 11: Fetch nodeClient macAddress

Lecture 12: Start the ticking clock

Lecture 13: Create React App Overview

Lecture 14: Basic React Component Architecture

Lecture 15: Connecting React to the socket server the correct way

Lecture 16: Connecting React to socket.io in a complex app

Lecture 17: Getting data to React, and setting up React components

Lecture 18: Sending state to our <Widget />

Lecture 19: A little UI busywork – moving/copying files, classNames

Lecture 20: CPU widget – canvas

Lecture 21: Memory widget

Lecture 22: Adding isAlive, disconnect, and final touches

Lecture 23: Handling a nasty React bug…

Chapter 7: Admin UI

Lecture 1: Admin UI on Agar Clone

Chapter 8: Supplemental Videos

Lecture 1: HTTP 101

Chapter 9: LEGACY – 2018, version 2. Socket.io 101

Lecture 1: Reminder for v2 students

Chapter 10: LEGACY – 2018, version 2. Socket.io 201 – Let's make it Slack!