8014

آموزش ایجاد برنامه ی چت با Blazor Auto و SignalR

کدسل برنامه نویسی وب Blazor

لینک کوتاه https://codecell.ir/course/8014
3٬250٬000تومان
مدرس: سهراب قیصری
تعداد ویدیوها: 29
مدت زمان دوره: 14:25:18
وضعیت دوره: به اتمام رسیده
آخرین بروزرسانی: 1403/03/07
به اشتراک گذاری
نظرات
1
دیگر آموزش های مدرس:
اپلیکیشن چت با Blazor Auto و SignalR

Blazor چیست؟

Blazor یک فریمورک full-stack web UI است که به شما امکان می دهد برنامه های کاربردی مدرن با استفاده از C#، HTML، CSS و Razor بسازید. با انتشار .NET 8، Blazor Web App اکنون در دسترس است که به شما امکان می دهد برنامه هایی را توسعه دهید که محتوا را در حالت های رندر سمت سرور، رندر سمت کلاینت، رندر خودکار یا حتی استاتیک ارائه می کنند.

Auto Render یا رندر خودکار Blazor در NET 8

فریمورک Blazor از ابتدای پیدایش با پیشرفت های مستمر مشخص شده است و آن را به یک انتخاب قانع کننده برای توسعه دهندگان تبدیل کرده است. ظهور دات نت 8 یک ویژگی قابل توجه را به ارمغان می آورد - حالت رندر خودکار، که فاصله بین Blazor Server و Blazor WebAssembly را پر می کند. این حالت یک تغییر دهنده بازی است زیرا هر دو حالت را ارائه می دهد: سرعت Blazor Server برای رندر اولیه و قابلیت های Blazor WebAssembly در سمت کلاینت برای تعاملات بعدی. با جابجایی هوشمندانه بین رندر سرور و کلاینت بر اساس موقعیت، حالت رندر خودکار تجربه کاربر را با کاهش زمان بارگذاری و بهبود عملکرد تعاملی افزایش می‌دهد و Blazor را به چارچوبی جذاب برای توسعه وب مدرن تبدیل می‌کند.

درک Render Mode ها در  Blazor

در Blazor، رندر می تواند در سمت کلاینت (مرورگر کاربر) یا سمت سرور (وب سرور) اتفاق بیفتد. رندر سمت کلاینت(Blazor WebAssembly)مستلزم اجرای برنامه به طور مستقیم در مرورگر کاربر است، در حالی که رندر سمت سرور (Blazor Server) برنامه را روی سرور پردازش می کند و به روز رسانی های UI را از طریق یک اتصال SignalR ارسال می کند.

حالت‌های رندر بسیار مهم هستند زیرا مستقیماً بر عملکرد، مقیاس‌پذیری و تجربه کلی کاربر تأثیر می‌گذارند. به عنوان مثال، رندر سمت سرور معمولاً منجر به زمان بارگذاری سریع‌تر می‌شود، اما ممکن است در طول تعاملات کاربر دچار تأخیر شود.

هر حالت رندر مزایا و معایب منحصر به فردی را ارائه می دهد:

Blazor Server :

مزایا: بارگذاری اولیه سریعتر، پردازش سمت سرور.

معایب: تأخیر در تعاملات کاربر، چالش های مقیاس پذیری با افزایش کاربران.

Blazor WebAssembly:

مزایا: پردازش سمت کلاینت، بدون وابستگی سرور.

معایب: بارگذاری اولیه کندتر به دلیل دانلود برنامه و .NET runtime.

Auto Render Mode:

مزایا: بارگذاری اولیه سریعتر را با تعاملات سمت کلاینت ترکیب می کند.

معایب: پیچیدگی در راه اندازی، بازگشت احتمالی به رندر سرور در صورت ناکافی بودن منابع کلاینت.

انتخاب حالت رندر استراتژیک است زیرا با اهداف برنامه در مورد عملکرد، سرعت تعامل با کاربر و بار سرور مطابقت دارد و تجربه کاربری بهینه و پاسخگو را تضمین می کند.

