شروع به کار با SignalR در ASP.NET Core

این مطلب، ترجمه مقاله ی رسمی مایکروسافت با موضوع شروع به کار با SignalR در ASP.NET Core هستش.
لینک مقاله در انتهای مطلب قرار دارد!

در این آموزش، مقدمات ساخت یک برنامه Real-Time با استفاده از SignalR قرار داده شده است.

در این آموزش خواهید آموخت که چگونه :

• یک پروژه وب ایجاد کنید.
• کتابخانه سمت کلاینت SignalR را اضافه کنید.
• یک SignalR Hub ایجاد کنید.
• پروژه را برای استفاده از SignalR کانفیگ کنید.
• کد ارسال پیام از یک کلاینت به تمامی کلاینت های متصل را اضافه کنید.

در آخر، شما یک برنامه چت خواهید داشت :

پیش نیاز ها

• ویژوال استودیو 2019 با ابزار مختص به توسعه وب ( ASP.NET and web development workload )
• نسخه 3 NET Core SDK. یا بالاتر

ساخت یک پروژه وب

• از منو، File و سپس New Project را انتخاب کنید.
• در پنجره Create a new project، نوع ASP.NET Core Web Application را انتخاب کرده و سپس برروی Next کلیک کنید.
• در پنجره Configure your new project، نام پروژه را SignalRChat قرار داده و برروی Create کلیک کنید.
• در پنجره Create a new ASP.NET Core Web Application، ورژن را برروی ASP.NET Core 3 و نوع را برروی NET Core. قرار دهید.

اضافه کردن کتابخانه سمت کلاینت SignalR

کتابخانه سمت سرور SignalR به صورت پیشفرض در فریمورک ASP.NET Core قرار دارد.

امَا کتابخانه سمت کلاینت مختص جاوا اسکریپت به صورت پیشفرض در پروژه قرار داده نمیشود.

در این آموزش، از Library Manager یا همان LibMan جهت دریافت کتابخانه سمت کلاینت از unpkg استفاده میشود.

این unpkg که یک Content Delivery Network یا همان CDN است برای ما این امکان را فراهم میکند که از هرچیزی که داخل npm یا همان Node.js Package Manager وجود دارد استفاده کنیم.

• در Solution، برروی پروژه خود راست کلیک کرده و از بخش Add گزینه ی Client-Side Library را انتخاب کنید.
• در پنجره Add Client-Side Library، ارائه دهنده یا همان Provider را برروی unpkg قرار دهید.
• در بخش Library نیز متن زیر را قرار دهید :

@microsoft/signalr@latest

• رادیو باتن را برروی Choose specific files قرار داده و در پوشه dist/browser فایل های signalr.js و signalr.min.js را علامت بزنید.
• همچنین، Target Location را نیز برروی wwwroot/js/signalr قرار دهید.

‌لیب من ( LibMan ) به طور خودکار پوشه ی wwwroot/js/signalr را ایجاد کرده و فایل های انتخاب شده را داخل آن قرار میدهد.

ایجاد کردن یک SignalR Hub

هاب ( Hub ) کلاسی است که به عنوان یک Pipeline سطح بالا، ارتباط های سرور و کلاینت را هندل میکند.

• در پوشه ی پروژه خود ( SignalRChat )، یک پوشه به نام Hubs ایجاد کنید.
• در پوشه ی 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(&quotReceiveMessage&quot, user, message);
        }
    }
}

کلاس ChatHub از کلاس Hub ارث بری کرده است. کلاس Hub کانکشن ها، گروه ها و پیغام هارا مدیریت میکند.

متد SendMessage میتواند با یک کلاینت متصل شده ارتباط برقرار کند تا یک پیام را به تمامی کلاینت ها ارسال کند.

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

کد SignalR به صورت Asynchronous است تا بتواند حداکثر مقیاس پذیری را ارائه دهد.

پیکربندی SignalR

سرور SignalR باید کانفیگ شده باشد تا بتواند ریکوئست های SignalR را به خود SignalR پاس دهد.

• کدهای زیر را به فایل Startup.cs خود اضافه کنید :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
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.AddRazorPages();
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExcepti();
            }
            else
            {
                app.UseExceptionHandler(&quot/Error&quot);
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapHub<ChatHub>(&quot/chatHub&quot);
            });
        }
    }
}

این تغییرات، SignalR را به سیستم های مسیریابی ( Routing ) و تزریق وابستگی ( Dependency Injection ) هسته ASP.NET Core اضافه میکند.

اضافه کردن کد سمت کلاینت SignalR

