Öğretici: Şirket İçinde SignalR Barındırma

Tarafından Patrick Fletcher

Uyarı

Bu belgeler SignalR'nin en son sürümüne yönelik değildir. ASP.NET Core SignalR'ye göz atın.

Bu öğreticide şirket içinde barındırılan bir SignalR 2 sunucusunun nasıl oluşturulacağı ve javaScript istemcisiyle nasıl bağlanacağı gösterilmektedir.

Öğreticide kullanılan yazılım sürümleri

Bu öğreticiyle Visual Studio 2012 kullanma

Visual Studio 2012'yi bu öğreticiyle kullanmak için aşağıdakileri yapın:

  • Paket Yöneticinizi en son sürüme güncelleştirin.
  • Web Platformu Yükleyicisi'ni yükleyin.
  • Web Platformu Yükleyicisi'nde Visual Studio 2012 için ASP.NET and Web Tools 2013.1'i arayın ve yükleyin. Bu işlem Hub gibi SignalR sınıfları için Visual Studio şablonlarını yükler.
  • Bazı şablonlar ( OWIN Başlangıç Sınıfı gibi) kullanılamaz; bunun yerine bir Sınıf dosyası kullanın.

Sorular ve yorumlar

Lütfen bu öğreticiyi nasıl beğendiğiniz ve sayfanın altındaki yorumlarda neleri geliştirebileceğimiz hakkında geri bildirim bırakın. Öğreticiyle doğrudan ilgili olmayan sorularınız varsa bunları ASP.NET SignalR forumunu veya StackOverflow.com gönderebilirsiniz.

Genel Bakış

SignalR sunucusu genellikle IIS'deki bir ASP.NET uygulamasında barındırılır, ancak kendi kendine konak kitaplığı kullanılarak kendi kendine barındırılabilir (konsol uygulaması veya Windows hizmeti gibi). Tüm SignalR 2 gibi bu kitaplık da OWIN (.NET için Açık Web Arabirimi) üzerine kurulmuştur. OWIN, .NET web sunucuları ve web uygulamaları arasında bir soyutlama tanımlar. OWIN, web uygulamasını sunucudan ayrıştırarak OWIN'in iis dışında kendi işleminizde bir web uygulaması barındırmak için ideal olmasını sağlar.

IIS'de barındırmama nedenleri şunlardır:

  • IIS'nin kullanılamadığı veya istenmediği ortamlar, örneğin IIS'siz mevcut bir sunucu grubu.
  • IIS'nin performans yükünden kaçınılmalıdır.
  • SignalR işlevselliği, Bir Windows Hizmeti, Azure çalışan rolü veya başka bir işlemde çalışan mevcut bir uygulamaya eklenecektir.

Performans nedenleriyle bir çözüm kendi kendine konak olarak geliştiriliyorsa, performans avantajını belirlemek için IIS'de barındırılan uygulamayı test etmek de önerilir.

Bu öğretici aşağıdaki bölümleri içerir:

Sunucu oluşturma

