آموزش signalr در asp net core

امروز در سلسله مقالات آموزش asp.net core دانشجویار به بررسی signalr در asp net core جزییات و کاربرد آن پرداخته ایم.

در ابتدای آموزش signalr در asp net core باید بگوییم SignalR یک کتابخانه جدید برای توسعه‌دهندگان ASP.NET است که توسعه وب را در زمان واقعی (Real Time) آسان می‌کند. همچنین SignalR اجازه ارتباط دو طرفه بین سرور و سرویس گیرنده را نیز فراهم می‌کند.

به این ترتیب، سرورها دیتا را به مشتری (client) متصل کرده و به محض دسترسی، در دسترس قرار می‌دهد. گفتنی است SignalR از Web Sockets پشتیبانی کرده و سایر تکنیک‌های سازگار با مرورگر را از دست نمی‌دهد. SignalR شامل API ها برای مدیریت اتصال است. connect و disconnect شدن، گروه‌بندی اتصالات (grouping connections) و مجوز (authorization) از جمله آن‌ها هستند.

آموزش پیشنهادی

آموزش Asp.Net Core 6 | پروژه ساخت وب اپلیکیشن هتل

• جزییات ساخت یک وب اپلیکیشن و نحوه ارتباط با دیتا بیس
• اصطلاحات موجود در برنامه نویسی با #C و فریم ورک Core
• مسائل پایه برای ساخت استاندارد یک وب اپلیکیشن
• چگونگی کارکرد هر بخش به صورت مجزا و کاربرد هر کدام
• ابزار های موجود در فریم ورک Core

مشاهده دوره

کاربردهای SignalR

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

استفاده از signalr در asp net core با استفاده از دیتابیس

اگر بخواهیم در یک سیستم و پس از ثبت اطلاعات در دیتابیس، پیامی ارسال کنیم، مراحل آن به شرح زیر است:

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

در اولین قدم باید کتابخانه‌های جاوااسکریپتی سیگنال آر(R) را به پروژه اضافه کنید. بنابراین، در Visual Studio با کلیک راست روی نام پروژه و انتخاب گزینه Add، روی گزینه Client-Side Library کلیک کنید.

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

آموزش signalr در asp net core بسیار ساده است، حالا کافی است در قسمت‌های مشخص‌شده، مقادیر گفته شده را اضافه کنید:

- Provider: unpkg
- Library: @microsoft/signalr@latest
- Choose specific filese:
Signalr.js + signalr.min.js
- Target Location: wwwroot/js/signalr

حالا پس از چک کردن اتصال به اینترنت، دکمه Install را بزنید.

مرحله سوم: لینک فایل‌ها در 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>

آموزش signalr در asp net core: مرحله چهارم: کانفیک (ConfigureServices)

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

services.AddSignalR();

حالا سراغ متد Configure رفته و در اینجا هم مسیر مربوط به SignalR را تنظیم می‌کنید:

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

در کدی که مشاهده می کنید، کامنت SignalR مرتبط با تنظیم مسیر آن است. برای اجرای متد MapHub هم نیاز به یک Hub است که کلاس معرفی شده برای آن، LetterHub نام دارد. این کلاس در مرحله پنجم ایجاد می‌شود. برای ارتباط با کلاینت به یک نام نیاز داریم که آن را به صورت دلخواه myownHub انتخاب کرده‌ایم.

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

همانطور که گفته شد، در این مرحله از آموزش signalr در asp net core، به کلاس 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 می‌شناسیم. یوزر آیدی همانطور که از نام آن پیدا است، آیدی کاربری است که پیام برای او ارسال می‌شود.

نکته قابل توجه در این مرحله، دقت به کامنت‌شدن خط اول در ۲ سطر کد بدنه متد است. خط اول برای اطلاع‌رسانی به تمامی کاربران است.

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");
}
}

مرحله ششم: ارتباط با Hub

تا این قسمت از آموزش signalr در asp net core، توانستیم 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 را هم ارسال کنید، می‌توانید مقادیر را از طریق جاوا اسکریپت دریافت و به هاب ارسال کنید.

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

تا اینجا همه‌چیز آماده شده است. در حال حاضر باید پیام برای کلاینت یا کاربر دوم قابل دریافت شود. برای این قسمت، باید در View مورد نظرتان برای نمایش پیام، کد زیر را بنویسید:

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

سخن آخر

از پیش‌نیازهای این کار، یعنی ویژوال استودیو 2019 با ابزار مخصوص توسعه وب (ASP.NET and web development workload) و نسخه .Net Core SDK 3 یا بالاتر غافل نشوید.

با ثبت نظرات، پیشنهادات، انتقاد ها و همچنین سوال های خود در بخش نظرات سایت ما را در راستای بهبود کیفیت خدماتمان، یاری نمایید.