حالت رندر خودکار یا Auto RenderMode چیست؟

حالت رندر خودکار در Blazor ترکیبی از Blazor Server و Blazor WebAssembly است که مزایای بارگذاری اولیه سریع و عملیات تعاملی سمت کلاینت را در هم می آمیزد. این حالت خاص دات نت 8 است که به محدودیت های فردی Blazor Server و Blazor WebAssembly می پردازد.

SignalR چیست؟

SignalR  یک کتابخانه برای توسعه دهندگان .NET است که فرآیند افزودن قابلیت real-time به برنامه ها را ساده می کند. قابلیت real-time توانایی ارسال محتوای سرور به کلاینت های متصل در زمان واقعی است.

SignalRمی تواند برای افزودن هر نوع قابلیت real-time به برنامه های.NETاستفاده شود. در حالی که اپ های چت اغلب به عنوان مثال استفاده می شود، شما می توانید کارهای بسیار بیشتری انجام دهید. هر زمانی که یک کاربر صفحه وب را برای دیدن داده های جدید رفرش می کند، یا صفحه نظرسنجی طولانی برای بازیابی داده های جدید اجرا می کند، کاندیدای استفاده از SignalR است. به عنوان مثال می توان به داشبورد و برنامه های نظارتی، برنامه های کاربردی مشترک (مانند ویرایش همزمان اسناد)، به روز رسانی پیشرفت کار و فرم های بلادرنگ اشاره کرد.

SignalRهمچنین انواع کاملاً جدیدی از برنامه های کاربردی وب را فعال می کند که به بروز رسانی با فرکانس بالا از سرور نیاز دارند، به عنوان مثال، بازی های real-time.

SignalR یک API ساده برای ایجاد فراخوانی RPC ارائه می‌کند که توابع جاوا اسکریپت را در مرورگرهای کلاینت (و دیگر پلتفرم‌های کلاینت) از کد NET سمت سرور فراخوانی می‌کند. SignalR همچنین شامل API برای مدیریت اتصال (به عنوان مثال رخدادهای اتصال و قطع اتصال) و گروه بندی اتصالات است.

SignalR مدیریت اتصال را به طور خودکار مدیریت می کند و به شما امکان می دهد پیام ها را به طور همزمان برای همه کلاینت های متصل پخش کنید، مانند یک اتاق گفتگو. همچنین می توانید برای کلاینت های خاصی پیام ارسال کنید. ارتباط بین سرویس گیرنده و سرور، بر خلاف اتصال HTTP کلاسیک که برای هر ارتباط دوباره برقرار می شود، پایدار است.

سرفصل دوره ایجاد اپلیکیشن چت با Blazor Auto و SignalR

ما در این دوره آموزشی با استفاده از فریمورک Blazor در دات نت 8 و SignalR به پیاده سازی یک اپلیکیشن چت خواهیم پرداخت.
همچنین در این دوره آموزشی از رندر خودکار یا Blazor Auto Render Mode استفاده خواهیم کرد. از امکانات این اپ می توان به احرازهویت، چت خصوصی، ایجاد گروه و چت گروهی، ارسال فایل در چت، دریافت delivery پیام های ارسال شده، وضعیت آنلاین یا آفلاین بودن کاربران به صورت real-time و ... اشاره کرد.

پیش نیازها :

برای این دوره آشنایی با فریمورک Blazor، SignalR و Web API الزامی می باشد.

برای یادگیری Blazor می توانید دوره های آموزش مقدماتی تا پیشرفته Blazor WebAssembly و آموزش پروژه محور Blazor: Full stack Web UI را دنبال نمایید.

برای آشنایی با SignalR می توانید دوره آموزش SignalR در Asp.Net Core را دنبال نمایید.

برای آشنایی و یادگیری Web API می توانید دوره های آموزش جامع  Web API و آموزش Minimal API را دنبال نمایید.

