Öğretici: SignalR 2 ile gerçek zamanlı sohbet
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>: ' + 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.broadcastMessage
yaparak 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 chatHub
baş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>: ' + 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
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.