Öğretici: SignalR 2 ile gerçek zamanlı sohbet

Makale
07/13/2023

Bu öğreticide SignalR kullanarak gerçek zamanlı sohbet uygulaması oluşturma adımları gösterilmektedir. SignalR'yi boş bir ASP.NET web uygulamasına ekler ve ileti gönderip görüntülemek için bir HTML sayfası oluşturursunuz.

Bu öğreticide şunları yaptınız:

Projeyi ayarlama
Örneği çalıştırma
Kodu inceleme

Uyarı

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

Önkoşullar

ASP.NET ve web geliştirme iş yüküyle Visual Studio 2017.

Projeyi Ayarlama

Bu bölümde boş bir ASP.NET web uygulaması oluşturmak, SignalR eklemek ve sohbet uygulamasını oluşturmak için Visual Studio 2017 ve SignalR 2'nin nasıl kullanılacağı gösterilmektedir.

Visual Studio'da bir ASP.NET Web Uygulaması oluşturun.
Yeni ASP.NET Projesi - SignalRChat penceresinde Boş'u seçili bırakın ve Tamam'ı seçin.
Çözüm Gezgini'da projeye sağ tıklayın veYeni Öğe Ekle'yi> seçin.
Yeni Öğe Ekle - SignalRChat bölümünde Yüklü>Visual C#>Web>SignalR'yi ve ardından SignalR Hub Sınıfı (v2) öğesini seçin.
Sınıfı ChatHub olarak adlandırın ve projeye ekleyin.

Bu adım ChatHub.cs sınıf dosyasını oluşturur ve projeye SignalR'yi destekleyen bir dizi betik dosyası ve derleme başvurusu ekler.

Yeni ChatHub.cs sınıf dosyasındaki kodu şu 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 veYeni Öğe Ekle'yi> seçin.
Yeni Öğe Ekle - SignalRChat bölümünde Yüklü>Visual C#>Web'i ve ardından OWIN Başlangıç Sınıfı'nı seçin.
Sınıfı Startup olarak adlandırın ve projeye ekleyin.

Başlangıç sınıfındaki varsayılan kodu şu kodla değiştirin:

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

Çözüm Gezgini'da projeye sağ tıklayın veHTML SayfasıEkle'yi> seçin.
Yeni sayfa dizinini adlandırın ve Tamam'ı seçin.
Çözüm Gezgini'da, oluşturduğunuz HTML sayfasına sağ tıklayın ve Başlangıç Sayfası Olarak Ayarla'yı seçin.

HTML sayfasındaki varsayılan kodu şu 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-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.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>

Çözüm Gezgini'daBetikler'i genişletin.

jQuery ve SignalR için betik kitaplıkları projede görünür.

Önemli

Paket yöneticisi SignalR betiklerinin daha sonraki bir sürümünü yüklemiş olabilir.

Kod bloğundaki betik başvurularının projedeki betik dosyalarının sürümlerine karşılık geldiğini denetleyin.

Özgün kod bloğundan betik başvuruları:

<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-3.1.1.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>

Eşleşmiyorsa .html dosyasını güncelleştirin.
Menü çubuğundan Dosya>Tümünü Kaydet'i seçin.

Örneği Çalıştırma

Araç çubuğunda Betik Hata Ayıklama'yı açın ve ardından örneği Hata Ayıklama modunda çalıştırmak için yürüt düğmesini seçin.
Tarayıcı açıldığında sohbet kimliğiniz için bir ad girin.
URL'yi tarayıcıdan kopyalayın, iki tarayıcı daha açın ve URL'leri adres çubuklarına yapıştırın.
Her tarayıcıda benzersiz bir ad girin.
Şimdi bir açıklama ekleyin ve Gönder'i seçin. Bunu diğer tarayıcılarda tekrarlayın. Açıklamalar gerçek zamanlı olarak görünür.

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ı zaman eklenen iletileri görür.

Sohbet uygulamasının üç farklı tarayıcıda nasıl çalıştığını görün. Tom, Anand ve Susan mesaj gönderdiğinde tüm tarayıcılar gerçek zamanlı olarak 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 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

SignalRChat uygulaması iki temel SignalR geliştirme görevini gösterir. Hub'ın nasıl oluşturulacağını gösterir. Sunucu bu hub'ı ana koordinasyon nesnesi olarak kullanır. Hub, iletileri göndermek ve almak için SignalR jQuery kitaplığını kullanır.

ChatHub.cs'de SignalR Hubs

Yukarıdaki kod örneğinde ChatHub sınıfı sınıfından Microsoft.AspNet.SignalR.Hub türetilir. sınıfından Hub türetilmiş bir SignalR uygulaması oluşturmak için kullanışlı bir yoldur. Hub sınıfınızda genel yöntemler oluşturabilir ve ardından bu yöntemleri bir web sayfasındaki betiklerden çağırarak kullanabilirsiniz.

Sohbet kodunda, istemciler yeni bir ileti göndermek için yöntemini çağırır ChatHub.Send . Hub daha sonra çağrısı Clients.All.broadcastMessageyaparak iletiyi tüm istemcilere gönderir.

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

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

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

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

index.html SignalR ve jQuery

Kod örneğindeki index.html sayfasında SignalR hub'ı ile iletişim kurmak için SignalR jQuery kitaplığının nasıl kullanılacağı gösterilir. Kod birçok önemli görevi yerine taşır. Hub'a başvurmak için bir ara sunucu bildirir, istemcilere içerik göndermek için sunucunun çağırabileceği bir işlev bildirir ve hub'a ileti göndermek için bir bağlantı başlatır.

var chat = $.connection.chatHub;

Not

JavaScript'te sunucu sınıfına ve üyelerine yapılan başvuru camelCase olmalıdır. Kod örneği, JavaScript'teki C# ChatHub sınıfına olarak chatHubbaşvurur.

Bu kod bloğunda betikte bir geri çağırma işlevi oluşturursunuz.

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

Sunucudaki hub sınıfı, içerik güncelleştirmelerini her istemciye göndermek için bu işlevi çağırır. İçeriği görüntülemeden önce HTML ile kodlayan iki satır isteğe bağlıdır ve betik ekleme işlemini önlemenin iyi bir yolunu gösterir.

Bu kod hub ile bir bağlantı açar.

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

Not

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

Kod bağlantıyı başlatır ve ardından HTML sayfasındaki Gönder düğmesindeki tıklama olayını işlemek için bir işlev geçirir.

Kodu alma

Tamamlanan Projeyi İndir

Ek kaynaklar

SignalR hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

Sonraki adımlar

Bu öğreticide:

Projeyi ayarlama
Örneği çalıştır
Kodu inceledim

SignalR ve MVC 5'i kullanmayı öğrenmek için sonraki makaleye ilerleyin.

SignalR 2 ve MVC 5

Öğretici: SignalR 2 ile gerçek zamanlı sohbet

Önkoşullar

Projeyi Ayarlama

Örneği Çalıştırma

Kodu İnceleme

ChatHub.cs'de SignalR Hubs

index.html SignalR ve jQuery

Kodu alma

Ek kaynaklar

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar