پروژه SignalR به زبان سی شارپ سرور و کلاینت

کاربردهای 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>

مرحله چهارم : کانفیک (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>