در این آموزش از وبسایت پرووید در رابطه با ساخت یک real-time app با استفاده از SingalR صحبت خواهیم کرد. مراحلی که در این آموزش انجام خواهند شد عبارت اند از:
در پایان کار یک chat application ساده شبیه به تصویر زیر خواهیم داشت. علاوه بر این می توانید فایل های پروژه ی مربوط به این آموزش را نیز دانلود کنید.
برای استفاده از این آموزش باید Visual Studio 2017 را نصب کنید و همچنین .NET Core SDK 2.1 یا ورژن های بعدی را نیز نصب داشته باشید.
از منوی File گزینه ی New Project را انتخاب کنید. در پنجره ی New Project از قسمت سمت چپ Installed و سپس Visual C# و پس از آن Web و نهایتاً ASP.NET Core Web Application را انتخاب کنید. نام پروژه را SignalRChat بگذارید. این موضوع در تصویر زیر نشان داده شده است.
از پنجره ی بعد گزینه ی Web Application را انتخاب کنید تا یک پروژه با razor page ها ساخته شود. علاوه بر این، target framework را بر روی .NET Core تنظیم کرده و گزینه ی ASP.NET Core 2.1 را انتخاب کنید و سپس OK را کلیک کنید. این موضوع نیز در تصویر زیر نشان داده شده است.
دقت کنید که SignalR server library در متاپکیج Microsoft.AspNetCore.App قرار دارد. اما JavaScript client library به صورت خودکار در پروژه لحاظ نمی شود. ما در این آموزش از LibMan یا همان Library Manager برای به دست آوردن client library از unpkg استفاده می کنیم. شاید بدانید که unpkg یک CDN یا content delivery network است که می تواند هر چیزی که بر روی npm یا همان Node.js package manager وجود داشته باشد را در اختیار ما قرار دهد.
خب به منظور انجام این کار از Solution Explorer بر روی پروژه راست کلیک کرده و سپس Add و سپس Client-Side Library را انتخاب کنید. در پنجره ی Add Client-Side Library از قسمت Provider گزینه ی unpkg را انتخاب کنید. برای گزینه ی Library عبارت @aspnet/SignalR@1 را وارد کنید و نهایتاً آخرین نسخه ای که در حالت preview یا پیش نمایش نیست را انتخاب کنید. این موضوع نیز در تصویر زیر نشان داده شده است.
بعد از گزینه ی Choose specific files را انتخاب کنید و فولدر dist/browser را بازن کرده و SignalR.js و SignalR.min.jsرا انتخاب کنید. گزینه ی Target Location را به wwwroot/lib/SignalR/ تنظیم کرده و بر روی Install کلیک کنید. این موضوع نیز در تصویر زیر نشان داده شده است.
با انجام این کار LibMan یک فولدر با نام wwwroot/lib/SignalR را ایجاد کرده و فایل های انتخابی را در این فولدر کپی می کند.
یک hub یک pipeline سطح بالا یا high-level است که communication های بین client و server را هندل می کند. در پروژه ی SignalRChat یک فولدر به نام Hubs ایجاد کرده و پس از آن یک کلاس با نام ChatHub.cs را در درون این فولدر ایجاد کنید و کد زیر را در آن قرار بدهید.
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
همانطور که در کد بالا می بینید کلاس ChatHub از کلاس Hub ارث بری می کند. در SignalR کلاس Hub وظیفه ی مدیریت کردن connection ها و group ها و message ها را دارد. متد SendMessage می تواند توسط هر client ای که یک connection دارد صدا زده شود. این متد تمامی message های دریافت شده را به تمامی client ها ارسال می کند. ضمناً، کدهای مربوط به SignalR به صورت asynchronous هستند. این موضوع باعث می شود که scalability به حداکثر برسد.
در ادامه باید SignalR server را طوری پیکربندی کنیم که request ها را به SignalR برساند. کدی که در قسمت زیر می بینید را به فایل Startup.cs اضافه کنید.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;
namespace SignalRChat
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.Configure(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.AddSignalR();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseSignalR(routes =>
{
routes.MapHub("/chatHub");
});
app.UseMvc();
}
}
}
این کد باعث می شود که SignalR به قسمت dependency injection در ASP.NET Core و همچنین middleware pipeline آن اضافه شود. در رابطه با dependency injection و inversion of control توصیه می کنیم حتماً آموزش معکوس سازی کنترل Inversion of Control در سی شارپ وبسایت پرووید را استفاده کنید. علاوه بر این، بسته ی آموزش ویدئویی شروع به کار برنامه نویسی ASP.NET Core وبسایت پرووید را نیز می توانید استفاده کنید.
کد درون Index.cshtml را که در فولدر Pages قرار دارد با کدی که از فایل های پروژه ی این آموزش دانلود کرده اید جایگزین کنید.
در کدی که اضافه کرده اید مشاهده کردید text box هایی برای name و message text و همچنین یک button ساخته شده اند. علاوه بر این، یک لیست با id ای که که با مقدار messagesList تنظیم شده است و حاوی message هایی است که در hub دریافت شده اند. موضوع آخری که در این کد مشهود است script reference ای است که به SignalR و chat.js ای خورده است که در قسمت بعد ایجاد خواهیم کرد. در آموزش جاوا اسکریپت و طراحی وب از وبسایت پرووید در رابطه با این مفاهیم صحبت شده است.
در ادامه در فولدر wwwroot/js یک فایل با نام chat.js ایجاد کرده و که از فایل های پروژه ی این آموزش دانلود کرده اید را در این فایل وارد کنید.
در کدی که اضافه کرده اید مشاهده کردید یک connection را ایجاد و run می کنیم. به submit که یک button است یک handler اضافه می کند که مسئول ارسال کردن message ها به hub است. به شی connection یک handler اضافه می کند که مسئول دریافت کردن message ها از hub و اضافه کردن آنها به لیست است.
در ویژوال استادیو با CTRL+F5 برنامه را بدون debugger اجرا کنید. در رابطه با استفاده از قابلیت های مختلف ویژوال استادیو در ساخت برنامه های دات نت توصیه می کنیم آموزش کار با ویژوال استادیو برای ساخت برنامه های دات نت را استفاده کنید. علاوه بر این، توصیه می کنیم از آموزش دیباگ کردن Debugging در سی شارپ نیز استفاده کنید.
پس از اجرا شدن برنامه، URL برنامه را کپی کرده و در browser یک tab جدید ایجاد کنید و URL را در آن paste کنید.
حال در یکی از این دو tab یک name و message وارد کنید و دکمه ی Send را کلیک کنید. فوراً خواهید دید که name و message در هر دو tab نشان داده می شوند. این موضوع در تصویر زیر نیز نشان داده شده است.
اگر برنامه به درستی اجرا نشد با استفاده از دکمه ی F12 می توانید developer tools مربوط به browser را باز کنید و سپس به قسمت console بروید. در این قسمت ممکن است error هایی را در رابطه با کدهای HTML و JavaScript ببینید. ضمناً، به منظور آموزش HTML می توانید از آموزش HTML5 و طراحی وب وبسایت پرووید استفاده کنید.
برخی از این error ها را می توان به سادگی حل کرد. مثلاً، اگر فایل SignalR.js را فولدری قرار بدهید که به آن reference نزدید، خطای 404 دریافت خواهید کرد. می توانید این مشکل را به سادگی ببینید و حل کنید.
خب این آموزش از وبسایت پرووید را نیز در این قسمت به اتمام می رسانیم. امیدواریم که این آموزش نیز مورد توجه همه ی دوستان عزیز قرار گرفته باشد.
بهترین و جامع ترین آموزش های برنامه نویسی و توسعه نرم افزار از سطح ابتدایی تا سطح میانی و سطح پیشرفته
تمامی حقوقی مادی و معنوی متعلق به گروه آموزشی پرووید است.