اشتراکها
//... .AddOpenIdConnect("oidc", options => { // ... options.Events = new OpenIdConnectEvents { OnTokenValidated = async ctx => { // how to access claims var user = ctx.Principal; var email = user.Claims.FirstOrDefault(claim => claim.Type == "email").Value; // how to access services var db = ctx.HttpContext.RequestServices.GetRequiredService<MyDb>(); // .... } }; });
var encryptedConverter = new ValueConverter<string, string>( convertToProviderExpression: v => v, // How to save it: Do nothing --> Save it normally in the DB convertFromProviderExpression: v => new string(v.Reverse().ToArray()) // How to report it: Show it encrypted to the user );
در ادامه میخواهیم مثالی را که در این مطلب مورد بررسی قرار گرفت، به صورتی تغییر دهیم که با ثبت یک آیتم جدید درون دیتابیس، یک notification، به تمامی کاربران متصل به هاب ارسال شود. همچنین با کلیک بر روی Notification سطر جدید نیز بلافاصله نمایش داده شود:
کار با این کتابخانه خیلی ساده است؛ کافی است فایلهای js و css آن را به فایل layout اضافه کرده و به این صورت از آن استفاده کنیم:
اگر به فایل js این کتابخانه مراجعه کنید، میتوانید مقادیر پیشفرض آن را برای نمایش یک پیام مشاهده کنید. برای سفارشیسازی آن نیز میتوانید به این صورت عمل کنید:
اکنون برای نمایش این نوع پیامها در زمان اتصال به هاب (در واقع در زمان ثیت یک رکورد جدید) نیاز به ارسال پارامتر خاصی به سرور (از سمت کلاینت) نمیباشد. تنها باید کدهای سمت سرور یعنی هاب را به گونهایی تغییر دهیم تا به محض فراخوانی SendNotification، آخرین رکورد ثبت شده در دیتابیس را به تمامی کلاینتهای متصل به هاب ارسال کند:
در سمت کلاینت نیز کدها همانند مثال قبل هستند؛ با این تفاوت که در متد سمت کلاینت باید اطلاعات ارسال شده از سمت سرور را با نمایش یک notification به کاربران اطلاع دهیم:
همانطور که مشاهده میکنید از onClick برای toastr استفاده کردهایم. با این callback گفتهایم که اگر بر روی پیام کلیک شد، اطلاعات را به صورت یک سطر جدید به جدول اضافه کن:
مقادیر به صورت یک شیء جاوااسکریپتی برگردانده خواهند شد:
که توسط data میتوانیم به هر کدام از فیلدها، جهت نمایش در خروجی، دسترسی داشته باشیم.
دریافت سورس مثال جاری: ShowAlertSignalR
در این مثال برای نمایش پیام به صورت notification، از کتابخانه toastr استفاده میکنیم که از طریق nuget میتوانید آن را به پروژه اضافه کنید:
PM> Install-Package toastr
toastr.info("نمایش یک پیام - info"); toastr.success("نمایش یک پیام - success"); toastr.error("نمایش یک پیام - error"); toastr.warning("نمایش یک پیام - warning");
دستورات فوق خروجیهای زیر را نمایش میدهد:
برای پیامهای فوق نیز میتوانید عنوانی را انتخاب کنید:
toastr.success("نمایش یک پیام - success", "عنوان");
toastr.options = { tapToDismiss: true, toastClass: 'toast', containerId: 'toast-container', debug: false, showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery showDuration: 300, showEasing: 'swing', //swing and linear are built into jQuery onShown: undefined, hideMethod: 'fadeOut', hideDuration: 1000, hideEasing: 'swing', onHidden: undefined, extendedTimeOut: 1000, iconClasses: { error: 'toast-error', info: 'toast-info', success: 'toast-success', warning: 'toast-warning' }, iconClass: 'toast-info', positionClass: 'toast-top-right', timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky titleClass: 'toast-title', messageClass: 'toast-message', target: 'body', closeHtml: '<button>×</button>', newestOnTop: true, preventDuplicates: false, progressBar: false };
public class NotificationHub : Hub { private readonly IProductService _productService; public NotificationHub(IProductService productService) { _productService = productService; } public void SendNotification() { Clients.Others.ShowNotification(_productService.GetLastProduct()); } }
var notify = $.connection.notificationHub; notify.client.showNotification = function (data) { toastr.info("رکورد جدیدی ثبت گردید جهت نمایش اینجا کلیک کنید"); }; $.connection.hub.start().done(function () { @{ if (ViewBag.NotifyUsers) { <text>notify.server.sendNotification();</text> } } });
تا اینجا همانند مثال قبلی عمل کردیم. یعنی به جای نمایش یک alert بوتاسترپ، از کتابخانه toastr استفاده گردید. در مثال قبلی کاربر برای دیدن تغییرات میبایستی یکبار صفحه را ریفرش کند، اکنون میخواهیم کاربر بعد از کلیک بر روی پیام، بلافاصله سطر جدید را نیز مشاهده کند:
var positionClasses = { topRight: 'toast-top-right', bottomRight: 'toast-bottom-right', bottomLeft: 'toast-bottom-left', topLeft: 'toast-top-left', topCenter: 'toast-top-center', bottomCenter: 'toast-bottom-center' }; var notify = $.connection.notificationHub; notify.client.showNotification = function (data) { toastr.options = { showDuration: 300, positionClass: positionClasses.bottomRight, onclick: function () { $('#table tr:last').after("<tr>" + "<td>" + data.Title + "</td>" + "<td>" + data.Description + "</td>" + "<td>" + data.Price + "</td>" + "<td>" + data.Category + "</td>" + "<td> </td>" + "</tr>"); } }; toastr.info("رکورد جدیدی ثبت گردید جهت نمایش اینجا کلیک کنید"); }; $.connection.hub.start().done(function () { @{ if (ViewBag.NotifyUsers) { <text>notify.server.sendNotification();</text> } } });
onclick: function () { $('#table tr:last').after("<tr>" + "<td>" + data.Title + "</td>" + "<td>" + data.Description + "</td>" + "<td>" + data.Price + "</td>" + "<td>" + data.Category + "</td>" + "<td> </td>" + "</tr>"); }
data {Id: 12, Title: "Item1", Description: "Des", Price: 100000, Category: 0}
How Google handles JavaScript throughout the indexing process
A research to demystify Google's rendering through empirical evidence.