آموزش کار با سیگنال آر در Asp.net Core

آموزش استفاده از SignalR در Asp.net Core

استفاده از سیگنال آر در Asp.Net Core خیلی ساده هست. البته این موضوع هم مهم هست که دقیقا چه کاری می خواید با SignalR انجام بدید. توی خود سایت مایکروسافت نحوه استفاده از SignalR در Asp.net Core هست که با یک مثال خیلی ساده و ایجاد یک پروژه ساده این کار رو انجام داده.

 

در فیلم زیر بخشی از آموزش استفاده از SignalR در Asp.net Core هست که میتونید مشاهده کنید و با ذهنیت بازتری نسبت به آموزش SignalR اقدام کنید.

 

 

 

کاربردهای SignalR

به طور کلی کتابخانه جاوااسکریپتی سیگنال آر یک کتابخانه می باشد که سمت کلاینت اجرا می شود. فرض کنید قصد دارید یک سیستم چت طراحی کنید، در این حالت وقتی کاربری پیامی را تایپ می کند و ارسال می کند کاربر دوم باید در همان لحظه و بدون رفرش کردن نرم افزار پیام را ببینید و به همین صورت پاسخ دهد و یا اینکه در یک سیستم اتوماسیون اداری تحت وب می خواهید وقتی کاربری نامه ای را به کاربر دیگری ارسال می کند بدون اینکه کاربر دوم صفحه را رفرش کند پیامی مبنی بر اینکه یک نامه جدید دریافت کرده اید را مشاهده کند.

در این مواقع بهترین گزینه شما استفاده از SignalR می باشد.

 

استفاده از SignalR در Asp.net Core با استفاده از دیتابیس

خب در مورد استفاده از سیگنال آر در Asp.net Core مثال مایکروسافت رو مشاهده کردید. حالا فرض کنید می خواهیم در یک سیستم بعد از ثبت اطلاعات در دیتابیس (مثلا ثبت نامه در دیتابیس یا ثبت چت های کاربران در دیتابیس) یک پیام ارسال شود.

 

مرحله اول : نصب کتابخانه SignalR

در ابتدا باید کتابخانه های جاوااسکریپنی سیگنال آر رو به پروژه اضافه کنید. برای این منظور در ویژوال استودیو روی نام پروژه کلیک راست کنید و گزینه Add را انتخاب کنید، سپس روی گزینه Client-Side Library کلیک کنید.

 

مرحله دوم : افزودن پکیج های مورد نیاز به پروژه

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

 

 

دقت کنید که به اینترنت متصل باشید. بعد از زدن دکمه Install باید در مسیر مشخص شده در wwwroot/js/signalr یک پوشه به نام signalr ایجاد شده باشد که درون آن هم یک فایل جاوااسکریپت وجود دارد.

 

 

مرحله سوم : لینک کردن فایلهای مورد نیاز در Layout

خب حالا به پوشه Views و Shared و سپس Layout بروید و مطابق زیر فایلها را به پروژه لینک کنید تا بتوانید از SignalR استفاده کنید.

 

<script type="text/javascript" src="~/Panel/assets/js/core/libraries/jquery.min.js"></script>
<script src="~/lib/SignalR/dist/browser/signalr.min.js"></script>

 

مرحله چهارم : کانفیگ کردن تنظیمات مربوط به سیگنال آر در کلاس Startup.cs

کلاس StartUp.cs را باز کنید. در متد ConfigureServices سرویس مربوط به سیگنال آر را در انتهای متد راه اندازی کنید:

services.AddSignalR();

 

حالا در متد Configure هم مسیر مربوط به سیگنال آر را تنظیم کنید:

 

app.UseEndpoints(endpoints =>
    {
        //default
        endpoints.MapControllerRoute(
             name: "default",
             pattern: "{controller=Account}/{action=Login}/{id?}");

        //SignalR
         endpoints.MapHub<LetterHub>("/myownHub");
     });

 

در کد بالا قسمتی که با کامنت SignalR مشخص شده است مربوط به تنظیم مسیر SignalR می باشد. خب متد MapHub نیاز به یک Hub دارد که در اینجا کلاس LetterHub را معرفی کرده ایم (البته در مرحله بعد این کلاس را ایجاد خواهیم کرد). همچنین نیاز به یک نام جهت ارتباط کلاینت با Hub می باشد که این نام را هم به طور دلخواه myownHub قرار داده ایم.

 

مرحله پنجم : ایجاد Hub

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

 

 public class LetterHub : Hub
    {
        private readonly DbContext _db;

        public LetterHub(DbContext db)
        {
            _db = db;
        }
        public async Task SentLetters(string userId)
        {
            //await Clients.All.SendAsync("RecievedLetter");
            await Clients.Users().SendAsync("RecievedLetter");
            
        }
    }

 خب در قطعه کد بالا کلاس Hub که نام آن را LetterHub قرار دادیم تعریف شده است. در این کلاس یک متد به نام SentLetter تعریف شده است که به صورت async هم می باشد. همچنین این متد یک ورودی به نام userID دارد. این UserId در واقع آیدی کاربری می باشد که قرار است پیام برای اون ارسال شود.