ما همچنین در این دوره از معماری Vertical Slice استفاده خواهیم کرد. برای آشنایی با این معماری می توانید دوره معماری Vertical Slice در Asp.net Core را دنبال نمایید.

در این پروژه برای ارسال فایل در چت های خصوصی و گروهی از هر دو روش HttpClient و gRPC را پیاده سازی خواهیم کرد. برای آشنایی با gRPC می توانید آموزش gRPC در Asp.net Core را دنبال نمایید.

تکنولوژی ها و فریمورک ها

ما در این دوره از جدیدترین و بروزترین تکنولوژی ها و فریمورک های روز دنیا استفاده خواهیم کرد.

از مهمترین آن ها می توان به موارد زیر اشاره کرد:

  • Blazor Web App- Auto Render Mode
  • SignalR
  • Vertical Slice Architecture
  • CQRS Pattern With MediatR
  • Result Pattern
  • Minimal API
  • Identity
    EF Core
  • Carter
  • MudBlazor
  • gRPC
  • Streaming
فهرست ویدیوها
مدت زمان دوره: 14:25:18
01

ایجاد پروژه، نصب پکیج های مورد نیاز و کانفیگ کردن آن ها

00:24:35
02

افزودن Identity و کاستوم کردن آن

00:21:26
03

ایجا صفحه ثبت نام کاربران

00:37:45
04

ایجاد صفحه ورود کاربران

00:31:41
05

ایجاد Custom AuthenticateState برای حالت Webassembly

00:30:46
06

ایجاد Layout و ساختار صفحه چت با MudBlazor

00:37:45
07

نمایش لیست مخاطبین

00:44:19
08

ایجاد هاب چت، اتصال Blazor به آن و نمایش وضعیت کاربران به صورت realtime

00:36:14
09

ایجاد کامپوننت PrivateChat یا چت خصوصی

00:57:33
10

پیاده سازی کش و ارسال پیام با Signalr در چت خصوصی

00:24:00
11

ذخیره چت ها در دیتابیس

00:30:45
12

پیاده سازی Delivery پیام ها

00:24:03
13

نمایش پیام های ذخیره شده و دلیور کردن آن ها

00:21:10
14

پیاده سازی کامپوننت پیام های اخیر و خوانده نشده

00:44:55
15

ارسال فایل از طریق API Call

00:54:26
16

حذف فایل با CancellationToken و اسکرول خودکار در صفحه چت از طریق جاوا اسکریپت

00:22:47
17

ایجاد و راه اندازی سرور gRPC برای ارسال فایل در چت

00:24:40
18

ارسال فایل از طریق gRPC

00:21:46
19

ارسال فایل از طریق SignalR Streaming

00:24:18
20

دانلود فایل در چت

00:36:53
21

چت گروهی - ایجاد مدل ها، سرویس ها و فیچر های مورد نیاز

00:32:13
22

ایجاد گروه های چت

00:41:24
23

ایجاد کامپوننت چت گروهی

00:24:26
24

ارسال پیام در گروه

00:20:39
25

ارسال فایل در گروه

00:18:27
26

دانلود فایل در گروه

00:08:45
27

نمایش اطلاعات گروه

00:24:39
28

لغو عضویت کاربر از گروه

00:24:10
29

عضو کردن کاربران در گروه

00:18:48

مقالات آموزش برنامه نویسی مدرس

Response Caching در ASP.NET Core

Response Caching یک مکانیزم ذخیره سازی پاسخ سرور توسط مرورگر یا سایر کلاینت ها است. با استفاده از Response Caching در Asp.net Core می توانیم عملکرد و کارایی سیستم را بالا ببریم.

654 0 1402/10/22

Output Caching در ASP.NET Core 8.0

Output Caching یک ویژگی جدید است که از زمان .NET 7 معرفی شده است. این ویژگی به ما این امکان را می دهد که به راحتی یک کش پاسخ برای Web API خود بدون پیاده سازی IMemoryCache راه اندازی کنیم.

