Öğretici: SignalR 1.x 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 SignalR kullanarak gerçek zamanlı bir sohbet uygulaması oluşturma işlemi gösterilir. SignalR'yi boş bir ASP.NET web uygulamasına ekleyecek ve ileti gönderip görüntülemek için bir HTML sayfası oluşturacaksınız.

Genel Bakış

Bu öğretici, tarayıcı tabanlı basit bir sohbet uygulamasının nasıl der yapılacağını göstererek SignalR geliştirmesini tanıtır. SignalR kitaplığını boş bir ASP.NET web uygulamasına ekleyecek, istemcilere ileti göndermek için bir hub sınıfı oluşturacak ve kullanıcıların sohbet iletileri gönderip almasını sağlayan bir HTML sayfası oluşturacaksınız. MVC görünümü kullanarak MVC 4'te sohbet uygulaması oluşturmayı gösteren benzer bir öğretici için bkz. SignalR ve MVC 4 ile Çalışmaya Başlama.

Not

Bu öğreticide SignalR'nin sürüm (1.x) sürümü kullanılır. SignalR 1.x ve 2.0 arasındaki değişikliklerle ilgili ayrıntılar için bkz . SignalR 1.x Projelerini Yükseltme.

SignalR, canlı kullanıcı etkileşimi veya gerçek zamanlı veri güncelleştirmeleri gerektiren web uygulamaları oluşturmaya yönelik açık kaynaklı bir .NET kitaplığıdır. Örnek olarak sosyal uygulamalar, çok kullanıcılı oyunlar, iş birliği ve haberler, hava durumu veya finansal güncelleştirme uygulamaları verilebilir. Bunlar genellikle gerçek zamanlı uygulamalar olarak adlandırılır.

SignalR, gerçek zamanlı uygulamalar oluşturma sürecini basitleştirir. İstemci-sunucu bağlantılarını yönetmeyi ve istemcilere içerik güncelleştirmeleri göndermeyi kolaylaştırmak için bir ASP.NET sunucu kitaplığı ve JavaScript istemci kitaplığı içerir. Gerçek zamanlı işlevsellik kazanmak için SignalR kitaplığını mevcut bir ASP.NET uygulamasına ekleyebilirsiniz.

Öğreticide aşağıdaki SignalR geliştirme görevleri gösterilmektedir:

SignalR kitaplığını bir ASP.NET web 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 sohbet uygulamasını gösterir. Her yeni kullanıcı yorum gönderebilir ve kullanıcı sohbete katıldıktan sonra eklenen açıklamaları görebilir.

Sohbet örnekleri

Bölüm:

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

Projeyi Ayarlama

Bu bölümde boş bir ASP.NET web uygulaması oluşturma, SignalR ekleme ve sohbet uygulamasını oluşturma adımları gösterilmektedir.

Ön koşullar:

Visual Studio 2010 SP1 veya 2012. Visual Studio'nuz yoksa ücretsiz Visual Studio 2012 Express Geliştirme Aracı'nı edinmek için bkz. İndirmeler ASP.NET.
Microsoft ASP.NET and Web Tools 2012.2. Visual Studio 2012 için bu yükleyici, SignalR şablonları dahil yeni ASP.NET özelliklerini Visual Studio'ya ekler. Visual Studio 2010 SP1 için yükleyici kullanılamaz, ancak kurulum adımlarında açıklandığı gibi SignalR NuGet paketini yükleyerek öğreticiyi tamamlayabilirsiniz.

Aşağıdaki adımlarda Boş ASP.NET Bir Web Uygulaması oluşturmak ve SignalR kitaplığını eklemek için Visual Studio 2012 kullanılır:

Visual Studio'da boş bir web uygulaması ASP.NET oluşturun.
Araçlar | öğesini seçerek Paket Yöneticisi Konsolu'nu açın NuGet Paket Yöneticisi | Paket Yöneticisi Konsolu. Konsol penceresine aşağıdaki komutu girin:

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

