تحلیل داده
صفحه اصلی / آموزش طراحی وب / آموزش ASP.NET / ساخت ساعت Real Time با استفاده از SignalR

ساخت ساعت Real Time با استفاده از SignalR

ساخت ساعت Real Time

در این آموزش به ساخت ساعت Real Time (بلادرنگ) با استفاده از SignalR میپدازیم ، مقاله های آموزش SignalR را دنیال کنید تا با این تکنولوژی پرکاربرد آشناشوید.همراه من در ادامه جهت اجرایی کردن آموزش باشید.

محتوای این مقاله

ارتباط بلادرنگ چیست

  1. SignalR چیست
  2. اپلیکیشن نمونه

ارتباط بلادرنگ چیست

در ارتباط بلادرنگ، سرور بدون اینکه منتظر درخواست از طرف کلاینت باشد، داده ها را push کرده و یا درباره به روز رسانی و تغییرات به کلاینت های متصل اطلاع رسانی می نماید. در ارتباط بلادرنگ کلاینت همچنین می تواند بدون pull کردن یک درخواست کامل http به سرور، داده ها را ارسال نماید. در ارتباط بلادرنگ مرورگر وب مانند یک اپلیکیشن دسکتاپ عمل می کند.

SignalR چیست

SignalR یک پکیج asp.net برای پیاده سازی قابلیت ارتباط بلادرنگ در یک اپلیکیشن وب می باشد. این قابلیت برای VS2012 و نسخه های بالاتر موجود است و از طریق NuGet می توان آن را دانلود کرد. ترکیبی از کد سمت سرور و جاوا اسکریپت سمت کلاینت است. روش ساده ای را برای پیاده سازی برقرای ارتباط بلادرنگ بین سرور و کلاینت فراهم می کند. SignalR از WebSocket برای برقرای ارتباط استفاده می نماید و پیچیدگی های پیاده سازی سوکت را از دید برنامه نویسان مخفی می کند. از یک کلاس Hub در سمت سرور و از jQuery در سمت کلاینت استفاده می کند.

اپلکیشن نمونه

اپلیکیشن نمونه نشان می دهد که چگونه SignalR را در پروژه Asp.Net نصب می کنیم و نحوه نمایش یک ساعت بلادرنگ را با استفاده از SignalR توضیح می دهد. با انتخاب یک کشور از لیست کشویی، ساعت محلی کشور انتخاب شده در مرورگر نمایش داده شده و این ساعت از طریق سرور با استفاده از SignalR به جای جاوا اسکریپت سمت کلاینت به روز رسانی می شود. در این مثال از VS2013 به عنوان محیط توسعه استفاده کرده ایم.

مراحل به ترتیب زیر هستند:

  1. یک پروژه خالی با استفاده از قالب ASP.NET Web Application می سازیم.

ساخت ساعت Real Time

  1. پکیج های سمت سرور و کلاینت SignalR را با استفاده از NuGet Package Manager نصب می کنیم.

ساخت ساعت Real Time

  1. کتابخانه jQuery نصب شده در شکل زیر نشان داده شده است:

ساخت ساعت Real Time

  1. حالا یک کلاس SignalR Hub به پروژه در فولدر App_Code اضافه می نماییم.

ساخت ساعت Real Time

  1. کلاس Hub شامل توابع public است که توسط کلاینت فراخوانی می شوند. تابع GetTime را در Hub اضافه می کنیم. این تابع ناحیه زمانی یک کشور را به عنوان پارامتر گرفته و به datetime سیستم ناحیه زمانی انتخاب شده تبدیل کرده و آن را به مرورگر فراخواننده push می نماید.

ساخت ساعت Real Time

کد سمت کلاینت برای فراخوانی این تابع در زیر آمده است:

۶. حالا یک کلاس OWIN Startup به پروژه اضافه می کنیم.

ساخت ساعت Real Time

۷. کد زیر را به کلاس Startup اضافه می کنیم تا SignalR را در زمان شروع پروژه نگاشت کند.

۸. یک صفحه html برای نمایش ساعت در مرورگر اضافه می کنیم.

در اینجا ابتدا کتابخانه jQuery و سپس کتابخانه jQuery SignalR و پس از آن رفرنس اسکریپت hubها را که به صورت داینامیک توسط سرور تولید می شوند، اضافه می کنیم.

۹. حالا فایل اسکریپت Client.js را در فولدر Scripts اضافه می کنیم. کد سمت کلاینت را اضافه می کنیم که کلاینت را به سرور متصل می کند و تابع را از کلاس hub فراخوانی می نماید. کد جاوا اسکریپت نمونه سمت کلاینت در زیر نشان داده شده است:

در توضیح کد، ابتدا یک شی proxy ایجاد می شود و سپس یک رفرنس تابع callback به شی proxy کلاینت تخصیص داده می شود که زمانی اجرا می شود که سرور یک به روزرسانی به مرورگر push کند. درنهایت تابع start برای شروع ارتباط فراخوانی می شود. بعد از اینکه اتصال با موفقیت برقرار شد، تابع جاوا اسکریپت setInterval تابع سرور getTime را در هر ثانیه فراخوانی می کند تا زمانی که مرورگر بسته شود. سپس سرور تابع hub را اجرا کرده و یک پاسخ به مرورگر ارسال می کند بدون اینکه صفحه به طور کامل بارگذاری مجدد شود. کد سمت سرور برای push کردن به روز رسانی به کلاینت به صورت زیر نوشته شده است:

اینجا تابع سمت کلاینت setTime برای به روزرسانی کلاینت فراخوانی می شود. بعد از دریافت پاسخ کلاینت تابع callback را اجرا کرده و ساعت را با داده جدید به روزرسانی می نماید.

۱۰. صفحه html را در مرورگر باز می کنیم. مرورگر ساعت نشان داده شده زیر را نمایش می دهد.

ساخت ساعت Real Time

نتیجه گیری

در نتیجه SignalR ابزار ساده و خوبی برای پیاده سازی ارتباط بلادرنگ می باشد. این ابزار از یک کلاس hub در سمت سرور و jQuery در سمت کلاینت استفاده می کند. مانند فراخوانی روال از راه دور بین سرور و کلاینت عمل می کند. ارتباط بلادرنگ در بسیاری از اپلیکیشن ها مانند چت در مرورگر، داشبوردهای بلادرنگ و… استفاده می شود.

جزئیات فایل

زبان پروژه : C#&ASP.NET&SignalR
حجم فایل پیوست : 5 MB

رمز فایل : www.mspsoft.ir , www.mspsoft.com
کانال ام اس پی سافت

پاسخ دهید

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



دوره های آنلاین ام اس پی سافت

آموزش طراحی فروشگاه اینترنتی

آموزش طراحی فروشگاه اینترنتی

طراحی سیستم مدیریت مشتریان

طراحی سیستم مدیریت مشتریان

دوره طراحی وب سایت پورتال خبری

دوره طراحی وب سایت پورتال خبری

دوره طراحی حسابداری فروشگاه

دوره طراحی حسابداری فروشگاه