712 0 1402/10/14

الگوی طراحی زنجیره مسئولیت در سی شارپ

الگوی زنجیره مسئولیت یا Chain of Responsibility Design Pattern یک الگوی طراحی رفتاری(behavioral design pattern) است که اجازه می‌دهد یک درخواست در امتداد زنجیره‌ای از کنترل‌کننده‌های بالقوه ارسال شود تا زمانی که درخواست مناسب برای پردازش آن را پیدا کند.

669 2 1402/10/01

ViewComponent در ASP.NET Core

در ASP.NET Core با استفاده از ViewComponent ها می توان اجزای ماژولار، قابل استفاده مجدد، قابل نگهداری و مقیاس پذیر برای ساخت برنامه های کاربردی وب ایجاد کرد. در این مقاله به نحوه ایجاد و فراخوانی ViewComponent در Asp.net core پرداخته ایم.

1٬401 2 1402/05/15

تطبیق الگو در NET 7: ساده سازی تجزیه و تحلیل داده ها

تطبیق الگو یا Pattern Matching در net7 یک تکنیک قدرتمند برای تجزیه و تحلیل و دستکاری داده ها بر اساس ساختار آن ها است. تطبیق الگو یا Pattern Matching به توسعه دهندگان اجازه می دهد تا مقادیر را با یک الگوی خاص مطابقت دهند و اقدامات مربوطه را انجام دهند.

854 1 1402/04/05

تزریق وابستگی در ASP.NET Core

تزریق وابستگی (DI) یک الگوی طراحی نرم افزاری است که امکان ایجاد برنامه های کاربردی و ماژولار را فراهم می کند.. در .NET Core تزریق وابستگی یا Dependency injection یک ویژگی مهم است که می تواند برای ساده سازی توسعه برنامه، بهبود تست پذیری و کاهش پیچیدگی کد مورد استفاده قرار گیرد.

1٬923 1 1402/02/04

ضروری ترین کتابخانه های NuGet برای ASP.NET Core

در این مقاله مهمترین،ضروری ترین و پرکاربردترین کتابخانه های NuGet که هر توسعه‌ دهنده‌ ASP.NET Core باید برای توسعه بهتر و کاهش زمان مورد نیاز برای برنامه ‌های خود از آن استفاده کنند را مورد بررسی قرار داده ایم.

1٬504 1 1401/12/29

الگوی طراحی Factory در سی شارپ

الگوهای طراحی یکی از مهمترین جنبه های طراحی و معماری نرم افزار است. Factory Method یک الگوی طراحی ایجادی است که یک رابط برای ایجاد اشیاء در یک سوپر کلاس فراهم می‌کند. ما در این مقاله الگوی Factory Method Design در سی شارپ را بررسی می کنیم.

1٬609 1 1401/10/28

مقایسه List و Array در سی شارپ

آرایه و لیست در سی شارپ هر دو به عنوان مجموعه ای از مقادیر عمل می کنند، اما در نحوه ذخیره محتوای خود در حافظه و نحوه دسترسی به آنها متفاوت هستند. در این مقاله Benchmark و کارایی List<T> با سایز داینامیک، List<T> با سایز ثابت و Array ها را بررسی می کنیم.

2٬187 2 1401/09/01

LinkedList در سی شارپ

LinkedList یا لیست پیوندی در سی شارپ یک ساختار داده خطی است که عنصر را در مکان غیر پیوسته ذخیره می کند. LinkedList شامل گره هایی است که هر گره حاوی یک فیلد داده و یک مرجع (پیوند) به گره بعدی در لیست است. در سی شارپ، LinkedList یا لیست پیوندی یک نوع مجموعه جنریک است.

1٬996 0 1401/08/13

Garbage Collection در دات نت

به طور کلی، Garbage Collection (GC) یا جمع آوری زباله در .Net چیزی نیست جز به دست آوردن مجدد حافظه اختصاص داده شده به اشیایی که در حال حاضر در هیچ بخشی از برنامه ما استفاده نمی شوند. ما در این مقاله Garbage Collection را در سی شارپ بررسی خواهیم کرد.