Bu komut SignalR 1.x'in en son sürümünü yükler.
Çözüm Gezgini'da projeye sağ tıklayın, Ekle | öğesini seçin Sınıf. Yeni sınıfa ChatHub adını verin.
Çözüm Gezgini'da Betikler düğümünü genişletin. jQuery ve SignalR için betik kitaplıkları projede görünür.

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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

Çözüm Gezgini'da projeye sağ tıklayın ve ardından Ekle | öğesine tıklayın. Yeni Öğe. Yeni Öğe Ekle iletişim kutusunda Genel Uygulama Sınıfı'nı seçin ve Ekle'ye tıklayın.
Global.asax.cs sınıfında sağlanan using deyimlerden sonra aşağıdaki using deyimleri ekleyin.
```
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
```
SignalR hub'ları Application_Start için varsayılan yolu kaydetmek için Genel sınıfının yöntemine aşağıdaki kod satırını ekleyin.
```
// Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
```
Çözüm Gezgini'da projeye sağ tıklayın ve ardından Ekle | öğesine tıklayın. Yeni Öğe. Yeni Öğe Ekle iletişim kutusunda Html Sayfası'nı seçin ve Ekle'ye tıklayın.
Çözüm Gezgini'da, yeni oluşturduğunuz HTML sayfasına sağ tıklayın ve Başlangıç Sayfası Olarak Ayarla'ya tıklayın.

HTML sayfasındaki varsayılan kodu aşağıdaki kodla değiştirin.

<!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-1.1.4.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>

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. HTML 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ı örneğinde çalışan sohbet uygulamasını gösterir ve bunların tümü bir örnek ileti gönderdiğinde güncelleştirilir:
Çözüm Gezgini'da, çalışan uygulamanın Betik Belgeleri düğümünü inceleyin. 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.

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.broadcastMessage çağrısı yaparak 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 dinamik özelliğini kullanın.

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

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

SignalR ve jQuery

Kod örneğindeki HTML sayfası, SignalR hub'ı ile iletişim kurmak için SignalR jQuery kitaplığının nasıl kullanılacağını gösterir. Koddaki temel görevler hub'a başvurmak için bir ara sunucu bildirmek, 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'deki C# ChatHub sınıfına chatHub olarak başvurur.

Aşağıdaki kod, betikte geri çağırma işlevini nasıl oluşturacağınızdır. Sunucudaki hub sınıfı, her istemciye içerik güncelleştirmeleri göndermek için bu işlevi çağırır. HTML'nin içeriği görüntülemeden önce kodlediği iki satır isteğe bağlıdır ve betik ekleme işlemini önlemenin basit bir yolunu gösterir.

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>');
    };

Aşağıdaki kod, hub ile bir bağlantının nasıl aç yapılacağını gösterir. Kod bağlantıyı başlatır ve ardından HTML sayfasındaki Gönder düğmesinde 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ı güvenceye alır.

$.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 öğrendin. Ayrıca birkaç SignalR geliştirme görevi de öğrendiniz: ASP.NET bir uygulamaya SignalR ekleme, merkez sınıfı oluşturma ve hub'dan ileti gönderip alma.

Bu öğreticideki örnek uygulamayı veya diğer SignalR uygulamalarını bir barındırma sağlayıcısına dağıtarak İnternet üzerinden kullanılabilir hale getirebilirsiniz. Microsoft, ücretsiz bir Windows Azure deneme hesabında en fazla 10 web sitesi için ücretsiz web barındırma hizmeti sunar. Örnek SignalR uygulamasını dağıtma hakkında izlenecek yol için bkz. SignalR Kullanmaya Başlama Örneğini Windows Azure Web Sitesi Olarak Yayımlama. Visual Studio web projesini Windows Azure Web Sitesine dağıtma hakkında ayrıntılı bilgi için bkz. Windows Azure Web Sitesine ASP.NET Uygulaması Dağıtma. (Not: WebSocket aktarımı şu anda Windows Azure Web Siteleri için desteklenmemektedir. WebSocket aktarımı kullanılamadığında SignalR, SignalR'ye Giriş konusunun Aktarımlar bölümünde açıklandığı gibi diğer kullanılabilir aktarımları kullanır.)

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: