Öğretici: SignalR 1.x ve MVC 4 ile Çalışmaya Başlama

Makale
07/13/2023

Patrick Fletcher, Tim Teebken tarafından

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, gerçek zamanlı bir sohbet uygulaması oluşturmak için ASP.NET SignalR'nin nasıl kullanılacağı gösterilmektedir. SignalR'yi bir MVC 4 uygulamasına ekleyecek ve ileti gönderip görüntülemek için bir sohbet görünümü oluşturacaksınız.

Genel Bakış

Bu öğretici, ASP.NET SignalR ve ASP.NET MVC 4 ile gerçek zamanlı web uygulaması geliştirmeyi tanıtır. Öğretici, SignalR Kullanmaya Başlama öğreticisi ile aynı sohbet uygulaması kodunu kullanır, ancak İnternet şablonunu temel alan bir MVC 4 uygulamasına nasıl ekleneceğini gösterir.

Bu konuda aşağıdaki SignalR geliştirme görevlerini öğreneceksiniz:

SignalR kitaplığını bir MVC 4 uygulamasına ekleme.
İstemcilere içerik göndermek için bir hub sınıfı oluşturma.
İleti göndermek ve hub'dan güncelleştirmeleri görüntülemek için web sayfasındaki SignalR jQuery kitaplığını kullanma.

Aşağıdaki ekran görüntüsü, tarayıcıda çalışan tamamlanmış sohbet uygulamasını gösterir.

Sohbet örnekleri

Bölüm:

Projeyi Ayarlama
Örneği Çalıştırma
Kodu İnceleme
Sonraki Adımlar

Projeyi Ayarlama

Ön koşullar:

Visual Studio 2010 SP1, Visual Studio 2012 veya Visual Studio 2012 Express. Visual Studio'nuz yoksa ücretsiz Visual Studio 2012 Express Geliştirme Aracı'nı edinmek için bkz. İndirmeler ASP.NET.
Visual Studio 2010 için ASP.NET MVC 4'ü yükleyin.

Bu bölümde ASP.NET MVC 4 uygulamasının nasıl oluşturulacağı, SignalR kitaplığının nasıl ekleneceği ve sohbet uygulamasının nasıl oluşturulacağı gösterilmektedir.

1. Visual Studio'da bir ASP.NET MVC 4 uygulaması oluşturun, signalRChat olarak adlandırıp Tamam'a tıklayın.
  
  Not
  
  VS 2010'da Çerçeve sürümü açılan denetiminde .NET Framework 4'i seçin. SignalR kodu .NET Framework sürüm 4 ve 4.5'te çalışır.
  
  2. İnternet Uygulaması şablonunu seçin, Birim testi projesi oluştur seçeneğini temizleyin ve Tamam'a tıklayın.
  
  3. Araçlar > NuGet Paket Yöneticisi Paket Yöneticisi > Konsolu'nu açın ve aşağıdaki komutu çalıştırın. Bu adım projeye SignalR işlevselliğini etkinleştiren bir dizi betik dosyası ve derleme başvurusu ekler.
  
  install-package Microsoft.AspNet.SignalR -Version 1.1.34. Çözüm Gezgini içinde Betikler klasörünü genişletin. SignalR için betik kitaplıklarının projeye eklendiğini unutmayın.
  
  5. Çözüm Gezgini, projeye sağ tıklayın, Ekle | öğesini seçin Yeni Klasör'e gidin ve Hubs adlı yeni bir klasör ekleyin. 6. Hubs klasörüne sağ tıklayın, Ekle |'ye tıklayın sınıfını seçin ve ChatHub.cs adlı yeni bir C# sınıfı oluşturun. Bu sınıfı, tüm istemcilere ileti gönderen bir SignalR sunucu hub'ı olarak kullanacaksınız.

Not

Visual Studio 2012 kullanıyorsanız ve ASP.NET and Web Tools 2012.2 güncelleştirmesini yüklediyseniz, hub sınıfını oluşturmak için yeni SignalR öğe şablonunu kullanabilirsiniz. Bunu yapmak için Hubs klasörüne sağ tıklayın, Ekle | öğesine tıklayın Yeni Öğe, SignalR Hub Sınıfı (v1) öğesini seçin ve sınıfı ChatHub.cs olarak adlandırın.

