Mô tả

May 2023: Version 4 update is complete. I have left the v2 sections up for a sunset period. This means, at the moment, roughly half the course is the same content in different versions. Please take note of the section title if you are just starting out to make sure you are taking the version you want.

Websockets are one of the coolest api's to ever hit the web. 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 socketio. 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. Is that all socketio can do? 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 transcends the browser and node with implementations in most other languages, and even mobile/React Native. This means as you grow, you have the power of sockets without having to learn more than the socket io library.

I first used socketIO 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:

  1. Introduction - course overview, github link, and the state of socketio and websockets

  2. Before SocketIO... - TCP, network sockets, & a native websockets app

  3. Socket.IO-101 - Why you'd want to use socketio (instead of just websockets), and how it works (simple chat app)

  4. Socket.IO-201 - Making the chat app into a slack clone with namespaces and rooms

  5. Project - real-time canvas game (agar.io-clone)

  6. Project - Real-time performance data (uses React, Cluster, and the Cluster Module. Rotated Redis out until the new module is stable)

  7. Supplemental - HTTP (for those in need of a review)

  8. LEGACY - version 2 - Socket.IO-101

  9. LEGACY - version 2 - Socket.IO-201

  10. LEGACY - multi-player canvas game

  11. LEGACY - Advanced Project

I hope to add sections for a streaming videos/socket.io-stream app, as well as a React Native app.


Bạn sẽ học được gì

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

Yêu cầu

  • 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.

Nội dung khoá học

12 sections

Introduction

4 lectures
Welcome Video
02:14
Course Overview
05:17
All my code (github link)
00:08
It's 2023: native websockets or socket.io... what should we use?
10:44

Websockets - Before Socketio...

7 lectures
Pre-socketio
06:25
Housekeeping - How I do node/express
05:17
TCP/UDP and networking 101
18:07
Networking 201 - What is a socket and why should I care?
15:36
HTTP vs Websockets
03:54
A short overview of native websockets (finally some code!!)
13:47
A short overview of native websockets continued
15:04

Socket.io 101

10 lectures
SECTION NOTICE
00:04
Intro
01:41
Why Socket.io? This is why.
08:09
The basics of socket.io
15:06
An important pitfall - connect/reconnect
07:42
Small Chat app - in socket.io!
16:59
Docs - new Server
10:03
Docs - Server options
09:11
The big 3 - .emit, .on, .connect
09:34
Docs - The Client
07:43

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

23 lectures
SECTION NOTICE
00:04
Section Intro and folder setup
04:14
A quick illustration
04:14
Namespaces & Rooms cheatsheet
00:23
Project Whiteboarding & Steps
11:06
Setup slack with sanity checks
07:57
Steps 1-3 - Populate spaces and rooms from the server
09:57
Rooms and Namespaces classes
10:48
Add rooms to DOM
08:33
UX Cleanup
06:37
Docs - Namespaces
11:42
Namespaces code review
06:15
Docs - Rooms
11:37
Step 4-6
09:22
Whiteboarding - performance thinking Websockets
05:35
Implementing nsChange and Express route --> io.emit
13:17
Implementing nsChange continued...
10:11
Slack - Joining a Room- Steps 7-9
12:18
Acknowledgement Functions, fetchSockets() - steps 7-9 continued
15:16
emitWithAck, init join room
04:47
emit messages to room - steps 7-9 continued
14:19
Slack - Sending the history - Steps 7-9 continued
19:43
Passing query data on connection - basic auth intro
08:09

Multiplayer Canvas Game - Agar.io clone