Bu öğreticide, konsol uygulamasında barındırılan bir sunucu oluşturacaksınız, ancak sunucu Windows hizmeti veya Azure çalışan rolü gibi herhangi bir işlemde barındırılabilir. Windows Hizmetinde SignalR sunucusu barındırmaya yönelik örnek kod için bkz. Windows Hizmetinde SignalR'yi Kendi Kendine Barındırma.

  1. Yönetici ayrıcalıklarıyla Visual Studio 2013 açın. Dosya, Yeni Proje'yi seçin. Şablonlar bölmesindeki Visual C# düğümü altında Windows'a tıklayın ve konsol uygulaması şablonunu seçin. Yeni projeyi "SignalRSelfHost" olarak adlandırın ve Tamam'a tıklayın.

    Windows seçeneği, Konsol Uygulaması şablonu ve Ad alanının vurgulandığı Yeni Proje ekranının ekran görüntüsü.

  2. Araçlar> NuGet Paket Yöneticisi Paket Yöneticisi Konsolu'nu seçerekNuGet paket yöneticisi>konsolunu açın.

  3. Paket yöneticisi konsolunda aşağıdaki komutu girin:

    Install-Package Microsoft.AspNet.SignalR.SelfHost
    

    Bu komut SignalR 2 Self-Host kitaplıklarını projeye ekler.

  4. Paket yöneticisi konsolunda aşağıdaki komutu girin:

    Install-Package Microsoft.Owin.Cors
    

    Bu komut, Microsoft.Owin.Cors kitaplığını projeye ekler. Bu kitaplık, SignalR ve farklı etki alanlarında bir web sayfası istemcisi barındıran uygulamalar için gerekli olan etki alanları arası destek için kullanılacaktır. SignalR sunucusunu ve web istemcisini farklı bağlantı noktalarında barındıracağınızdan, bu bileşenler arasındaki iletişim için etki alanları arasının etkinleştirilmesi gerektiği anlamına gelir.

  5. Program.cs dosyasının içeriğini aşağıdaki kodla değiştirin.

    using System;
    using Microsoft.AspNet.SignalR;
    using Microsoft.Owin.Hosting;
    using Owin;
    using Microsoft.Owin.Cors;
    
    namespace SignalRSelfHost
    {
        class Program
        {
            static void Main(string[] args)
            {
                // This will *ONLY* bind to localhost, if you want to bind to all addresses
                // use http://*:8080 to bind to all addresses. 
                // See http://msdn.microsoft.com/library/system.net.httplistener.aspx 
                // for more information.
                string url = "http://localhost:8080";
                using (WebApp.Start(url))
                {
                    Console.WriteLine("Server running on {0}", url);
                    Console.ReadLine();
                }
            }
        }
        class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.UseCors(CorsOptions.AllowAll);
                app.MapSignalR();
            }
        }
        public class MyHub : Hub
        {
            public void Send(string name, string message)
            {
                Clients.All.addMessage(name, message);
            }
        }
    }
    

    Yukarıdaki kod üç sınıf içerir:

    • Birincil yürütme yolunu tanımlayan Main yöntemi de dahil olmak üzere program. Bu yöntemde, belirtilen URL'de (http://localhost:8080 ) Başlangıç türünde bir web uygulaması başlatılır. Uç noktada güvenlik gerekiyorsa SSL uygulanabilir. Daha fazla bilgi için bkz . Nasıl yapılır: SSL Sertifikası ile Bağlantı Noktası Yapılandırma .
    • Başlangıç, SignalR sunucusu yapılandırmasını içeren sınıf (bu öğreticinin kullandığı tek yapılandırma çağrısıdır UseCors) ve çağrısı MapSignalRise projedeki hub nesneleri için yollar oluşturur.
    • Uygulamanın istemcilere sağlayacağı SignalR Hub sınıfı olan MyHub. Bu sınıfın, istemcilerin diğer tüm bağlı istemcilere bir ileti yayınlamak için çağıracağı Send adlı tek bir yöntemi vardır.
  6. Uygulamayı derleyin ve çalıştırın. Sunucunun çalıştırılan adresi bir konsol penceresinde gösterilmelidir.

    Konsol penceresinde çalışan sunucunun ekran görüntüsü.

  7. Yürütme özel durumuyla System.Reflection.TargetInvocationException was unhandledbaşarısız olursa, Visual Studio'yu yönetici ayrıcalıklarıyla yeniden başlatmanız gerekir.

  8. Sonraki bölüme geçmeden önce uygulamayı durdurun.

JavaScript istemcisiyle sunucuya erişme

