آموزش Socket.IO (با سوکت های وب) - جزئیات. (سوکت io v2)

سرفصل ها و درس ها

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

• همه کدهای من (لینک github) All my code (github link)

• سال 2023 است: وب‌سوکت‌های بومی یا socket.io... از چه چیزی استفاده کنیم؟ It's 2023: native websockets or socket.io... what should we use?

معرفی Introduction

• همه کدهای من (لینک github) All my code (github link)

• سال 2023 است: وب‌سوکت‌های بومی یا socket.io... از چه چیزی استفاده کنیم؟ It's 2023: native websockets or socket.io... what should we use?

Websockets - قبل از Socketio... Websockets - Before Socketio...

• پیش سوکتیو Pre-socketio

• پیش سوکتیو Pre-socketio

• خانه داری - چگونه من گره/بیان Housekeeping - How I do node/express

• خانه داری - چگونه من گره/بیان Housekeeping - How I do node/express

• TCP/UDP و شبکه 101 TCP/UDP and networking 101

• Networking 201 - سوکت چیست و چرا باید اهمیت بدهم؟ Networking 201 - What is a socket and why should I care?

• Networking 201 - سوکت چیست و چرا باید اهمیت بدهم؟ Networking 201 - What is a socket and why should I care?

• HTTP در مقابل سوکت های وب HTTP vs Websockets

• مروری کوتاه بر سوکت‌های وب بومی (در نهایت چند کد!!) A short overview of native websockets (finally some code!!)

• مروری کوتاه بر سوکت‌های وب بومی (در نهایت چند کد!!) A short overview of native websockets (finally some code!!)

• مروری کوتاه بر وب‌سوکت‌های بومی ادامه یافت A short overview of native websockets continued

Websockets - قبل از Socketio... Websockets - Before Socketio...

• TCP/UDP و شبکه 101 TCP/UDP and networking 101

• HTTP در مقابل سوکت های وب HTTP vs Websockets

• مروری کوتاه بر وب‌سوکت‌های بومی ادامه یافت A short overview of native websockets continued

Socket.io 101 Socket.io 101

• مقدمه Intro

• یادآوری برای دانش آموزان v2 Reminder for v2 students

• اصول و socket.io در مقابل ws The basics & socket.io vs. ws

• اصول و socket.io در مقابل ws The basics & socket.io vs. ws

• چرا socket.io؟ به این دلیل. Why socket.io? This is why.

• چرا socket.io؟ به این دلیل. Why socket.io? This is why.

• برنامه چت کوچک - در socket.io! Small Chat app - in socket.io!

• Docs - سرور Docs - The server

• Docs - سرور Docs - The server

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• اسناد - مشتری Docs - The Client

• در حال اتمام برنامه چت Finishing the chat app

• در حال اتمام برنامه چت Finishing the chat app

• بررسی سریع چک لیست Quick Checklist Review

Socket.io 101 Socket.io 101

• یادآوری برای دانش آموزان v2 Reminder for v2 students

• برنامه چت کوچک - در socket.io! Small Chat app - in socket.io!

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• اسناد - مشتری Docs - The Client

• بررسی سریع چک لیست Quick Checklist Review

Socket.io 201 - بیایید آن را Slack کنیم! Socket.io 201 - Let's make it Slack!

• فضای نام/برگه تقلب گروهی Namespace/Group Cheatsheet

• فضای نام/برگه تقلب گروهی Namespace/Group Cheatsheet

• اتاق ها Rooms

• اتاق ها Rooms

• فضاهای نام Namespaces

• فضاهای نام Namespaces

• Slack رفتن (پروژه) - نمای کلی و مراحل Going Slack (project) - Overview & Steps

• ساختار پوشه و نمای کلی DOM Folder structure & DOM overview

• تنظیم داده ها و کلاس های ما Setting up our data and classes

• تنظیم داده ها و کلاس های ما Setting up our data and classes

• Slack: مراحل 1-3 Slack: Steps 1-3