• محتوای Pages/Index.cshtml را با کد زیر جایگزین کنید :

@page
   <div class=&quotcontainer&quot>
        <div class=&quotrow&quot> </div>
        <div class=&quotrow&quot>
            <div class=&quotcol-2&quot>User</div>
            <div class=&quotcol-4&quot><input type=&quottext&quot id=&quotuserInput&quot /></div>
        </div>
        <div class=&quotrow&quot>
            <div class=&quotcol-2&quot>Message</div>
            <div class=&quotcol-4&quot><input type=&quottext&quot id=&quotmessageInput&quot /></div>
        </div>
        <div class=&quotrow&quot> </div>
        <div class=&quotrow&quot>
            <div class=&quotcol-6&quot>
                <input type=&quotbutton&quot id=&quotsendButton&quot value=&quotSend Message&quot />
            </div>
        </div>
    </div>
    <div class=&quotrow&quot>
        <div class=&quotcol-12&quot>
            <hr />
        </div>
    </div>
    <div class=&quotrow&quot>
        <div class=&quotcol-6&quot>
            <ul id=&quotmessagesList&quot></ul>
        </div>
    </div>
<script src=&quot~/js/signalr/dist/browser/signalr.js&quot>
<script src=&quot~/js/chat.js&quot>

این کد :

• تکست باکس هایی را برای نام و متن پیام + یک دکمه ارسال را ایجاد میکند.
• یک لیست با آیدی messageList برای نمایش پیام هایی که از SignalR Hub دریافت میشوند را ایجاد میکند.
• شامل رفرنس کدهای جاوا اسکریپت SignalR و chat.js هست که در قدم های بعدی آن را اضافه خواهیم کرد.

• در پوشه wwwroot/js، یک فایل chat.js ایجاد کرده و کد زیر را داخل آن قرار دهید :

&quotuse strict&quot

var connection = new signalR.HubConnectionBuilder().withUrl(&quot/chatHub&quot).build();

//Disable send button until connection is established
document.getElementById(&quotsendButton&quot).disabled = true;

connection.on(&quotReceiveMessage&quot, function (user, message) {
    var msg = message.replace(/&/g, &quot&&quot).replace(/</g, &quot<&quot).replace(/>/g, &quot>&quot);
    var encodedMsg = user + &quot says &quot + msg;
    var li = document.createElement(&quotli&quot);
    li.textContent = encodedMsg;
    document.getElementById(&quotmessagesList&quot)(li);
});

connection.start().then(function () {
    document.getElementById(&quotsendButton&quot).disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById(&quotsendButton&quot).addEventListener(&quotclick&quot, function (event) {
    var user = document.getElementById(&quotuserInput&quot).value;
    var message = document.getElementById(&quotmessageInput&quot).value;
    connection.invoke(&quotSendMessage&quot, user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

این کد :

• یک کانکشن را ایجاد و استارت میکند.
• به دکمه ی submit یک هندلر اضافه میکند که پیام را به هاب ( Hub ) ارسال کند.
• به آبجکت connection یک هندلر اضافه میکند که پیام ها را از هاب ( Hub ) دریافت و آنهارا به لیست اضافه کند.

اجرای برنامه

با Ctrl + F5 برنامه بدون Debugging اجرا میشود.

• لینک را از آدرس بار مرورگر خود کپی کرده و در یک مرورگر یا تب باز شده دیگر پیست کنید.
• یکی از مرورگرها را انتخاب، نام و پیام خود را وارد، سپس برروی دکمه Send Message کلیک کنید.

نام و پیام در صفحه ی دیگر به سرعت نمایش داده میشود :

اگر برنامه کار نکرد، Developer Tools مرورگر خود را باز کرده ( با F12 ) و به قسمت Console بروید. باید ارورهایی را در رابطه با کد HTML و جاوا اسکریپت خود مشاهده کنید. برای مثال، ممکن است فایل signalr.js را در یک پوشه دیگر قرار داده باشید. در این حالت به آن فایل رفرنسی داده نخواهد شد و شما ارور 404 را در Console مرورگر خود مشاهده خواهید کرد.

اگر شما در مرورگر کروم خود ارور ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY را مشاهده کردید، این دستورات را در Command Prompt خود اجرا کنید تا Development Certificate شما بروز شود.

dotnet dev-certs https --clean
dotnet dev-certs https --trust

ترجمه مقاله از صفر تا صد با خودم بوده، اگر قصد کپی مقاله رو دارید منبع رو هم ذکر کنید؛ ممنون :)

مشاهده مقاله به زبان انگلیسی در وبسایت رسمی مایکروسافت