Bu bölümde, Başlarken öğreticisindeki aynı JavaScript istemcisini kullanacaksınız. İstemcide yalnızca bir değişiklik yapacağız; bu da hub URL'sini açıkça tanımlamaktır. Şirket içinde barındırılan bir uygulamada, sunucunun bağlantı URL'si ile aynı adreste olması gerekmeyebilir (ters proxy'ler ve yük dengeleyiciler nedeniyle), bu nedenle URL'nin açıkça tanımlanması gerekir.

  1. Çözüm Gezgini'da çözüme sağ tıklayın ve Ekle, Yeni Proje'yi seçin. Web düğümünü seçin ve ASP.NET Web Uygulaması şablonunu seçin. Projeyi "JavascriptClient" olarak adlandırın ve Tamam'a tıklayın.

    Web düğümü, S P noktaLı NET Web Uygulaması şablonu ve Ad alanının vurgulandığı Yeni Proje Ekle ekranının ekran görüntüsü.

  2. Boş şablonu seçin ve kalan seçenekleri seçili bırakın. Proje Oluştur'u seçin.

    Boş şablonun seçildiği ve Proje Oluştur seçeneğinin vurgulandığı Yeni A S P nokta NET Projesi ekranının ekran görüntüsü.

  3. Paket yöneticisi konsolunda, Varsayılan proje açılan listesinde "JavascriptClient" projesini seçin ve aşağıdaki komutu yürütün:

    Install-Package Microsoft.AspNet.SignalR.JS
    

    Bu komut, istemcide ihtiyacınız olacak SignalR ve JQuery kitaplıklarını yükler.

  4. Projenize sağ tıklayın ve Ekle, Yeni Öğe'yi seçin. Web düğümünü seçin ve HTML Sayfası'nı seçin. sayfayı Default.htmlolarak adlandırın.

    Web seçeneği, H T M L Sayfa şablonu ve Ad alanının vurgulandığı Yeni Öğe Ekle ekranının ekran görüntüsü.

  5. Yeni HTML sayfasının içeriğini aşağıdaki kodla değiştirin. Buradaki betik başvurularının projenin Betikler klasöründeki betiklerle eşleştiğini doğrulayın.

    <!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="http://localhost:8080/signalr/hubs"></script>
        <!--Add script to update the page and send messages.-->
        <script type="text/javascript">
            $(function () {
            //Set the hubs URL for the connection
                $.connection.hub.url = "http://localhost:8080/signalr";
                
                // Declare a proxy to reference the hub.
                var chat = $.connection.myHub;
                
                // Create a function that the hub can call to broadcast messages.
                chat.client.addMessage = 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>
    

    Aşağıdaki kod (yukarıdaki kod örneğinde vurgulanmış), Yıldız Alma öğreticisinde kullanılan istemciye yaptığınız eklemedir (kodu SignalR sürüm 2 beta'ya yükseltmeye ek olarak). Bu kod satırı, sunucudaki SignalR için temel bağlantı URL'sini açıkça ayarlar.

    //Set the hubs URL for the connection
    $.connection.hub.url = "http://localhost:8080/signalr";
    
  6. Çözüme sağ tıklayın ve Başlangıç Projelerini Ayarla... öğesini seçin. Birden çok başlangıç projesi radyo düğmesini seçin ve her iki projenin EyleminiBaşlat olarak ayarlayın.

    Birden çok başlangıç projesi radyo düğmesi ve Başlat Eylemi girdilerinin vurgulandığı Çözüm Özellik Sayfaları ekranının ekran görüntüsü.

  7. "Default.html" öğesine sağ tıklayın ve Başlangıç Sayfası Olarak Ayarla'yı seçin.

  8. Uygulamayı çalıştırın. Sunucu ve sayfa başlatılır. Sayfa sunucu başlatılmadan önce yüklenirse web sayfasını yeniden yüklemeniz (veya hata ayıklayıcıda Devam'ı seçmeniz) gerekebilir.

  9. İstendiğinde tarayıcıda bir kullanıcı adı girin. Sayfanın URL'sini başka bir tarayıcı sekmesine veya penceresine kopyalayın ve farklı bir kullanıcı adı sağlayın. Başlarken öğreticisinde olduğu gibi bir tarayıcı bölmesinden diğerine ileti gönderebileceksiniz.