a

ABLY مقالات و مطالب مجموعه

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

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

بسم الله الرحمن الرحیم

 

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

ساخت یک Timer سمت سرور با SignalR

بخش اول
بخش دوم

بخش سوم

بخش چهارم

بخش پنجم- شروع ایجاد پروژه SignalR

بخش ششم - مروری بر مفاهیم SignalR

بخش هفتم- ایجاد پروژه Chat با SignalR

بخش هشتم - ایجاد پروژه Chat با SignalR در ASP.NET MVC

بخش نهم- ساخت یک Timer سمت سرور با SignalR

بخش دهم - آموزش ساخت یک پروژه SignalR با SQLDepedency در ASP.NET MVC

 

 

می خواهیم یک Timer سمت سرور با SignalR ایجاد و آن را در کلاینت نمایش دهیم.

 

آموزش SignalR

 

خوب بدون مقدمه به سراغ طراحی این مثال می رویم.

 

 

 

 

 

 

بسم الله الرحمن الرحیم

 

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

ساخت یک Timer سمت سرور با SignalR

بخش اول
بخش دوم

بخش سوم

بخش چهارم

بخش پنجم- شروع ایجاد پروژه SignalR

بخش ششم - مروری بر مفاهیم SignalR

بخش هفتم- ایجاد پروژه Chat با SignalR

بخش هشتم - ایجاد پروژه Chat با SignalR در ASP.NET MVC

بخش نهم- ساخت یک Timer سمت سرور با SignalR

بخش دهم - آموزش ساخت یک پروژه SignalR با SQLDepedency در ASP.NET MVC

 

 

می خواهیم یک Timer سمت سرور با SignalR ایجاد و آن را در کلاینت نمایش دهیم.

 

آموزش 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


در انتهای این کلاس ما 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 می کنم:
 

آموزش SignalR


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



آموزش SignalR



 

نظرات

  • Hannah Martinez
    reza
    دو شنبه 11 دی 1278 0:00

    سلام 

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

    ممنون

  • Hannah Martinez
    s,.m
    دو شنبه 11 دی 1278 0:00

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

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number