آموزش MVC Core-کاربرد SignalR Core در MVC Core

آموزش MVC Core-کاربرد SignalR Core در MVC Core

در این مقاله، ما نحوه استفاده از SignalR Core در برنامه های ASP.NET Core 2.0 وب را برای برقراری ارتباط در زمان واقعی(real-time communication) یاد خواهیم گرفت.

سناریو

پس از پردازش لیست پرداخت(payroll)، سیستم فرآیند تولید گزارش را آغاز خواهد کرد. پس از تکمیل این فرایند، ما می خواهیم همه مشتریان وب را مطلع کنیم که گزارش های آنها در دسترس هستند.

توجه داشته باشید

من می خواهم یک مثال واقعی SignalR را نشان دهم اما همچنین می خواهم آن را به اندازه کافی ساده نگه دارم.( فرض میکنم که شما با نسخه قبلی SignalR آشنا هستید.)

راه حل

ما دو برنامه ایجاد خواهیم کرد: Server و Client . هنگامی که گزارش آماده و in-turn است، سرور اعلامیه(notifications) از موتور گزارش دهنده دریافت خواهد کرد، و به مشتریان اطلاع خواهد داد.

سرور

یک برنامه کنسول خالی (.NET Core) ایجاد کنید و NuGet packages های زیر را اضافه کنید:

• AspNetCore.All
• AspNetCore.SignalR

کلاس Program را به روز رسانی کنید:

public class Program  
    {  
        public static void Main(string[] args)  
        {  
            BuildWebHost(args).Run();  
        }  
   
        public static IWebHost BuildWebHost(string[] args) =>  
            WebHost.CreateDefaultBuilder(args)  
                .UseStartup< Startup >()  
                .Build();  
    } 

برای افزودن services و middleware برای SignalR یک کلاس Startup اضافه کنید.

public class Startup  
    {  
        public void ConfigureServices(  
            IServiceCollection services)  
        {  
            services.AddCors(options =>  
            {  
                options.AddPolicy("fiver",  
                    policy => policy.AllowAnyOrigin()  
                                    .AllowAnyHeader()  
                                    .AllowAnyMethod());  
            });  
   
            services.AddSignalR(); // <--SignalR  
        }  
   
        public void Configure(  
            IApplicationBuilder app,   
            IHostingEnvironment env)  
        {  
            app.UseCors("fiver");  
   
            app.UseSignalR(routes =>  // <--SignalR  
            {  
                routes.MapHub< ReportsPublisher >("reportsPublisher");  
            });  
        }  
    }  

یک کلاس ایجاد کنید که از کلاس SignalR Hub ارث برده باشد:

public class ReportsPublisher : Hub  
    {  
        public Task PublishReport(string reportName)  
        {  
            return Clients.All.InvokeAsync("OnReportPublished", reportName);  
        }  
    }  

public class ReportsPublisher : Hub  
    {  
        public Task PublishReport(string reportName)  
        {  
            return Clients.All.InvokeAsync("OnReportPublished", reportName);  
        }  
    }  

Client

یک برنامه ASP.NET Core 2.0 خالی ایجاد کنید و(NuGet package Microsoft.AspNetCore.SignalR) را اضافه کنید. Services و middleware برای MVC به کلاس Startup اضافه کنید:

public class Startup  
    {  
        public void ConfigureServices(  
            IServiceCollection services)  
        {  
            services.AddMvc();  
        }  
   
        public void Configure(  
            IApplicationBuilder app,   
            IHostingEnvironment env)  
        {  
            app.UseStaticFiles();  
            app.UseMvcWithDefaultRoute();  
        }  
    }  

اضافه کردن سه Controllers (Home، Publisher، Reports) ، که هر کدام بازگشتشان(returning) یک Index View برای مثال باشد:

public class HomeController : Controller  
    {  
        public IActionResult Index() => View();  
    }  

یک Layout View ایجاد کنید:

< !DOCTYPE html >  
   
< html >  
< head >  
    < meta name="viewport" content="width=device-width" / >  
    < title >ASP.NET Core SignalR< /title >  
   
    < script src="js/signalr-client.min.js" >< /script >  
    < script src="js/jquery.min.js" >< /script >  
< /head >  
< body >  
    < div >  
        @RenderBody()  
        @RenderSection("scripts", required: false)  
    < /div >  
< /body >  
< /html > 

اضافه کردن Index View برای کنترلر Publisher :

< h2 >Publisher< /h2 >  
   
< input type="text" id="reportName" placeholder="Enter report name" / >  
< input type="button" id="publishReport" value="Publish" / >  
   
@section scripts {  
    < script >  
        $(function () {  
   
            let hubUrl = 'http://localhost:5000/reportsPublisher';  
            let httpConnection = new signalR.HttpConnection(hubUrl);  
            let hubConnection = new signalR.HubConnection(httpConnection);  
   
            $("#publishReport").click(function () {  
                hubConnection.invoke('PublishReport', $('#reportName').val());  
            });  
   
            hubConnection.start();  
   
        });  
    < /script >  
}  

اضافه کردن Index View برای کنترلر Reports :

< h2 >Reports< /h2 >  
   
< ul id="reports" >< /ul >  
   
@section scripts {  
    < script >  
        $(function () {  
   
            let hubUrl = 'http://localhost:5000/reportsPublisher';  
	            let httpConnection = new signalR.HttpConnection(hubUrl);  
	            let hubConnection = new signalR.HubConnection(httpConnection);  
	              
	            hubConnection.on('OnReportPublished', data = > {  
	                $('#reports').append($('< li >').text(data));  
	            });  
	   
	            hubConnection.start();  
	   
	        });  
	    < /script >  
	}  

هر دو برنامه سرور (Server)و مشتری(Client) را اجرا کنید. شما می توانید چند نمونه از پنجره های مرورگر را باز کرده و خروجی را مشاهده کنید.

کنترلر Publisher به عنوان موتور گزارشکر(reporting engine) عمل کند که سرور گزارش تکمیل شده را اعلام می کند.
شما می توانید سورس کد این مقاله را از لینک زیر دانلود کنید:

https://github.com/TahirNaushad/Fiver.Asp.SignalR

شما دانشجویان گرامی می توانید فایل مربوط به این آموزش را از قسمت پایانی این مقاله دانلود نمایید .