ورود / ثبت نام
0
0

آموزش ساخت برنامه چت با SignalR به زبان #ASP.NET C

750 بازدید
SignalR

SignalR

ASP.NET SignalR یکی از بزرگترین انقلابات در پیشرفت دنیای تکنولوژی امروزه برای ساخت برنامه های واقعی بوده است. برنامه ای را در نظر بگیرید که یک صفحه دارد جایی که شما احتیاج دارید رابط کاربری را با آخرین داده ها به محض دریافت , به روز رسانی کنید. به این برنامه ها , برنامه های بی درنگ گفته میشود. جایی که رابط کاربر به محض موجود بودن داده های جدید برای کاربر به روز رسانی میشود.بهترین مثال یک برنامه ی بازار موجودی است که باید همواره رابط کاربری در آن به محض تغییر نرخ موجودی جدید به روز شود. مثالی دیگر برنامه های چت میباشند که باید دریافت کننده را به محض دریافت پیام جدید از فرستنده به روز رسانی کند.

بعضی از این تکنیک ها میتوانند درخواست های timer-based به سرور برای گرفتن داده استفاده شوند و برخی دیگر برای نمونه برداری برای دریافت داده استفاده شوند. نمونه ی خوبی از این دسته SignalR است.

همانطور که میدانیم مدل های برنامه های وب ما عموما شامل یک سرور میباشد که میزبان برنامه و مشتری ها است و به کاربران برنامه را عرضه میکند. برای ساخت برنامه هایی مبنی بر SignalR نیاز به ساخت یک hub بر روی سرور دارید که مسئول به روز رسانی مشتریان یا کاربران با آخرین داده ها است. این hub چیزی نیست جز یک کلاس ساده ی ارث برده شده از کلاس Hub. در بخش مشتری ما به طور اتوماتیک یک فایل پروکسی بر پایه ی جاوا سکریپت تولید شده در زمان اجرا دریافت میکنیم که میتواند توسط مشتری برای اتصال با یک hub مورد استفاده قرار گیرد. کد مشتری همچنین شامل یک تابع جاوا سکریپت است که hub از آن برای ارائه ی آخرین داده ها استفاده میکند. شکل های زیر را ببینید :

SignalR

برای توضیح این پروسه با جزئیات , hub ما به طور مستقیم تابع جاوا سکریپت مشتری را برای ارائه ی آخرین داده ها , فراخوانی میکند.در طرف دیگر با استفاده از فایل پروکسی جاوا سکریپت تولید شده در بخش مشتری , کد مشتری میتواند از این پروکسی برای صدازدن متد های hub سرور , در صورت لزوم استفاده کند. لفظ در صورت لزوم در اینجا از روی عمد آورده شده است با این حقیقت که ممکن است مشتری به فراخوانی hub احتیاجی نداشته باشد. به عنوان مثال در برنامه ای که در آن ما داشبورد کاربر با مقداری داده از پایگاه داده داریم , میتوانیم با استفاده از sqlDependency و SignalR رابط کاربری را به روز رسانی شده نگه داریم هرگاه تغییری در سوابق پایگاه داده بوجود می آید. در این زمینه مشتری نیاز ندارد تا برای به روز رسانی با سرور تماس بگیرد. در طرف دیگر اگر ما یک برنامه چت داشته باشیم, کد مشتری با hub سرور تماس برقرار میکند و پیغام را میفرستد. سپس hub این پیغام را با صدا زدن متد جاوا سکریپت مشتری, به کاربران برنامه ارسال میکند.

برنامه چت گروهی ساده در ۱۵ دقیقه با استفاده از SignalR

بله درست است ! زمانی که شما با طراحی/ساختار SignalR آشنا شدید, میتوانید به راحتی آن را انجام دهید. ما اکنون بدون استفاده از پایگاه داده یک چت گروهی میسازیم . اگر به روند برنامه دقت کنیم , تمام این پروسه به یک مشتری برای ارسال یک پیغام به سرور و سپس پخش آن پیغام بین همه ی کاربران مشتری متصل , نیازمند است. پس سرور به جزئی نیاز دارد که بتواند پیغام را بین مشتریان پخش کند. این وظیفه توسط کلاس hub انجام میگیرد. این مثالیست که مشتری کجا احتیاج به فراخوانی سرور hub دارد. بگذارید برنامه را تجسم کنیم و سپس آن را بسازیم.SignalRپروژه ی جدیدی تحت عنوان SignalRChat بسازید. با استفاده از Nuget , مراجع را به کتابخانه های SignalR بیافزایید. این به صورت اتوماتیک مراجع را به کتابخانه های انتخاب میزبان OWIN می افزاید که علاوه بر این اجازه ی ارتباط از برنامه ی SignalR به خط لوله OWIN را میدهد. جدا از کتابخانه های سرور , کتابخانه های مشتری موردنیاز برای استفاده از SignalR را نیز می افزاید.

مراجعی که اضافه میشوند را در زیر ببینید :

SignalR

ساخت میزبان OWIN برای برنامه

ما از میزبان پایه ی OWIN برای میزبانی این برنامه استفاده میکنیم. بدون اینکه بخواهیم زیاد وارد ریشه های میزبانی OWIN شویم , بیایید یک کلاس تحت عنوان Startup.cs بسازیم. نام آن حتما باید Startup باشد از آنجایی که این منحصر به میزبانی پایه ی OWIN است و فضای نام آن نیز باید با خاصیت اسمبلی تزئین شده باشد مشخص است که اسمبلی Startup نقطه ی شروع برنامه است. پس از آن ما یک متد تحت عنوان Configuration مشخص میکنیم و با استفاده از app.MapSignalR() , SignalR را درون خط لوله OWIN ثبت میکنیم.