2٬809 5 1401/03/30

.NET Core چیست؟

.Net (با تلفظ «دات نت») یک چارچوب نرم افزاری کامپیوتری مدیریت شده رایگان و منبع باز برای سیستم عامل های ویندوز، لینوکس و macOS است. این پروژه در درجه اول توسط کارمندان مایکروسافت از طریق دات نت توسعه یافته و تحت مجوز MIT منتشر شده است.

2٬563 2 1401/03/16

پشته(Stack) در سی شارپ

پشته یا Stack در سی شارپ یک نوع خطی از ساختار داده است که قادر به ذخیره اشیاء است. پشته یک ساختار داده LIFO یا Last-In-First-Out است، به این معنی که آخرین موردی که در پشته قرار می گیرد اولین موردی است که از پشته خارج می شود.

2٬164 0 1401/03/09

صف (Queue) در سی شارپ

صف (Queue) در سی شارپ یک نوع خطی از ساختار داده است که قادر به ذخیره اشیاء است. Queue یک ساختار داده first-in-first-out یا FIFO است که به این معنی است که اولین مورد اضافه شده به صف اولین موردی است که حذف می شود.

2٬140 0 1401/02/30

تفاوت Hashtable و Dictionary در سی شارپ

در سی شارپ از Hashtable و Dictionary می توان برای ذخیره مجموعه‌ای از داده‌ها، شبیه به List معمولی استفاده کرد. با این تفاوت که Hashtable و Dictionary عناصر را به عنوان جفت Key/Value ذخیره می کنند.در این مقاله به تفاوت های Hashtable و Dictionary پرداخته شده است.

1٬830 1 1401/02/23

Dictionary در سی شارپ

در سی شارپ از دیکشنری ها (Dictionary) می‌توان برای ذخیره مجموعه‌ای از داده‌ها، شبیه به List معمولی استفاده کرد. تفاوت اصلی این است که یک Dictionary می تواند عناصر را به عنوان جفت Key/Value ذخیره کند.Key ها باید منحصر به فرد و نمی توانند null باشند. Value ها می توانند تکراری یا null باشند.

2٬233 3 1401/02/17

Hashtable در سی شارپ

از Hashtable می‌توان برای ذخیره مجموعه‌ای از داده‌ها، شبیه به List معمولی استفاده کرد. تفاوت اصلی این است که یک Hashtable می تواند عناصر را به عنوان جفت Key/Value به عنوان جایگزینی برای استفاده از Index ذخیره کند.

1٬705 5 1401/02/14

Redirect درخواست (ریدایرکت) در asp.net core

در برنامه های ASP.NET Core برای تغییر مسیر(ریدایرکت) و Redirect به یک URL خاص روش های مختلفی وجود دارد. در این مقاله با این تکنیک ها و کدهای مورد نیاز برای تغییر مسیر یک درخواست در ASP.NET Core آشنا می شویم.

2٬525 5 1401/02/12

تبدیل enum به لیست انتخابی در asp.net core

در این آموزش ما بوسیله Reflection ها در سی شارپ و asp.net core یک enum را به لیست انتخابی یا SelectListItem تبدیل خواهیم کرد و بوسیله تگ select در بوت استرپ 5 نمایش می دهیم.

1٬742 3 1401/02/03

نحوه ارسال ایمیل در asp و c#

امروزه ارسال ایمیل به امری ضروری در پروژه های وب تبدیل شده است.از ارسال ایمیل در asp می توان در بخش های تایید حساب کاربری،بازیابی رمز عبور،ایمیل مارکتینگ،ارسال خبرنامه و ... استفاده نمود.در این آموزش نحوه ارسال ایمیل در asp core و سی شارپ پیاده سازی گردیده است.

2٬537 5 1401/02/03
نظرات

برای ثبت نظر باید در سایت ثبت نام یا ورود نمایید