ChatHub sınıfındaki kodu aşağıdaki kodla değiştirin.

using System;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

Proje için Global.asax dosyasını açın ve yönteminin ilk kod satırı olarak yöntemine RouteTable.Routes.MapHubs();Application_Start bir çağrı ekleyin. Bu kod SignalR hub'ları için varsayılan yolu kaydeder ve diğer yolları kaydetmeden önce çağrılmalıdır. Tamamlanan Application_Start yöntem aşağıdaki örneğe benzer.

protected void Application_Start()
{
    RouteTable.Routes.MapHubs();
    AreaRegistration.RegisterAllAreas();

    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterAuth();
}

HomeControllerControllers/HomeController.cs dosyasında bulunan sınıfı düzenleyin ve sınıfına aşağıdaki yöntemi ekleyin. Bu yöntem, sonraki bir adımda oluşturacağınız Sohbet görünümünü döndürür.
```
public ActionResult Chat()
{
    return View();
}
```
Yeni oluşturduğunuz yöntemin Chat içine sağ tıklayın ve yeni bir görünüm dosyası oluşturmak için Görünüm Ekle'ye tıklayın.
Görünüm Ekle iletişim kutusunda Düzen veya ana sayfa kullan onay kutusunun seçili olduğundan emin olun (diğer onay kutularını temizleyin) ve ekle'ye tıklayın.

Chat.cshtml adlı yeni görünüm dosyasını düzenleyin. h2 etiketinden <sonra aşağıdaki <div> bölümünü ve @section scripts kod bloğunu sayfaya yapıştırın.> Bu betik, sayfanın sohbet iletileri göndermesini ve sunucudan ileti görüntülemesini sağlar. Sohbet görünümünün tam kodu aşağıdaki kod bloğunda görünür.

Önemli

Visual Studio projenize SignalR ve diğer betik kitaplıklarını eklediğinizde, Paket Yöneticisi bu konuda gösterilen sürümlerden daha yeni olan betik sürümlerini yükleyebilir. Kodunuzdaki betik başvurularının projenizde yüklü olan betik kitaplıklarının sürümleriyle eşleştiğinden emin olun.