• Slack: مراحل 1-3 Slack: Steps 1-3

• Slack - مراحل 4-6 Slack - Steps 4-6

• Refactoring و سازماندهی مجدد کد ما Refactoring and Reorganizing our code

• Refactoring و سازماندهی مجدد کد ما Refactoring and Reorganizing our code

• Slack - Joining a Room- Steps 7-9 Slack - Joining a Room- Steps 7-9

• Slack - ارسال تاریخچه - مراحل 7-9 ادامه یافت Slack - Sending the history - Steps 7-9 continued

• Slack - پیوند دادن NS و Group و Final Touchs Slack - Linking up NS and Group, & Final Touches

• ارسال داده های پرس و جو در اتصال Passing query data on connection

• بررسی خط به خط پروژه Line by line review of the project

• بررسی خط به خط پروژه Line by line review of the project

• به روز رسانی چک لیست اسناد Docs Checklist Update

Socket.io 201 - بیایید آن را Slack کنیم! Socket.io 201 - Let's make it Slack!

• Slack رفتن (پروژه) - نمای کلی و مراحل Going Slack (project) - Overview & Steps

• ساختار پوشه و نمای کلی DOM Folder structure & DOM overview

• Slack - مراحل 4-6 Slack - Steps 4-6

• Slack - Joining a Room- Steps 7-9 Slack - Joining a Room- Steps 7-9

• Slack - ارسال تاریخچه - مراحل 7-9 ادامه یافت Slack - Sending the history - Steps 7-9 continued

• Slack - پیوند دادن NS و Group و Final Touchs Slack - Linking up NS and Group, & Final Touches

• ارسال داده های پرس و جو در اتصال Passing query data on connection

• به روز رسانی چک لیست اسناد Docs Checklist Update

بازی Canvas Multiplayer - کلون Agar.io Multiplayer Canvas Game - Agar.io clone

• مخزن پروژه Project repo

• معرفی پروژه Project Intro

• استراتژی پروژه Project Strategy

• سازمان برنامه Socket.io Socket.io App Organization

• سازمان برنامه Socket.io Socket.io App Organization

• دریافت راه اندازی DOM Getting the DOM setup

• دریافت راه اندازی DOM Getting the DOM setup

• زمان ترسیم! Time to draw!

• سوکت ها (و گوی ها) را اضافه کنید Add Sockets (and orbs)

• سیم کشی سرور برای برخورد Wiring up the server for collisions

• اتصال مشتری و سرور Connecting the client and server

• تیک تاک - 30 فریم در ثانیه Tick-Tock - 30FPS

• تست برخورد (بخش ریاضی) Collision Testing (the Math part)

• تست برخورد (قسمت سوکت) Collision Testing (The Socket Part)

• تست برخورد (سوکت قسمت 2) Collision Testing (The Socket Part 2)

• تست برخورد (سوکت قسمت 2) Collision Testing (The Socket Part 2)

• به روز رسانی LeaderBoard Updating the LeaderBoard

• قطع و پخش پیام Disconnecting and broadcasting a message

بازی Canvas Multiplayer - کلون Agar.io Multiplayer Canvas Game - Agar.io clone

• مخزن پروژه Project repo

• معرفی پروژه Project Intro

• استراتژی پروژه Project Strategy

• زمان ترسیم! Time to draw!

• سوکت ها (و گوی ها) را اضافه کنید Add Sockets (and orbs)

• سیم کشی سرور برای برخورد Wiring up the server for collisions

• اتصال مشتری و سرور Connecting the client and server

• تیک تاک - 30 فریم در ثانیه Tick-Tock - 30FPS

• تست برخورد (بخش ریاضی) Collision Testing (the Math part)

• تست برخورد (قسمت سوکت) Collision Testing (The Socket Part)

• به روز رسانی LeaderBoard Updating the LeaderBoard

• قطع و پخش پیام Disconnecting and broadcasting a message

پروژه پیشرفته - افزودن React، Cluster و redis - یک نمایشگر عملکرد Advanced Project - Adding React, cluster & redis - a performance monitor

