SignalR چیست؟

SignalR کتابخانه ای برای توسعه دهندگان ASP.Net است که بسادگی قابلیت real-time بودن را به برنامه اضافه میکند. توابع تحت وب real-time در SignalR این توانایی را به سرورها میدهد تا بجای اینکه منتطر درخواست از سمت کلاینت ها باشد خود بطور مستقل اینکار را انجام دهد. راه کلاسیک برای انجام چنین کارهایی این بود که، باید سرور در فاصله زمانی منظمی ، برای گرفتن وضعیت برنامه ، فراخوانی شد که برای اینکار شما باید سرور را مرتبا فراخوانی کنید. اما SignalR یک API ساده برای ایجاد ارتباط راه دور سرور با کلاینت فراهم میکند که با فراخوانی رویه هایی، توابع JavaScript را روی مرورگر سمت کلاینت صدا میزند که این فراخوانی درواقع از سمت سرور و با کدهای .Net انجام میشود.

مثال های مانند چت روم، داشبوردهای مدیریتی و مانیتورینگ از جمله مواردی هستند میتوانند از این ویژکی استفاده کنند.

همچنین توانایی کار با انواع کاملا جدیدی از برنامه های وب مانند بازی های آنلاین که نیاز به بروزرسانی در بازه های زمانی کوتاه را دارند نیز از ویژگی های SignalR می باشد.

پس میتوان نتیجه گرفت که با SignalR، سرور می تواند متدهای JavaScript را به هر زمان که نیاز به بروزرسانی باشد به صورت مستقل سمت Client ها فراخوانی کند. برای اینکار از کتابخانه ای برای مدیریت ارتباطها استفاده میشود که به صورت پیش فرض از WebSocket استفاده شده است ،در صورتی که امکان دسترسی به WebSocket در مرورگر میسر نباشد ،به صورت خودکار از انواع Connectionهای قدیمی تر استفاده می کند. بنابراین ، اگر می خواهید برنامه ای بنویسید که نیاز به تعامل بین کاربران دارد SignalR از بهتزین گزینه ها خواهد بود.

حالا یک مثال ساده از SignalR را در Visual Studio 2013 برای پیاده سازی یک چت روم با هم پیش میبریم

در Visual studio از منوی فایل و New Project گزینه ASP.NET Web Application را انتخاب میکنیم

در پنجره New ASP.NET Project گزینه Empty را انتخاب میکنیم

در پنجره Solution Explorer بر روی پروژه کلیک راست میکنیم و سپس Add | SignalR Hub Class (v2)

نام کلاس را ChatHub.cs میگزاریم و انرا به پروژه اضافه میکنیم. در این مرحله کلاس ChatHub.cs ایجاد شد و یک مجموعه از Script Files و Assembly refrence که SignalR را پیشتیبانی میکنند به پروژه اضافه شد.

نکته: شما همچنین میوتنید SignalR را از طریق طی کردن این مسیر

Tools | Library Package Manager | Package Manager Console

و سپس اجرای دستور زیر اضافه کنید

install-package Microsoft.AspNet.SignalR

نکته: اگر از Visual Staudio 2012 استفاده میکنید در این صورت شما به گزینه SignalR Hub Class (v2) دسترسی نخواهید داشت و بجای آن باید یک کلاس معمولی با نام ChatHub به پروژه اضافه کنید.

در پنجره Solution Explorer گره Scripts را باز کنید. کتابخانه های مربوط به JQuery و SignalR را مشاهده میکنید.

کد داخل کلاس ChatHub را با کد زیر جایگزین کنید

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

در پنجره Solution Explorer روی پروجره کلیک راست کنید و گزینه زیر را انتحاب کنید

Add | OWIN Startup Class

و نام کلاس جدید را Startup بگزارید

نکته: اگر از Visual Staudio 2012 استفاده میکنید در این صورت شما به گزینه OWIN Startup Class دسترسی نخواهید داشت و بجای آن باید یک کلاس معمولی با نام Startup به پروژه اضافه کنید.

کدهای داخل کلاس Startup را با کدهای زیر جایگزین کنید

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

در پنجره Solution Explorer روی پروجره کلیک راست کنید و گزینه زیر را انتحاب کنید

Add | HTML Page

و نام صفحه جدید را index.html بگزارید. سپس بر روی آن کلیک راست کنید و Set as Start Page را انتخاب نمایید.

حالا کد زیر را جایگزین کدهای ان کنید

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

حالا پروژه را ذخیره کنید و انرا اجرا نمایید.

پنجره ای باز میشود که یک نام میخواد نام را وارد نمایید

حالا آدرس موجود در آدرس بار را کپی و در یک یا چند مرورگر دیگر اجرا کنید و هر بار یک نام منحصر به فرد وارد نمایید

در هر مرورگر هر پیغامی که بنویسید و دکمه Send رابزنید بلافاصله در مرورگر های دیگر دیده خواهد شد

اگر در زمان اجرا پروژه در پنجره Solution Explorer گره Script Documents را بررسی کنید فایلی به نام hubs خواهید دید که کتابخانه SignalR آنرا در زمان اجرا ایجاد کرده است این فایل ارتباطات بین اسکریپت های Jquery و کدهای سمت سرور را مدیریت میکند.

فایل کامل این پروژه ضمیمه این مقاله میباشد

(31) نفر این پست را پسندیده اند

مرتضی جنگجو

برنامه نویس fullstack با بیش از 14 سال سابقه کار و همکاری در توسعه و پیاده سازی نرم افزارهای تحت وب با تکنولوژی Net. در شرکتهای بزرگ ایرانی، هلندی، فنلاندی و ترکیه

شبکه های اجتماعی نویسنده