نکته : اگر در بدنه متد دقت کنید 2 خط کد نوشته شده است که خط اول را کامنت کرده ایم. خط اول برای حالتی است که شما بخواهید به تمام کاربران خود اطلاع رسانی را انجام دهید.

await Clients.All.SendAsync("RecievedLetter");

 

و اما حالت دوم برای حالتی است که دقیقا آیدی کاربری که قرار است پیام را دریافت کند مشخص شده است.

await Clients.Users().SendAsync("RecievedLetter");

همچنین شما می توانید Model هم به Hub خود ارسال کنید و اطلاعات را در دیتابیس در همینجا ذخیره کنید

 public class LetterHub : Hub
    {
        private readonly DbContext _db;

        public LetterHub(DbContext db)
        {
            _db = db;
        }
        public async Task SentLetters(Message model,string userId)
        {
             Message M = new Message
             {
                  M.NewsTitle = model.NewsTitle,
                  M.NewsContent = model.NewsContent,
                  M.userID = model.userId
                  M.DateTime = model.DateTime
             };
             _db.Message_Tbl.Add(M);
             await _db.SaveChangeAsync
            //await Clients.All.SendAsync("RecievedLetter");
            await Clients.Users().SendAsync("RecievedLetter");
            
        }
    }

همانطور که ملاحظه می فرمایید در اینجا اطلاعات را در دیتابیس نیز ثبت کردیم.

 

مرحله ششم : ایجاد ConnetctionString جهت ارتباط با Hub

خب تا اینجای کار Hub را جهت ارسال پیام به کلاینت آماده کرده ایم. اما در سیستم هایی که از سیگنال آر استفاده می کنند باید به محض اجرای نرم افزار یک Connection به Hub برقرار شود تا مرتبا Hub آماده دریافت تغییرات  ارسال پیام به کاربران باشد. بنابراین باید یک فایل از نوع JavaScript ایجاد کنیم و برخی تنظیمات مانند ConnectionString را درون آن تعریف کنیم. در همان پوشه ای که فایل مربوط به SignalR را ایجاد کرده بودیم یک فایل جدید با نام SignalRConnection ایجاد کنید و کدهای زیر را درون آن قرار دهید.

 

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

 

var connection = new signalR.HubConnectionBuilder().withUrl("/myownHub").withAutomaticReconnect().build();

connection.start();

document.getElementById("btnsentLetter").addEventListener("click", function () {

     var userId = $("#userId").val();
     connection.invoke("SentLetters", userId).catch(function (err) {
     return console.error(err.tostring());
       });

});

 

خب در خط اول کانکشن را ایجاد کرده ایم و در خط بعد ارتباط را آغاز کرده ایم. در ادامه هم گفته ایم هر موقع روی دکمه یا آیدی btnsentLetter کلیک شد به تابع SentLetter که درون LetterHub قرار دارد سریعا اطلاع بده و userId را هم ارسال کن. اگر قصد ارسال Model را هم داشته باشید می توانید مقادیر را از طریق جاوااسکریپت دریافت کنید و به Hub ارسال کنید.

 

دقت کنید که شما بایستی در ویویی که میخواهید از آنجا پیامی ارسال شود یک دکمه به نام btnsentLetter داشته باشید

 

<form>
   <input type="text" />
   <input id="userId" hidden />
   <button id="btnsentLetter">
            ارسال پیام
  </button>
</form>

 

نکته : دقت کنید بعد از ایجاد فایل SignalRConnection.js حتما در Layout این فایل لینک شود.

<script type="text/javascript" src="~/Panel/assets/js/core/libraries/jquery.min.js"></script>
<!--SignalR Script-->
<script src="~/lib/SignalR/dist/browser/signalr.min.js"></script>
<script src="~/lib/SignalR/SignalRConnection.js"></script>

 

مرحله هفتم : دریافت پیام در کلاینت

خب همه چیز آماده است. حالا باید در کلاینت یا کاربر دوم پیام دریافت شود. بنابراین باید در View ایی که می خواهید پیام نمایش داده شود قطعه کد زیر نوشته شود.

 

    <script>
        connection.on("RecievedLetter", function () {
             alert('یک پیام جدید دارید');
        });
        connection.start().catch(function (err) {
            return console.error(err.tostring());
        });
    </script>

 

خب کار تمام است و شما توانستید سیگنال آر را راه اندازی و استفاده کنید. در مجموع نحوه کار با SignalR در Asp.net Core در شکل زیر مشخص است

 

 

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