دوره آموزشی SignalR به زبان فارسی

متد HostingEnvironment.RegisterObject می تواند برای ثبت کردن یک نمونه (instance) از یک شی که می خواهیم lifetime توسط hosting environment مدریت شود، مورد استفاده قرار گیرد.
برای register کردن یک شی، آن شی باید IRegisteredObject پیاده سازی کند.
این interface یک متد Stop تعریف می کند، و فراخوانی ها را دریافت می کند تا زمانی که ASP.NET نیاز دارد، app domain را خاموش کند.

بنابراین در application start ما می توانیم یک شی از کلاس ایجاد کنیم و آن را نیز register کنیم.

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);
 
    HostingEnvironment.RegisterObject(new BackgroundUptimeServerTimer());
}

ساخت یک SignalR Hub برای ارسال پیام از سمت سرور به کلاینت

ما یک SignalR hub و صفحه HTML ایجاد می کنیم، نام Hub خود را UptimeHub قرار می دهیم.

public class UptimeHub : Hub
{
}

ما می توانیم از طریق فراخوانی یک متد جاوا اسکریپتی به نام internetUpTime در صفحه HTML به سرور دسترسی پیدا کنیم و در کد کلاینت مربوطه زمانی را که سرور به عنوان Timer برای ما ارسال کرده است، نمایش دهیم.

در زیر کد کامل صفحه HTML نمایش داده شده است.
“hub.client.internetUpTime = function (time) …” این متد با ازای هر اجرا شدن Timer در سمت سرور، در کلاینت اجرا می شود.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Internet Uptime</title>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
    <style>
        body {
            background-color: black;
            color: white;
            margin: 0;
            padding: 0;
        }
         #message {
             font-family: 'Josefin Sans', sans-serif;
             font-size: 7vh;
             text-align: center;
             height: 50vh;
             margin-top: 24vh;
         }
    </style>
</head>
<body>  
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
    <script src="/signalr/hubs"></script>
         
    <script>
        $(function() {
            var hub = $.connection.uptimeHub;
 
            $.connection.hub.start();
 
            hub.client.internetUpTime = function (time) {
 
                $('#message').text('');
 
                var arr = time.split(",");
 
                for (var i = 0; i < arr.length; i++) {
                    $('#message').append(arr[i]);
 
                    if (i < arr.length -1) {
                        $('#message').append('<br/>');
                    }
                }
 
                 
            };
        });
    </script>
 
    <div id="message">please wait...</div>
</body>
</html>

در صفحه HTML باید reference به “/signalr/hubs” بدهید.

کد متد “internetUpTime” یک string ایجاد شده از سمت سرور که شامل اطلاعاتی شبیه “2 weeks, 3 days, 4 hours” است را به همراه تگ <br/> برای جدا کردن این خطوط از یکدیگر در صفحه HTML در یک تگ DIV با نام “message” نمایش می دهد.

برای قرار گرفتن اطلاعات در مرکز صفحه از لحاظ ارتفاع می توانید این مقاله را مطالعه کنید.

ثبت کردن SignalR Hub

برای ثبت کردن UptimeHub در Visual Studio 2013 ما می توانیم یک “OWIN Startup class” را مانند تصویر زیر به پروژه خود اضافه کنیم.

در انتهای این کلاس ما SignalR hub خود را ثبت می کنیم.

using Microsoft.Owin;
using Owin;
 
[assembly: OwinStartup(typeof(Up.Hubs.Startup))]
 
namespace Up.Hubs
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

ساخت یک Humanizer Timespan

کتابخانه Humanizer به شما اجازه می دهد یک برنامه را بر اساس human-feeling (احساس انسانی) ایجاد کنید. در کد تایمر نهایی که ما می خواهیم در یک لحظه چیزی را که ما استفاده کنیم در چندین روش مشاهده کنیم.
در ابتدا باید نحوه استفاده از TimeSpan را بدانیم. برای ساخت TimeSpan به صورت2 second ، کافی است فقط کد زیر را بنویسیم

2.Seconds()

Second برای فراخوانی متد Humanize در یک TimeSpan برای دریافت یک رشته شبیه “2 weeks, 3 days, 4 hours” است. هنگامی که ما این متد را فراخوانی می کنیم، ما می توانیم واحد زمانی خود را مشخص کنیم، به صورت پیش فرض ما فقط بزرگترین را دریافت می کنیم، مثل: “2 weeks”
ما همچنین می توانیم یک DateTime کامل با نوشتن کد زیر ایجاد می کنیم.

 On.October.The29th.In(1969);

پیاده سازی کلاس IRegisteredObject BackgroundUptimeServerTimer

کد کامل کلاس به صورت زیر است.
در سازنده کلاس ما یک reference به UptimeHub و Start کردن background timer دریافت می کنیم.

در هر ثانیه متد BroadcastUptimeToClients فراخوانی می شود تا یک humanized string ایجاد کند و آن را به تمامی کلاینت ها ارسال کند.

public class BackgroundUptimeServerTimer : IRegisteredObject
{
    private readonly DateTime _internetBirthDate = On.October.The29th.In(1969);
    private readonly IHubContext _uptimeHub;
    private Timer _timer;
 
 
    public BackgroundUptimeServerTimer()
    {
        _uptimeHub = GlobalHost.ConnectionManager.GetHubContext<UptimeHub>();
 
        StartTimer();
    }
    private void StartTimer()
    {
        var delayStartby = 2.Seconds();
        var repeatEvery = 1.Seconds();
 
        _timer = new Timer(BroadcastUptimeToClients, null, delayStartby, repeatEvery);
    }
    private void BroadcastUptimeToClients(object state)
    {
        TimeSpan uptime = DateTime.Now - _internetBirthDate;
 
        _uptimeHub.Clients.All.internetUpTime(uptime.Humanize(5));
    }
     
    public void Stop(bool immediate)
    {
        _timer.Dispose();
 
        HostingEnvironment.UnregisterObject(this);
    }
}

من قبلا یک وب سایت در Azure ایجاد کرده ام، پس حالا به سادگی سایت خود را برای آن publish می کنم:

خروجی برنامه به صورت زیر است:

نظرات

reza

دو شنبه 11 دی 1278 - 0:00

سلام
ممنون از آموزشهاتون و همچنین وقتی که برای ارائه این مطالب میزارین
میشه یه توضیحی در مورد این کلاس BackgroundServerUptime بدین و چه نیازی به این کلاس هست؟

ممنون
s,.m

دو شنبه 11 دی 1278 - 0:00

سلام ، اقا زحمت کشیدی مطلب رو ترجمه کردی دمت گرم ، فقط ی لطفی هم بکن توضیحی در مورد application-start بده تو این کلاس کد ها رو می نویسم ولی خطای رفرنس میده(زیر خط قرمز) ، کدوم فضاهای نام رو باید اضافه کنم . و این کدهای ساخت یک Humanizer Timespan رو کجای برنامه باید نوشت ، دو خط بی سر و ته ! مرسی