20 lectures
SECTION NOTICE
00:04
Project Demo & setting expectations
12:47
Project Strategy - performance matters!
10:31
Socket.io App Organization
16:05
Getting the DOM setup
14:13
A few UI Loose ends
07:12
Draw the player
13:22
The ugly math of moving the right direction
19:56
Get, and draw, the game orbs (non-players)
16:40
Whiteboarding Player classes - What does the server NEED to send?
07:29
The Player Classes
14:13
Refactoring init for performance
12:58
Tick-Tock - send player data from the server to the clients and vice-versa
08:45
Step 1 of drawing the players from the server
05:48
Tock event - sending player direction from client to server
08:15
Clamping the camera (and a little cleanup)
17:50
Collision Testing (the Math part)
08:47
Collision Testing (the code part)
14:18
Leaderboard
13:12
Disconnect
06:02

Advanced Project - w/React, cluster module/adapter - a performance monitor

23 lectures
Project Demo
03:52
Socket.io scaling options
07:56
Project Setup and dependencies
06:57
Architecture
09:19
Pulling performance data
11:23
Figuring CPU load
20:01
How the cluster module works
10:17
Using the cluster module
08:28
Connecting React to the socket.io server (for testing!)
06:02
Connecting nodeClient to the socket server
05:10
Fetch nodeClient macAddress
08:11
Start the ticking clock
09:21
Create React App Overview
03:25
Basic React Component Architecture
04:42
Connecting React to the socket server the correct way
08:10
Connecting React to socket.io in a complex app
00:07
Getting data to React, and setting up React components
10:22
Sending state to our <Widget />
06:23
A little UI busywork - moving/copying files, classNames
06:55
CPU widget - canvas
07:51
Memory widget
06:35
Adding isAlive, disconnect, and final touches
13:00
Handling a nasty React bug...
13:12

Admin UI

1 lectures
Admin UI on Agar Clone
12:45

Supplemental Videos

1 lectures
HTTP 101
14:12

LEGACY - 2018, version 2. Socket.io 101

1 lectures
Reminder for v2 students
00:17

LEGACY - 2018, version 2. Socket.io 201 - Let's make it Slack!

15 lectures
Namespace/Group Cheatsheet
00:18
Namespaces
23:28
Rooms
21:34
Going Slack (project) - Overview & Steps
15:52
Folder structure & DOM overview
08:18
Setting up our data and classes
10:56
Slack: Steps 1-3
19:47
Slack - Steps 4-6
12:48
Refactoring and Reorganizing our code
06:02
Slack - Joining a Room- Steps 7-9
23:27
Slack - Sending the history - Steps 7-9 continued
18:29
Slack - Linking up NS and Group, & Final Touches
19:24
Passing query data on connection
06:33
Line by line review of the project
21:22
Docs Checklist Update
06:32

LEGACY - 2018, version 2. Multiplayer Canvas Game - Agar.io clone

15 lectures
Project repo
00:02
Project Intro
12:47
Project Strategy
10:30
Socket.io App Organization
17:11
Getting the DOM setup
15:45
Time to draw!
30:19
Add Sockets (and orbs)
14:35
Wiring up the server for collisions
21:31
Connecting the client and server
07:56
Tick-Tock - 30FPS
22:06
Collision Testing (the Math part)
10:59
Collision Testing (The Socket Part)
13:54
Collision Testing (The Socket Part 2)
10:55
Updating the LeaderBoard
10:17
Disconnecting and broadcasting a message
15:41

LEGACY -Advanced Project - Adding React, cluster & redis - a performance monitor

21 lectures
Project Demo
04:05
Project Setup and dependencies
05:21
Installing Redis on Windows
03:46
Architecture
18:10
Getting performance data
10:25
Getting performance data - part 2
15:30
How the cluster module works
12:45
Using the cluster module - Master
08:15
Using the cluster module - workers
10:12
Connecting nodeClient to the socket server
06:10
Start the ticking clock
12:12
Mongo/Mongoose Schema and a small fix
15:48
Adding a record
07:47
Create React App Overview
03:37
Connecting React to the socket server for re-useable
07:37
Basic React Component Architecture
04:49
Setup React Components
05:48
Setting our widget state
16:30
CPU widget canvas
08:30
Mem and Info widgets
11:46
Adding isActive, disconnect, and final touches
23:06

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.