در این پست از وبسایت پرووید در رابطه با آموزش ساخت یک اپلیکیشن با ASP.NET Core و SignalR #2 صحبت خواهیم کرد. ASP.NET Core نسل جدید تکنولوژی ساخت وب اپلیکیشن ها می باشد.

در قسمت قبلی از آموزش در رابطه با ساختن web project صحبت کردیم.

پیکربندی signalr

در ادامه باید 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<CookiePolicyOptions>(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>("/chatHub");
            });
            app.UseMvc();
        }
    }
}

این کد باعث می شود که signalr به قسمت dependency injection در ASP.NET Core و همچنین middleware pipeline آن اضافه شود. در رابطه با dependency injection و inversion of control توصیه می کنیم حتماً بسته ی آموزش ویدئویی Inversion of Control و IoC Container ها وبسایت پرووید را استفاده کنید. علاوه بر این، بسته ی آموزش ویدئویی شروع به کار برنامه نویسی ASP.NET Core وبسایت پرووید را نیز می توانید استفاده کنید.

اضافه کردن signalr client code

کد درون 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 دریافت خواهید کرد. می توانید این مشکل را به سادگی ببینید و حل کنید.

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

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

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