• نسخه ی نمایشی پروژه Project Demo

• راه اندازی پروژه و وابستگی ها Project Setup and dependencies

• نصب Redis در ویندوز Installing Redis on Windows

• نصب Redis در ویندوز Installing Redis on Windows

• معماری Architecture

• دریافت داده های عملکرد Getting performance data

• دریافت داده های عملکرد Getting performance data

• دریافت داده های عملکرد - قسمت 2 Getting performance data - part 2

• دریافت داده های عملکرد - قسمت 2 Getting performance data - part 2

• نحوه کار ماژول کلاستر How the cluster module works

• با استفاده از ماژول خوشه - Master Using the cluster module - Master

• با استفاده از ماژول خوشه - کارگران Using the cluster module - workers

• اتصال nodeClient به سرور سوکت Connecting nodeClient to the socket server

• تیک تاک ساعت را شروع کنید Start the ticking clock

• طرحواره Mongo/Mangoose و یک اصلاح کوچک Mongo/Mongoose Schema and a small fix

• افزودن رکورد Adding a record

• افزودن رکورد Adding a record

• نمای کلی برنامه React ایجاد کنید Create React App Overview

• اتصال React به سرور سوکت برای استفاده مجدد Connecting React to the socket server for re-useable

• اتصال React به سرور سوکت برای استفاده مجدد Connecting React to the socket server for re-useable

• معماری کامپوننت اولیه React Basic React Component Architecture

• معماری کامپوننت اولیه React Basic React Component Architecture

• راه اندازی React Components Setup React Components

• راه اندازی React Components Setup React Components

• تنظیم وضعیت ویجت ما Setting our widget state

• بوم ویجت CPU CPU widget canvas

• ابزارک Mem و Info Mem and Info widgets

• ابزارک Mem و Info Mem and Info widgets

• افزودن isActive، قطع اتصال و آخرین لمس Adding isActive, disconnect, and final touches

پروژه پیشرفته - افزودن React، Cluster و redis - یک نمایشگر عملکرد Advanced Project - Adding React, cluster & redis - a performance monitor

• نسخه ی نمایشی پروژه Project Demo

• راه اندازی پروژه و وابستگی ها Project Setup and dependencies

• معماری Architecture

• نحوه کار ماژول کلاستر How the cluster module works

• با استفاده از ماژول خوشه - Master Using the cluster module - Master

• با استفاده از ماژول خوشه - کارگران Using the cluster module - workers

• اتصال nodeClient به سرور سوکت Connecting nodeClient to the socket server

• تیک تاک ساعت را شروع کنید Start the ticking clock

• طرحواره Mongo/Mangoose و یک اصلاح کوچک Mongo/Mongoose Schema and a small fix

• نمای کلی برنامه React ایجاد کنید Create React App Overview

• تنظیم وضعیت ویجت ما Setting our widget state

• بوم ویجت CPU CPU widget canvas

• افزودن isActive، قطع اتصال و آخرین لمس Adding isActive, disconnect, and final touches

ویدیوهای تکمیلی Supplemental Videos

• HTTP 101 HTTP 101

• HTTP 101 HTTP 101

ویدیوهای تکمیلی Supplemental Videos

V4 - Socket.io 101 V4 - Socket.io 101

• اطلاعیه بخش SECTION NOTICE

• مقدمه Intro

• مقدمه Intro

• چرا Socket.io؟ به این دلیل. Why Socket.io? This is why.

• اصول اولیه socket.io The basics of socket.io

• اصول اولیه socket.io The basics of socket.io

• یک دام مهم - اتصال/وصل مجدد An important pitfall - connect/reconnect

• یک دام مهم - اتصال/وصل مجدد An important pitfall - connect/reconnect

• برنامه چت کوچک - در socket.io! Small Chat app - in socket.io!

• برنامه چت کوچک - در socket.io! Small Chat app - in socket.io!

• اسناد - سرور جدید Docs - new Server

