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

Makale
07/13/2023

Bu öğreticide ASP.NET SignalR 2'yi kullanarak gerçek zamanlı sohbet uygulaması oluşturma adımları gösterilmektedir. SignalR'yi bir MVC 5 uygulamasına ekler ve ileti gönderip görüntülemek için bir sohbet görünümü 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. ASP.NET Core SignalR'ye 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 MVC 5 uygulaması oluşturmak, SignalR kitaplığını 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 .NET Framework 4.5'i hedefleyen bir C# ASP.NET uygulaması oluşturun, SignalRChat olarak adlandırın ve Tamam'a tıklayın.
Yeni ASP.NET Web Uygulaması - SignalRMvcChat'teMVC'yi ve ardından Kimlik Doğrulamasını Değiştir'i seçin.
Kimlik Doğrulamayı Değiştir'de KimlikDoğrulaması Yok'a tıklayın ve Tamam'a tıklayın.
Yeni ASP.NET Web Uygulaması - SignalRMvcChat bölümünde 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 addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

Çözüm Gezgini'da projeye sağ tıklayın veSınıfEkle'yi> seçin.
Yeni sınıfı Startup olarak adlandırın ve projeye ekleyin.

Startup.cs sınıf dosyasındaki kodu şu kodla değiştirin:

using Owin;
using Microsoft.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'daDenetleyiciler>HomeController.cs'yi seçin.
Bu yöntemi HomeController.cs dosyasına ekleyin.
```
public ActionResult Chat()
{
    return View();
}
```
Bu yöntem, sonraki bir adımda oluşturduğunuz Sohbet görünümünü döndürür.
Çözüm GezginiGörünümler>Giriş'e sağ tıklayın veGörünümEkle'yi> seçin.
Görünüm Ekle'de yeni görünümü Sohbet olarak adlandırın ve Ekle'yi seçin.

Chat.cshtml dosyasının içeriğini şu kodla değiştirin:

@{
    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-2.1.0.min.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>
}

Çö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 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. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>

Eşleşmiyorsa .cshtml 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.
Tarayıcıdan URL'yi 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ı zamandan 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

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

ChatHub.cs'de SignalR Hubs

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

Sohbet kodunda istemciler yeni bir ileti göndermek için yöntemini çağırır ChatHub.Send . Hub da çağrısı Clients.All.addNewMessageToPageyaparak 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 istemcide (işlev gibi addNewMessageToPage ) bir işlev çağırın.

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

SignalR ve jQuery Chat.cshtml

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. Kod birçok önemli görevi yürütür. Hub için otomatik olarak oluşturulan ara sunucuya başvuru oluşturur, sunucunun istemcilere içerik göndermek için ç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 başvuru camelCase dilindedir. 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.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

Sunucudaki hub sınıfı, her istemciye içerik güncelleştirmeleri 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 kodlamanın bir yolunu gösterir. Betik eklemeyi önlemenin bir yoludur.

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 bağlantı kurmanızı sağlar.

Kod bağlantıyı başlatır ve ardından Sohbet sayfasındaki Gönder düğmesinde 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 şunları yaptınız:

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

Yüksek frekanslı mesajlaşma işlevselliği sağlamak için ASP.NET SignalR 2 kullanan bir web uygulaması oluşturmayı öğrenmek için sonraki makaleye ilerleyin.

Yüksek frekanslı mesajlaşma ile web uygulaması

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

Önkoşullar

Projeyi Ayarlama

Örneği Çalıştırma

Kodu İnceleme

ChatHub.cs'de SignalR Hubs

SignalR ve jQuery Chat.cshtml

Kodu alma

Ek kaynaklar

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar