دوره آموزشی SignalR به زبان فارسی
بسم الله الرحمن الرحیم
دوره آموزشی SignalR به زبان فارسی
ساخت یک Timer سمت سرور با SignalR
بخش پنجم- شروع ایجاد پروژه SignalR
بخش ششم - مروری بر مفاهیم SignalR
بخش هفتم- ایجاد پروژه Chat با SignalR
بخش هشتم - ایجاد پروژه Chat با SignalR در ASP.NET MVC
بخش نهم- ساخت یک Timer سمت سرور با SignalR
بخش دهم - آموزش ساخت یک پروژه SignalR با SQLDepedency در ASP.NET MVC
می خواهیم یک Timer سمت سرور با 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 می کنم:
خروجی برنامه به صورت زیر است:
نظرات (۱)