• اسناد - سرور جدید Docs - new Server

• اسناد - گزینه های سرور Docs - Server options

• اسناد - گزینه های سرور Docs - Server options

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• اسناد - مشتری Docs - The Client

V4 - Socket.io 101 V4 - Socket.io 101

• مقدمه Intro

• چرا Socket.io؟ به این دلیل. Why Socket.io? This is why.

• 3 بزرگ - .emit، .on، .connect The big 3 - .emit, .on, .connect

• اسناد - مشتری Docs - The Client

V4 - بخش 2 - Let's Make It Slack (فضاهای نام و اتاق) V4 - Section 2 - Let's Make It Slack (namespaces & rooms)

• اطلاعیه بخش SECTION NOTICE

• اطلاعیه بخش SECTION NOTICE

• بخش معرفی و تنظیم پوشه Section Intro and folder setup

• بخش معرفی و تنظیم پوشه Section Intro and folder setup

• یک تصویر سریع A quick illustration

• برگه چیت فضاهای نام و اتاق ها Namespaces & Rooms cheatsheet

• برگه چیت فضاهای نام و اتاق ها Namespaces & Rooms cheatsheet

• وایت برد و مراحل پروژه Project Whiteboarding & Steps

• وایت برد و مراحل پروژه Project Whiteboarding & Steps

• راه اندازی شل با چک های سلامت عقل Setup slack with sanity checks

• راه اندازی شل با چک های سلامت عقل Setup slack with sanity checks

• مراحل 1-3 - فضاها و اتاق ها را از سرور پر کنید Steps 1-3 - Populate spaces and rooms from the server

• کلاس های اتاق ها و فضاهای نام Rooms and Namespaces classes

• اتاق ها را به DOM اضافه کنید Add rooms to DOM

• اتاق ها را به DOM اضافه کنید Add rooms to DOM

• پاکسازی UX UX Cleanup

• اسناد - فضاهای نام Docs - Namespaces

• بررسی کد فضاهای نام Namespaces code review

• Docs - Rooms Docs - Rooms

• مرحله 4-6 Step 4-6

• تخته سفید - تفکر عملکردی Websockets Whiteboarding - performance thinking Websockets

• پیاده سازی مسیر nsChange و Express --> io.emit Implementing nsChange and Express route --> io.emit

• اجرای nsChange ادامه دارد... Implementing nsChange continued...

• اجرای nsChange ادامه دارد... Implementing nsChange continued...

• Slack - Joining a Room- Steps 7-9 Slack - Joining a Room- Steps 7-9

• Slack - Joining a Room- Steps 7-9 Slack - Joining a Room- Steps 7-9

• Acknowledgment Functions، fetchSockets() - مراحل 7-9 ادامه یافت Acknowledgement Functions, fetchSockets() - steps 7-9 continued

• Acknowledgment Functions، fetchSockets() - مراحل 7-9 ادامه یافت Acknowledgement Functions, fetchSockets() - steps 7-9 continued

• emitWithAck، init join room emitWithAck, init join room

V4 - بخش 2 - Let's Make It Slack (فضاهای نام و اتاق) V4 - Section 2 - Let's Make It Slack (namespaces & rooms)

• اطلاعیه بخش SECTION NOTICE

• یک تصویر سریع A quick illustration

• مراحل 1-3 - فضاها و اتاق ها را از سرور پر کنید Steps 1-3 - Populate spaces and rooms from the server

• کلاس های اتاق ها و فضاهای نام Rooms and Namespaces classes

• پاکسازی UX UX Cleanup

• اسناد - فضاهای نام Docs - Namespaces

• بررسی کد فضاهای نام Namespaces code review

• Docs - Rooms Docs - Rooms

• مرحله 4-6 Step 4-6

• تخته سفید - تفکر عملکردی Websockets Whiteboarding - performance thinking Websockets

• پیاده سازی مسیر nsChange و Express --> io.emit Implementing nsChange and Express route --> io.emit

• emitWithAck، init join room emitWithAck, init join room