Socket.Io (With Websockets) - The Details. (Socket Io V2)

Socket io. For those who want to learn how to harness real-time communication on the web. With Cluster, redis, & React

What you'll learn

Socketio. That's (mostly) all we cover so when you finish, you'll know it!

Setup a socketio application between the browser and an Express server and run real-time back and forth

Understand the basics of websockets and how they work

The basics of the transport layer and how a packet works

Requirements

You have a solid working knowledge of JavaScript and nodejs (Not a ninja, but you are not new).

You have used the node ecosystem (npm, Express, etc.). This is NOT an intro to node class and I will NOT cover these in detail.

You have basic command line knowledge (at least capable of navigating and running a program)

You have a computer capable of running Nodejs.

Description

Websockets are one of the coolest things to hit the web in ages. They allow the browser real-time communication bridging one of the last gaps in both human and web-based communication. Socket io is the king library that uses websockets under the hood. There's a good chance if you're reading this, you've heard about socket io. Maybe even done a tutorial on it. But how far did you get? In my experience, the vast majority of the material on the web goes no farther than a quick-start, instant chat app. You don't learn how anything works, never look at the docs, and are stuck at the end wondering what to do now. The remaining shred of material is waaaaay over everyone's head. The fact that the websocket API was standardized in 2011 and most developers still don't know how to use it is evidence of the gap.This course is meant to alleviate that! It is not a quick start guide to socket.IO. There are loads of those all over the Internet. You should definitely look elsewhere if you are wanting a 10 minute intro to the 3-4 things you need to know to make something quick. On the other hand, if you are looking to really learn one of the most awesome JavaScript libraries in socket io, you should stick around. Like Express and other JavaScript/Node pieces,  it's getting passed over in the wave to learn just enough to get to the term "full-stack developer." My main goal is to help you figure out how to go from being a good developer to a great developer. Understanding… not just knowing a few methods… of socketio is part of that! It even trancends the browser and node with implementations in most other languages, and even mobile. This means as you grow, you have the power of sockets without having to learn more than the socket io library.I first used socket.IO in 2013 for a tiny company directory app. I've been following since and have been frustrated that it hasn't gotten more mainstream notice because it opens the way for so many improvements to existing applications and obvious groundwork for new ones. Let's change that :) Prepare to for a detailed look at socketio and websockets and start going real-time.Sections:Environment Setup (skip if you have node installed already)Before Socket.IO… - TCP, network sockets, & a native websockets appSocketi.IO 101 - Why you'd want to use socketio and how it works (simple chat app)Socket.IO 201 - Making the chat app into a slack clone with namespaces and roomsProject 1 - real-time canvas gameProject 2 - Real-time performance data (uses React, Cluster, and Redis)streaming videos & socket.io-stream - in developmentSupplemental - HTTP (for those in need of a review)

Overview

Section 1: Introduction

Lecture 1 Course Overview

Lecture 2 All my code (github link)

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

Section 2: Websockets - Before Socketio…

Lecture 4 Pre-socketio

Lecture 5 Housekeeping - How I do node/express

Lecture 6 TCP/UDP and networking 101

Lecture 7 Networking 201 - What is a socket and why should I care?

Lecture 8 HTTP vs Websockets

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

Lecture 10 A short overview of native websockets continued

Section 3: Socket.io 101

Lecture 11 Intro

Lecture 12 The basics & socket.io vs. ws

Lecture 13 Why socket.io? This is why.

Lecture 14 Small Chat app - in socket.io!

Lecture 15 Docs - The server

Lecture 16 The big 3 - .emit, .on, .connect

Lecture 17 Docs - The Client

Lecture 18 Finishing the chat app

Lecture 19 Quick Checklist Review

Section 4: Socket.io 201 - Let's make it Slack!

Lecture 20 Namespace/Group Cheatsheet

Lecture 21 Rooms

Lecture 22 Namespaces

Lecture 23 Going Slack (project) - Overview & Steps

Lecture 24 Folder structure & DOM overview

Lecture 25 Setting up our data and classes

Lecture 26 Slack: Steps 1-3

Lecture 27 Slack - Steps 4-6

Lecture 28 Refactoring and Reorganizing our code

Lecture 29 Slack - Joining a Room- Steps 7-9

Lecture 30 Slack - Sending the history - Steps 7-9 continued

Lecture 31 Slack - Linking up NS and Group, & Final Touches

Lecture 32 Passing query data on connection

Lecture 33 Line by line review of the project

Lecture 34 Docs Checklist Update

Section 5: Multiplayer Canvas Game - Agar.io clone

Lecture 35 Project repo

Lecture 36 Project Intro

Lecture 37 Project Strategy

Lecture 38 Socket.io App Organization

Lecture 39 Getting the DOM setup

Lecture 40 Time to draw!

Lecture 41 Add Sockets (and orbs)

Lecture 42 Wiring up the server for collisions

Lecture 43 Connecting the client and server

Lecture 44 Tick-Tock - 30FPS

Lecture 45 Collision Testing (the Math part)

Lecture 46 Collision Testing (The Socket Part)

Lecture 47 Collision Testing (The Socket Part 2)

Lecture 48 Updating the LeaderBoard

Lecture 49 Disconnecting and broadcasting a message

Section 6: Advanced Project - Adding React, cluster & redis - a performance monitor

Lecture 50 Project Demo

Lecture 51 Project Setup and dependencies

Lecture 52 Installing Redis on Windows

Lecture 53 Architecture

Lecture 54 Getting performance data

Lecture 55 Getting performance data - part 2

Lecture 56 How the cluster module works

Lecture 57 Using the cluster module - Master

Lecture 58 Using the cluster module - workers

Lecture 59 Connecting nodeClient to the socket server

Lecture 60 Start the ticking clock

Lecture 61 Mongo/Mongoose Schema and a small fix

Lecture 62 Adding a record

Lecture 63 Create React App Overview

Lecture 64 Connecting React to the socket server for re-useable

Lecture 65 Basic React Component Architecture

Lecture 66 Setup React Components

Lecture 67 Setting our widget state

Lecture 68 CPU widget canvas

Lecture 69 Mem and Info widgets

Lecture 70 Adding isActive, disconnect, and final touches

Section 7: Supplemental Videos

Lecture 71 HTTP 101

Section 8: V4 - Socket.io 101

Lecture 72 Intro

Lecture 73 Why Socket.io? This is why.

Lecture 74 The basics of socket.io

Lecture 75 An important pitfall - connect/reconnect

Lecture 76 Small Chat app - in socket.io!

Lecture 77 Docs - new Server

Lecture 78 Docs - Server options

Lecture 79 The big 3 - .emit, .on, .connect

Lecture 80 Docs - The Client

Section 9: V4 - Section 2 - Let's Make It Slack (namespaces & rooms)

Lecture 81 Section Intro and folder setup

Lecture 82 A quick illustration

Lecture 83 Project Whiteboarding & Steps

Lecture 84 Setup slack with sanity checks

Lecture 85 Populate spaces and rooms from the server

Lecture 86 Rooms and Namespaces classes

Lecture 87 Add rooms to DOM

Lecture 88 UX Cleanup

Lecture 89 Docs - Namespaces

Lecture 90 Namespaces code review

Lecture 91 Docs - Rooms

JS/Node developers who want to actually learn how to use Socketio for more than a chat app tutorial,JS developers interested in how node & JS combine to make the networking happen,Developers interested in building real time applications