SignalR

ساخت Hub بر روی سرور

قدم بعدی ما ساخت Hub بر روی سرور است که چیزی جز یک فایل کلاس نیست. ما نام آن را SignalRChatHub میگذاریم و آن را از کلاس Hub مشتق میکنیم. شامل یک کتد به نام BroadCastMessage با ۲ پارامتر خواهد بود. کد مشتری از این متد استفاده خواهد کرد (با استفاده از پروکسی تولید شده در انتهای آن) برای ارتباط با hub و پارامتر هایی که به عنوان داده به hub پاس داده میشوند و پنجره ی چت را برای کاربر به روز رسانی میکنند. ما یک تابع با نام receiveMwssage در بخش مشتری مشخص خواهیم کرد ( بعدا در کد ). پس برای الان ما از این نام متد استفاده میکنیم.

SignalR

نکته ای که در اینجا شایان ذکر است این است که ما هیچ کمک فکری برای متد مشتری نمیگیریم. این متد به صورت داینامیک حل خواهد شد. تصویر زیر را ببینید :

SignalR

نصب کد مشتری

نصب سرور تکمیل شد. حال ما یک صفحه ی html به نام ChatWindow.html که پنجره ی چت ما برای کاربر خواهد بود , اضافه خواهیم کرد. همچنین ما مراجع را به jquery-1.6.4.min.js و jquery.signalR-2.2.0.min.js اضافه میکنیم که توسط مدیریت بسته ی Nuget به این صفحه اضافه شده اند. پیش تر ما درباره ی اینکه SignalR به صورت اتوماتیک یک کلاس پروکسی در زمان اجرا تولید میکند , برای کد مشتری, برای اتصال به hub . پس نیاز داریم که این فایل را مرجع کنیم. از آنجایی که این فایل در زمان اجرا تولید میشود به صورت فیزیکی برای ما موجود نیست. همانطور که در بخش آموزشی SignalR در وبسایت رسمی ASP.NET آمده است :

SignalR کد جاوا سکریپت را برای پروکسی تولید و آن را وقف مشتریان برای پاسخ به آدرس “/SignalR/hubs” میکند.

پس ما نیاز به افزودن این مرجع نیز داریم :

SignalR

ما همچنین این گزینه را پیش روی خود داریم که این تولید فایل پروکسی را غیر فعال کنیم (که از حوصله ی این مطلب خارج است) و پروکسی را خودمان بسازیم. در این زمینه ما نیاز داریم که آن فایل را بر اساس چیزی مرجع کنیم. سپس از برخی از HTML های نشانه گذاری برای تولید پنجره چت و طراحی آن با استفاده از یک ظاهر طراحی شده ی CSS.

SignalR

حال وقت آن است که کد مشتری را برای ارسال پیغام , با hub متصل کنیم تا hub بتواند آن را برای همه ی کاربران پخش کند. به این منظور ما ابتدا نمونه ی پروکسی را در یک متغیر بنام chatProxy دریافت میکنیم. به syntax , The camel case در کد مشتری زیر توجه کنید. این مجمعی است که که قرار است پس از ساخت برنامه ی SingalR دنبال شود. برای جزئیات دقیق تر به شما پیشنهاد میکنم که وبسایت SignalR رسمی ASP.NET مراجعه کنید. بدون وارد شدن بیش از این به جزئیات , به ادامه ی کد زنی میپردازیم. اینجا signalRChatHub نام Hub بر روی سرور است. (که ما قبلا بر روی سرور ساختیم).

SignalR

پس از آن ما رویداد کلیک دکمه را الحاق میکنیم (دکمه ای که برای ارسال پیغام به کاربران در نظر گرفته شده است) هروقت که اتصال به hub با موفقیت آغاز شد. این رویداد متد hub را با استفاده از مورد پروکسی فراخوانی میکند و سپس از آن برای دریافت پیغام و فرستادن آن به کاربران استفاده میکند. کد زیر را ببینید :

SignalR

ما همچنین یک تابع مشخص میکنیم که hub آن را برای زمانی که نیاز به به روز رسانی همه ی کاربران با پیغام دریافت شده دارد فراخوانی خواهد کرد. نام این تابع را ما باید در متد hub برای فراخوانی اعلام کنیم در ابتدای بحث. پس این تابع در اینجا همانند یک تابع برگشت پذیر عمل میکند.SignalR

 

پس همه ی کد مشتری نیز نصب شد و حالا میتوانیم برنامه را اجرا کنیم. پس کد نهایی مشتری ما به صورت زیر خواهد بود :

SignalR

حال میتوانیم برنامه را اجرا کنیم. آدرس را کپی کنید و نمونه ی دیگری از جستجوگر یا هر جستجوگر دیگری را باز کنید تا بتوانیم چت کنیم.

SignalR

آسان نبود ؟ پس ما چت مسنجر خودمان را خواهیم داشت . کد زنی خوبی داشته باشید !

 

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=11558
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

3 نظر در مورد آموزش ساخت برنامه چت با SignalR به زبان #ASP.NET C

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. سلام ممنون از مطالب مفیدی که میزارین .
    بخشید یه سوال داشتم : آیا میشه چنتا کلاس داشت برای این برنامه یا به عبارتی چنتا تابع گوناگون برای ارسال داده داشت ؟
    مثلا تابع BroadCastMessage چنتا داشته باشیم منظورم اینه و بتونم همزمان از این چنتا تابع استفاده کرد .
    آیا امکان داره ؟؟

    لایک

    1. برای ارسال و دریافت بله امکان پذیره ولی خوب در شبکه گاهی اوقات محدودیت وجود داره که برخی از کارها را اجازه دسترسی نمیده.

      لایک