@{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>

<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>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</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();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Proje için Tümünü Kaydet'i seçin.

Örneği Çalıştırma

Projeyi hata ayıklama modunda çalıştırmak için F5 tuşuna basın.
Tarayıcı adres satırında proje için varsayılan sayfanın URL'sine /home/chat ekleyin. Sohbet sayfası bir tarayıcı örneğine yüklenir ve bir kullanıcı adı ister.
Bir kullanıcı adı girin.
Tarayıcının adres satırından URL'yi kopyalayın ve iki tarayıcı örneği daha açmak için kullanın. Her tarayıcı örneğine benzersiz bir kullanıcı adı girin.
Her tarayıcı örneğinde bir açıklama ekleyin ve Gönder'e tıklayın. Açıklamalar tüm tarayıcı örneklerinde görüntülenmelidir.

Not

Bu basit sohbet uygulaması sunucuda tartışma bağlamını korumaz. Merkez, açıklamaları tüm geçerli kullanıcılara yayınlar. Sohbete daha sonra katılan kullanıcılar katıldıkları zamandan eklenen iletileri görür.
Aşağıdaki ekran görüntüsü, tarayıcıda çalışan sohbet uygulamasını gösterir.
Çözüm Gezgini'da, çalışan uygulamanın Betik Belgeleri düğümünü inceleyin. Tarayıcı olarak Internet Explorer kullanıyorsanız bu düğüm hata ayıklama modunda görünür. SignalR kitaplığının çalışma zamanında dinamik olarak oluşturduğu hubs adlı bir betik dosyası vardır. Bu dosya, jQuery betiği ile sunucu tarafı kodu arasındaki iletişimi yönetir. Internet Explorer dışında bir tarayıcı kullanıyorsanız, dinamik hubs dosyasına doğrudan göz atarak da erişebilirsiniz, örneğin http://mywebsite/signalr/hubs.

Kodu İnceleme

SignalR sohbet uygulaması iki temel SignalR geliştirme görevini gösterir: sunucuda ana koordinasyon nesnesi olarak bir hub oluşturma ve iletileri gönderip almak için SignalR jQuery kitaplığını kullanma.

SignalR Hubs

Kod örneğinde ChatHub sınıfı Microsoft.AspNet.SignalR.Hub sınıfından türetilir. Hub sınıfından türetme, SignalR uygulaması oluşturmanın kullanışlı bir yoludur. Hub sınıfınızda genel yöntemler oluşturabilir ve sonra bunları bir web sayfasındaki jQuery betiklerinden çağırarak bu yöntemlere erişebilirsiniz.

Sohbet kodunda, istemciler yeni bir ileti göndermek için ChatHub.Send yöntemini çağırır. Hub da clients.All.addNewMessageToPage öğesini çağırarak iletiyi tüm istemcilere gönderir.

Send yöntemi çeşitli hub kavramlarını gösterir:

İstemcilerin çağırabilmesi için bir hub'da genel yöntemleri bildirin.
Bu hub'a bağlı tüm istemcilere erişmek için Microsoft.AspNet.SignalR.Hub.Clients özelliğini kullanın.

İstemcileri güncelleştirmek için istemcide bir jQuery işlevi (işlev gibi) çağırın addNewMessageToPage .

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR ve jQuery

Kod örneğindeki Chat.cshtml görünüm dosyası SignalR jQuery kitaplığının bir SignalR hub'ı ile iletişim kurmak için nasıl kullanılacağını gösterir. Koddaki temel görevler, hub için otomatik olarak oluşturulan ara sunucuya başvuru oluşturmak, sunucunun istemcilere içerik göndermek için çağırabileceği bir işlev bildirmek ve hub'a ileti göndermek için bir bağlantı başlatmaktır.

Aşağıdaki kod bir hub için ara sunucu bildirir.

var chat = $.connection.chatHub;

Not

jQuery'de sunucu sınıfına ve üyelerine başvuru deve durumundadır. Kod örneği, jQuery'de chatHub olarak C# ChatHub sınıfına başvurur. C# dilinde yaptığınız gibi jQuery'deki sınıfına geleneksel Pascal büyük/küçük harfle başvurmak ChatHub istiyorsanız ChatHub.cs sınıf dosyasını düzenleyin. Ad alanına başvurmak Microsoft.AspNet.SignalR.Hubs için bir using deyim ekleyin. Ardından özniteliğini HubName sınıfına ChatHub ekleyin, örneğin [HubName("ChatHub")]. Son olarak, jQuery başvurunuzu sınıfına güncelleştirin ChatHub .

Aşağıdaki kod, betikte geri çağırma işlevinin nasıl oluşturulacağını gösterir. Sunucudaki hub sınıfı, içerik güncelleştirmelerini her istemciye göndermek için bu işlevi çağırır. İşleve yönelik htmlEncode isteğe bağlı çağrı, ileti içeriğini sayfada görüntülemeden önce HTML ile kodlamanın bir yolunu, betik ekleme işlemini önlemenin bir yolu olarak gösterir.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

Aşağıdaki kod, hub ile bağlantı açmayı gösterir. Kod bağlantıyı başlatır ve sohbet sayfasındaki Gönder düğmesindeki tıklama olayını işlemek için bir işlev geçirir.

Not

Bu yaklaşım, olay işleyicisi yürütülmeden önce bağlantının kurulmasını sağlar.

$.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();
    });
});

Sonraki Adımlar

SignalR'nin gerçek zamanlı web uygulamaları oluşturmaya yönelik bir çerçeve olduğunu öğrendinsiniz. Ayrıca birkaç SignalR geliştirme görevi de öğrendiniz: ASP.NET bir uygulamaya SignalR ekleme, hub sınıfı oluşturma ve hub'dan ileti gönderip alma.

Daha gelişmiş SignalR geliştirme kavramları hakkında daha fazla bilgi edinmek için SignalR kaynak kodu ve kaynakları için aşağıdaki siteleri ziyaret edin: