Uygulamalı Laboratuvar: SignalR ile Gerçek Zamanlı Web UygulamalarıHands On Lab: Real-Time Web Applications with SignalR

Web 'de Camps ekibine göreby Web Camps Team

Warning

Bu belge, SignalR 'nin en son sürümü için değildir.This documentation isn't for the latest version of SignalR. ASP.NET Core SignalR'ye göz atın.Take a look at ASP.NET Core SignalR.

Web Camps eğitim paketini indirin, 2015 Ekim yayınıDownload Web Camps Training Kit, October 2015 Release

Gerçek zamanlı web uygulamaları, bağlı istemcilere gerçek zamanlı olarak sunucu tarafı içeriği gönderme özelliğini sağlar.Real-time Web applications feature the ability to push server-side content to the connected clients as it happens, in real-time. ASP.NET geliştiricileri için ASP.NET SignalR , uygulamalarına gerçek zamanlı Web işlevselliği eklemek için bir kitaplıktır.For ASP.NET developers, ASP.NET SignalR is a library to add real-time web functionality to their applications. İstemci ve sunucunun en iyi kullanılabilir taşıması verilen en iyi kullanılabilir aktarımı otomatik olarak seçerek birkaç aktarımdan yararlanır.It takes advantage of several transports, automatically selecting the best available transport given the client and server's best available transport. Tarayıcı ve sunucu arasında çift yönlü iletişime izin veren bir HTML5 API 'SI olan WebSocket'ten faydalanır.It takes advantage of WebSocket, an HTML5 API that enables bi-directional communication between the browser and server.

SignalR ayrıca, ASP.net uygulamanızda sunucu istemci RPC 'ye (Istemcilerinizdeki JavaScript işlevlerini çağırma) ve bağlantı yönetimi için, bağlanma/bağlantı kesme, gruplama bağlantıları ve yetkilendirme gibi faydalı kancalar ekleme için basit ve yüksek düzey bir API sağlar.SignalR also provides a simple, high-level API for doing server to client RPC (call JavaScript functions in your clients' browsers from server-side .NET code) in your ASP.NET application, as well as adding useful hooks for connection management, such as connect/disconnect events, grouping connections, and authorization.

SignalR , istemci ve sunucu arasında gerçek zamanlı çalışma yapmak için gereken aktarımlara göre soyutlamadır.SignalR is an abstraction over some of the transports that are required to do real-time work between client and server. Bir SignalR bağlantısı http olarak başlar ve varsa bir WebSocket bağlantısına yükseltilir.A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if available. WebSocket , SignalRiçin ideal bir aktarımdır, çünkü sunucu belleğinin en verimli şekilde kullanılmasını sağlar, en düşük gecikme süresine sahiptir ve en temel özelliklere sahiptir (istemci ve sunucu arasında tam çift yönlü iletişim gibi), ancak aynı zamanda en sıkı gereksinimlere sahiptir: WebSocket , sunucunun Windows server 2012 veya Windows 8ile birlikte .NET Framework 4,5kullanmasını gerektirir.WebSocket is the ideal transport for SignalR, since it makes the most efficient use of server memory, has the lowest latency, and has the most underlying features (such as full duplex communication between client and server), but it also has the most stringent requirements: WebSocket requires the server to be using Windows Server 2012 or Windows 8, along with .NET Framework 4.5. Bu gereksinimler karşılanmazsa, SignalR bağlantı yapmak için diğer aktarımları kullanmayı dener ( Ajax uzun yoklamagibi).If these requirements are not met, SignalR will attempt to use other transports to make its connections (like Ajax long polling).

SignalR API 'si istemciler ve sunucular arasında iletişim kurmak için iki model Içerir: kalıcı bağlantılar ve hub 'lar.The SignalR API contains two models for communicating between clients and servers: Persistent Connections and Hubs. Bağlantı , tek alıcı, gruplandırılmış veya yayın iletileri göndermek için basit bir uç noktasını temsil eder.A Connection represents a simple endpoint for sending single-recipient, grouped, or broadcast messages. Hub , istemci ve sunucunuzun birbirlerine doğrudan Yöntemler çağırmasını sağlayan bağlantı API 'si üzerinde oluşturulmuş daha yüksek düzey bir işlem hattdır.A Hub is a more high-level pipeline built upon the Connection API that allows your client and server to call methods on each other directly.

SignalR mimarisi

Tüm örnek kod ve kod parçacıkları https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13badresinden erişilebilen Web Camps eğitim seti, 2015 Ekim sürümüne eklenmiştir.All sample code and snippets are included in the Web Camps Training Kit, October 2015 Release, available at https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Lütfen bu sayfadaki yükleyici bağlantısının artık çalışmadığını unutmayın; Bunun yerine varlıklar bölümünde bağlantılardan birini kullanın.Please note that the Installer link on that page no longer works; use one of the links under the Assets section instead.

Genel bakışOverview

AmaçlarObjectives

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:In this hands-on lab, you will learn how to:

  • SignalR kullanarak sunucudan istemciye bildirim gönderin.Send notifications from server to client using SignalR.
  • SQL Serverkullanarak SignalR uygulamanızı ölçeklendirin.Scale Out your SignalR application using SQL Server.

ÖnkoşullarPrerequisites

Bu uygulamalı laboratuvarın tamamlanabilmesi için aşağıdakiler gereklidir:The following is required to complete this hands-on lab:

KurulumSetup

Bu uygulamalı laboratuvarda alýþtýrmalarý çalıştırmak için öncelikle ortamınızı ayarlamanız gerekecektir.In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Bir Windows Explorer penceresi açın ve laboratuvarın kaynak klasörüne gidin.Open a Windows Explorer window and browse to the lab's Source folder.
  2. Ortamınızı yapılandıracak ve bu laboratuvar için Visual Studio kod parçacıklarını yükleyecek kurulum işlemini başlatmak için Setup. cmd ' ye sağ tıklayın ve yönetici olarak çalıştır ' ı seçin.Right-click Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. Kullanıcı hesabı denetimi iletişim kutusu gösterilirse, devam etmek için eylemi onaylayın.If the User Account Control dialog box is shown, confirm the action to proceed.

Note

Kurulumu çalıştırmadan önce bu laboratuvarın tüm bağımlılıklarını denetlediğinizden emin olun.Make sure you have checked all the dependencies for this lab before running the setup.

Kod parçacıklarını kullanmaUsing the Code Snippets

Laboratuvar belgesi boyunca kod blokları eklemeniz istenir.Throughout the lab document, you will be instructed to insert code blocks. Kolaylık olması için, bu kodun çoğu Visual Studio Code kod parçacığı olarak sağlanır ve bu, el ile ekleme zorunluluğunu ortadan kaldırmak için Visual Studio 2013 içinden erişebilirsiniz.For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Note

Her alıştırma, her alıştırmanın bağımsız olarak her birini takip etmenizi sağlayan alıştırmanın BEGIN klasöründe bulunan bir başlangıç çözümüdür.Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. Lütfen bir alıştırma sırasında eklenen kod parçacıklarının bu başlangıç çözümlerinde eksik olduğunu ve Alıştırmayı tamamlayana kadar çalışmadığının farkında olun.Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. Bir alıştırmada kaynak kodun içinde, ilgili alıştırmada adımların tamamlanmasına neden olan koda sahip bir Visual Studio çözümü içeren bir son klasör de bulacaksınız.Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. Bu uygulamalı laboratuvarda çalışırken daha fazla yardıma ihtiyacınız varsa bu çözümleri kılavuz olarak kullanabilirsiniz.You can use these solutions as guidance if you need additional help as you work through this hands-on lab.


AlıştırmalardaExercises

Bu uygulamalı laboratuvar aşağıdaki alıştırmaları içerir:This hands-on lab includes the following exercises:

  1. SignalR kullanarak gerçek zamanlı verilerle çalışmaWorking with Real-Time Data Using SignalR
  2. SQL Server kullanarak genişletmeScaling Out Using SQL Server

Bu Laboratuvarı tamamlamaya yönelik tahmini süre: 60 dakikaEstimated time to complete this lab: 60 minutes

Note

Visual Studio 'Yu ilk kez başlattığınızda, önceden tanımlanmış ayarlar koleksiyonundan birini seçmeniz gerekir.When you first start Visual Studio, you must select one of the predefined settings collections. Her önceden tanımlı koleksiyon, belirli bir geliştirme stiliyle eşleşecek şekilde tasarlanmıştır ve pencere düzenlerini, düzenleyici davranışını, IntelliSense kod parçacıklarını ve iletişim kutusu seçeneklerini belirler.Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. Bu laboratuvardaki yordamlarda, genel geliştirme ayarları koleksiyonu kullanılırken, Visual Studio 'da belirli bir görevi gerçekleştirmek için gereken eylemler açıklanır.The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. Geliştirme ortamınız için farklı bir ayarlar koleksiyonu seçerseniz, adımlarda dikkate almanız gereken adımlarda farklılıklar olabilir.If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

Alıştırma 1: SignalR kullanarak gerçek zamanlı verilerle çalışmaExercise 1: Working with Real-Time Data Using SignalR

Sohbet genellikle örnek olarak kullanıldığında, gerçek zamanlı web işlevselliğiyle çok daha fazlasını yapabilirsiniz.While chat is often used as an example, you can do a whole lot more with real-time Web functionality. Bir Kullanıcı yeni verileri görmek için bir Web sayfasını yenilediğinde veya yeni verileri almak için AJAX uzun yoklamayı uygularsa, SignalR kullanabilirsiniz.Any time a user refreshes a web page to see new data or the page implements Ajax long polling to retrieve new data, you can use SignalR.

SignalR, sunucu gönderme veya yayınlama işlevlerini destekler; bağlantı yönetimini otomatik olarak işler.SignalR supports server push or broadcasting functionality; it handles connection management automatically. İstemci-sunucu iletişimi için klasik HTTP bağlantılarında, her istek için bağlantı yeniden oluşturulur, ancak SignalR istemci ile sunucu arasında kalıcı bağlantı sağlar.In classic HTTP connections for client-server communication, connection is re-established for each request, but SignalR provides persistent connection between the client and server. SignalR 'de sunucu kodu, Bugün öğrendiğimiz istek-yanıt modeli yerine uzak yordam çağrılarını (RPC) kullanarak tarayıcıda istemci koduna çağrı yapılır.In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model we know today.

Bu alıştırmada, tüm sayfayı yenilemeye gerek kalmadan, Istatistik panosunu güncelleştirilmiş ölçümlerle birlikte göstermek için Geek test uygulamasını bir SignalR kullanacak şekilde yapılandıracaksınız.In this exercise, you will configure the Geek Quiz application to use SignalR to display the Statistics dashboard with the updated metrics without the need to refresh the entire page.

Görev 1 – Geek test Istatistikleri sayfasını keşfetmeTask 1 – Exploring the Geek Quiz Statistics Page

Bu görevde, uygulamayı ilertirecek ve istatistik sayfasının nasıl görüntülendiğini ve bilgilerin güncelleştirilme şeklini nasıl geliştirebileceğinizi doğrulayacaksınız.In this task, you will go through the application and verify how the statistics page is shown and how you can improve the way the information is updated.

  1. Web için Visual Studio Express 2013 ' i açın ve Source\Ex1-WorkingWithRealTimeData\Begin klasöründe bulunan geektest. sln çözümünü açın.Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source\Ex1-WorkingWithRealTimeData\Begin folder.

  2. Çözümü çalıştırmak için F5 tuşuna basın.Press F5 to run the solution. Oturum açma sayfası tarayıcıda görünmelidir.The Log in page should appear in the browser.

    Çözümü çalıştırmaRunning the solution

    Çözümü çalıştırmaRunning the solution

  3. Uygulamada yeni bir kullanıcı oluşturmak için sayfanın sağ üst köşesindeki Kaydet ' e tıklayın.Click Register in the upper-right corner of the page to create a new user in the application.

    Bağlantıyı KaydetRegister link

    Bağlantıyı KaydetRegister link

  4. Kaydet sayfasında, bir Kullanıcı adı ve parolagirin ve ardından Kaydet' e tıklayın.In the Register page, enter a User name and Password, and then click Register.

    Kullanıcı kaydetmeRegistering a user

    Kullanıcı kaydetmeRegistering a user

  5. Uygulama yeni hesabı kaydeder ve kullanıcının kimliği doğrulanır ve ilk test sorusunu gösteren giriş sayfasına yeniden yönlendirilir.The application registers the new account and the user is authenticated and redirected back to the home page showing the first quiz question.

  6. İstatistikler sayfasını yeni bir pencerede açın ve giriş sayfası ve İstatistikler sayfasını yan yana yerleştirin.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side.

    Yan yana WindowsSide-by-side windows

    Yan yana WindowsSide-by-side windows

  7. Giriş sayfasında, seçeneklerden birine tıklayarak soruyu yanıtlayın.In the Home page, answer the question by clicking one of the options.

    Soru yanıt vermeAnswering a question

    Soru yanıt vermeAnswering a question

  8. Düğmelerden birine tıkladıktan sonra yanıt görüntülenmelidir.After clicking one of the buttons, the answer should appear.

    Soru yanıt doğruQuestion answered correct

    Soru doğru yanıtlandıQuestion answered correctly

  9. Istatistikler sayfasında belirtilen bilgilerin güncel olmadığına dikkat edin.Notice that the information provided in the Statistics page is outdated. Güncelleştirilmiş sonuçları görmek için sayfayı yenileyin.Refresh the page in order to see the updated results.

    İstatistikler sayfasıStatistics page

    İstatistikler sayfasıStatistics page

  10. Visual Studio 'ya geri dönün ve hata ayıklamayı durdurun.Go back to Visual Studio and stop debugging.

Görev 2 – çevrimiçi grafikleri göstermek için SignalR to Geek sınavını eklemeTask 2 – Adding SignalR to Geek Quiz to Show Online Charts

Bu görevde, çözüme bir SignalR ekler ve sunucuya yeni bir yanıt gönderildiğinde güncelleştirmeleri otomatik olarak istemcilere gönderebilirsiniz.In this task, you will add SignalR to the solution and send updates to the clients automatically when a new answer is sent to the server.

  1. Visual Studio 'daki Araçlar menüsünde, NuGet Paket Yöneticisi' ni seçin ve ardından Paket Yöneticisi konsolu' na tıklayın.From the Tools menu in Visual Studio, select NuGet Package Manager, and then click Package Manager Console.

  2. Paket Yöneticisi konsolu penceresinde aşağıdaki komutu yürütün:In the Package Manager Console window, execute the following command:

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR paketi yüklemesiSignalR package installation

    SignalR paketi yüklemesiSignalR package installation

    Note

    SignalR NuGet paketleri sürüm 2.0.2 'i yenı bir MVC 5 uygulamasından yüklerken, SignalR 'yi yüklemeden önce owın paketlerini (veya üzeri) sürüm 2.0.1'i el ile güncelleştirmeniz gerekir.When installing SignalR NuGet packages version 2.0.2 from a brand new MVC 5 application, you will need to manually update OWIN packages to version 2.0.1 (or higher) before installing SignalR. Bunu yapmak için, Paket Yöneticisi konsolundaaşağıdaki betiği çalıştırabilirsiniz:To do this, you can execute the following script in the Package Manager Console:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    SignalR 'nin gelecekteki bir sürümünde OWIN bağımlılıkları otomatik olarak güncelleştirilir.In a future release of SignalR, OWIN dependencies will be automatically updated.

  3. Çözüm Gezgini, betikler klasörünü genişletin ve SignalR js dosyalarının çözüme eklendiğinden emin olun.In Solution Explorer, expand the Scripts folder and notice that the SignalR js files were added to the solution.

    SignalR JavaScript başvurularıSignalR JavaScript references

    SignalR JavaScript başvurularıSignalR JavaScript references

  4. Çözüm Gezgini, geektest projesine sağ tıklayın, | Yeni klasör Ekle ' yi seçin ve BT hub'ını adlandırın.In Solution Explorer, right-click the GeekQuiz project, select Add | New Folder, and name it Hubs.

  5. Hub klasörüne sağ tıklayın ve Ekle | ' yi seçin. Yeni öğe.Right-click the Hubs folder and select Add | New Item.

    Yeni öğe EkleAdd new item

    Yeni öğe EkleAdd new item

  6. Yeni öğe Ekle Iletişim kutusunda C# görseli seçin | Web | SignalR düğümü sol bölmede, orta bölmeden SignalR hub sınıfı (v2) öğesini seçin, dosyayı StatisticsHub.cs olarak adlandırın ve Ekle' ye tıklayın.In the Add New Item dialog box, select the Visual C# | Web | SignalR node in the left pane, select SignalR Hub Class (v2) from the center pane, name the file StatisticsHub.cs and click Add.

    Yeni öğe Ekle iletişim kutusuAdd new item dialog box

    Yeni öğe Ekle iletişim kutusuAdd new item dialog box

  7. Statisticshub sınıfındaki kodu aşağıdaki kodla değiştirin.Replace the code in the StatisticsHub class with the following code.

    (Kod parçacığı- RealTimeSignalR-Ex1-StatisticsHubClass)(Code Snippet - RealTimeSignalR - Ex1 - StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Startup.cs ' i açın ve yapılandırma yönteminin sonuna aşağıdaki satırı ekleyin.Open Startup.cs and add the following line at the end of the Configuration method.

    (Kod parçacığı- RealTimeSignalR-Ex1-MapSignalR)(Code Snippet - RealTimeSignalR - Ex1 - MapSignalR)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. Hizmetler klasörünün içindeki StatisticsService.cs sayfasını açın ve aşağıdaki using yönergelerini ekleyin.Open the StatisticsService.cs page inside the Services folder and add the following using directives.

    (Kod parçacığı- RealTimeSignalR-Ex1-Usingyönergeleri)(Code Snippet - RealTimeSignalR - Ex1 - UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. Güncelleştirmelerin bağlı istemcilerini bilgilendirmek için, önce geçerli bağlantı için bir bağlam nesnesi alırsınız.To notify connected clients of updates, you first retrieve a Context object for the current connection. Hub nesnesi, tek bir istemciye ileti gönderme veya tüm bağlı istemcilere yayımlama yöntemlerini içerir.The Hub object contains methods to send messages to a single client or broadcast to all connected clients. İstatistik verilerini yayınlamak için aşağıdaki yöntemi Statisticsservice sınıfına ekleyin.Add the following method to the StatisticsService class to broadcast the statistics data.

    (Kod parçacığı- RealTimeSignalR-Ex1-NotifyUpdatesMethod)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Note

    Yukarıdaki kodda, istemcideki bir işlevi çağırmak için rastgele bir yöntem adı kullanıyorsunuz (yani: UpdateStatistics).In the code above, you are using an arbitrary method name to call a function on the client (i.e.: updateStatistics). Belirttiğiniz Yöntem adı dinamik bir nesne olarak yorumlanır, yani bunun için IntelliSense veya derleme zamanı doğrulaması yoktur.The method name that you specify is interpreted as a dynamic object, which means there is no IntelliSense or compile-time validation for it. İfade çalışma zamanında değerlendirilir.The expression is evaluated at run time. Yöntem çağrısı yürütüldüğünde, SignalR, yöntem adını ve parametre değerlerini istemciye gönderir.When the method call executes, SignalR sends the method name and the parameter values to the client. İstemcinin adıyla eşleşen bir yöntemi varsa, bu yöntem çağrılır ve parametre değerleri kendisine geçirilir.If the client has a method that matches the name, that method is called and the parameter values are passed to it. İstemcide eşleşen bir yöntem bulunamazsa, hiçbir hata oluşturulmaz.If no matching method is found on the client, no error is raised. Daha fazla bilgi için ASP.NET SignalR hub 'LARı API Kılavuzu' na bakın.For more information, refer to ASP.NET SignalR Hubs API Guide.

  11. Denetleyiciler klasörünün içindeki TriviaController.cs sayfasını açın ve aşağıdaki using yönergelerini ekleyin.Open the TriviaController.cs page inside the Controllers folder and add the following using directives.

    using GeekQuiz.Services;
    
  12. Aşağıdaki Vurgulanan kodu Post ACTION yöntemine ekleyin.Add the following highlighted code to the Post action method.

    (Kod parçacığı- RealTimeSignalR-Ex1-NotifyUpdatesCall)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    
  13. Görünümler içindeki Statistics. cshtml sayfasını açın | Giriş klasörü.Open the Statistics.cshtml page inside the Views | Home folder. Betikler bölümünü bulun ve bölümün başında aşağıdaki komut dosyası başvurularını ekleyin.Locate the Scripts section and add the following script references at the beginning of the section.

    (Kod parçacığı- RealTimeSignalR-Ex1-SignalRScriptReferences)(Code Snippet - RealTimeSignalR - Ex1 - SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Note

    Visual Studio projenize SignalR ve diğer betik kitaplıklarını eklediğinizde Paket Yöneticisi, bu konuda gösterilen sürümden daha yeni bir SignalR betik dosyası sürümü kurabilir.When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more recent than the version shown in this topic. Kodunuzda betik başvurusunun projenizde yüklü olan betik kitaplığının sürümüyle eşleştiğinden emin olun.Make sure that the script reference in your code matches the version of the script library installed in your project.

  14. İstemciyi SignalR hub 'ına bağlamak ve hub 'dan yeni bir ileti alındığında istatistik verilerini güncelleştirmek için aşağıdaki vurgulanmış kodu ekleyin.Add the following highlighted code to connect the client to the SignalR hub and update the statistics data when a new message is received from the hub.

    (Kod parçacığı- RealTimeSignalR-Ex1-SignalRClientCode)(Code Snippet - RealTimeSignalR - Ex1 - SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    Bu kodda, bir hub proxy oluşturuyorsunuz ve sunucu tarafından gönderilen iletileri dinlemek için bir olay işleyicisi kaydediliyor.In this code, you are creating a Hub Proxy and registering an event handler to listen for messages sent by the server. Bu durumda, UpdateStatistics yöntemiyle gönderilen iletileri dinler.In this case, you listen for messages sent through the updateStatistics method.

Görev 3 – çözümü çalıştırmaTask 3 – Running the Solution

Bu görevde, yeni bir soru Yanıtlandıktan sonra istatistik görünümünün SignalR kullanılarak otomatik olarak güncelleştirildiğini doğrulamak için çözümü çalıştıracaksınız.In this task, you will run the solution to verify that the statistics view is updated automatically using SignalR after answering a new question.

  1. Çözümü çalıştırmak için F5 tuşuna basın.Press F5 to run the solution.

    Note

    Zaten uygulamada oturum açmamışsa, görev 1 ' de oluşturduğunuz kullanıcıyla oturum açın.If not already logged in to the application, log in with the user you created in Task 1.

  2. İstatistikler sayfasını yeni bir pencerede açın ve giriş sayfası ve İstatistikler sayfasını görev 1 ' de yaptığınız gibi yan yana yerleştirin.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side as you did in Task 1.

  3. Giriş sayfasında, seçeneklerden birine tıklayarak soruyu yanıtlayın.In the Home page, answer the question by clicking one of the options.

    Başka bir soruyu yanıtlamaAnswering another question

    Başka bir soruyu yanıtlamaAnswering another question

  4. Düğmelerden birine tıkladıktan sonra yanıt görüntülenmelidir.After clicking one of the buttons, the answer should appear. Sayfadaki Istatistik bilgilerinin, tüm sayfayı yenilemeye gerek kalmadan, güncelleştirilmiş bilgilerle soru Yanıtlandıktan sonra otomatik olarak güncelleştirildiğini unutmayın.Notice that the Statistics information on the page is updated automatically after answering the question with the updated information without the need to refresh the entire page.

    İstatistikler sayfası, yanıt sonrasında yenilendiStatistics page refreshed after answer

    İstatistikler sayfası, yanıt sonrasında yenilendiStatistics page refreshed after answer

Alıştırma 2: SQL Server kullanarak genişletmeExercise 2: Scaling Out Using SQL Server

Bir Web uygulamasını ölçeklendirirken, genellikle ölçeği artırma ve genişletme seçenekleri arasından seçim yapabilirsiniz.When scaling a web application, you can generally choose between scaling up and scaling out options. Ölçeği artırma , daha fazla kaynak (CPU, RAM, vb.) ile daha büyük bir sunucu kullanarak yükü işlemek için daha fazla sunucu ekleme anlamına gelir .Scale up means using a larger server, with more resources (CPU, RAM, etc.) while scale out means adding more servers to handle the load. İkincisi ile ilgili sorun, istemcilerin farklı sunuculara yönlendirilmesidir.The problem with the latter is that the clients can get routed to different servers. Bir sunucuya bağlı olan istemci, başka bir sunucudan gönderilen iletileri almaz.A client that is connected to one server will not receive messages sent from another server.

Bu sorunları, iletileri sunucular arasında iletmek için backdüzlemiadlı bir bileşen kullanarak çözebilirsiniz.You can solve these issues by using a component called backplane, to forward messages between servers. Bir sırt etkin olduğunda, her bir uygulama örneği geri düzleme iletiler gönderir ve geri düzlemi bunları diğer uygulama örneklerine iletir.With a backplane enabled, each application instance sends messages to the backplane, and the backplane forwards them to the other application instances.

SignalR için şu anda üç tür arka düzlem vardır:There are currently three types of backplanes for SignalR:

  • Windows Azure Service Bus.Windows Azure Service Bus. Service Bus, bileşenlerin gevşek olarak bağlanmış iletiler göndermesini sağlayan bir mesajlaşma altyapısıdır.Service Bus is a messaging infrastructure that allows components to send loosely coupled messages.
  • SQL Server.SQL Server. SQL Server arka düzlemi, iletileri SQL tablolarına yazar.The SQL Server backplane writes messages to SQL tables. Geri düzlemi verimli mesajlaşma için Hizmet Aracısı kullanır.The backplane uses Service Broker for efficient messaging. Ancak, Hizmet Aracısı etkinleştirilmemişse da bu da işe yarar.However, it also works if Service Broker is not enabled.
  • Redsıs.Redis. Redsıs, bellek içi anahtar-değer deposudur.Redis is an in-memory key-value store. Redsıs, ileti göndermek için bir yayımla/abone ol ("pub/Sub") modelini destekler.Redis supports a publish/subscribe ("pub/sub") pattern for sending messages.

Her ileti bir ileti veri yolu aracılığıyla gönderilir.Every message is sent through a message bus. İleti veri yolu, yayımlama/abone olma soyutlaması sağlayan IMessageBus arabirimini uygular.A message bus implements the IMessageBus interface, which provides a publish/subscribe abstraction. Arka düzlemler, varsayılan IMessageBus 'ı bu geri düzlemi için tasarlanan bir veri yolu ile değiştirerek çalışır.The backplanes work by replacing the default IMessageBus with a bus designed for that backplane.

Her sunucu örneği, veri yolu aracılığıyla geri düzleme bağlanır.Each server instance connects to the backplane through the bus. Bir ileti gönderildiğinde, geri düzlemi ' ne gider ve geri düzlemi onu her sunucuya gönderir.When a message is sent, it goes to the backplane, and the backplane sends it to every server. Bir sunucu arkadüzleden bir ileti aldığında, iletiyi yerel önbelleğinde depolar.When a server receives a message from the backplane, it stores the message in its local cache. Sunucu daha sonra istemcilere yerel önbelleğinden iletiler gönderir.The server then delivers messages to clients from its local cache.

SignalR geri düzlemi 'nin nasıl çalıştığı hakkında daha fazla bilgi için bu makaleyiokuyun.For more information about how the SignalR backplane works, read this article.

Note

Bir geri düzlemin performans sorunlarına neden olduğu bazı senaryolar vardır.There are some scenarios where a backplane can become a bottleneck. Tipik bir SignalR senaryosu aşağıda verilmiştir:Here are some typical SignalR scenarios:

  • Sunucu yayını (örneğin, hisse senedi bandı): sunucu iletilerin gönderilme hızını denetlemediğinden, bu senaryo Için geri düzler iyi çalışır.Server broadcast (e.g., stock ticker): Backplanes work well for this scenario, because the server controls the rate at which messages are sent.
  • İstemciden istemciye (ör. sohbet): Bu senaryoda, iletilerin sayısı istemci sayısıyla ölçeklenirken, arka uç bir performans sorunu olabilir; diğer bir deyişle, daha fazla istemci katılırken ileti hızının orantılı olarak büyümesi.Client-to-client (e.g., chat): In this scenario, the backplane might be a bottleneck if the number of messages scales with the number of clients; that is, if the rate of messages grows proportionally as more clients join.
  • Yüksek frekanslı gerçek zamanlı (örn. gerçek zamanlı Oyunlar): Bu senaryo için bir geri düzlem önerilmez.High-frequency realtime (e.g., real-time games): A backplane is not recommended for this scenario.

Bu alıştırmada, iletileri Geek test uygulaması üzerinden dağıtmak için SQL Server kullanacaksınız.In this exercise, you will use SQL Server to distribute messages across the Geek Quiz application. Yapılandırmayı ayarlamayı öğrenmek için bu görevleri tek bir test makinesinde çalıştıracaksınız, ancak tüm etkiyi almak için, SignalR uygulamasını iki veya daha fazla sunucuya dağıtmanız gerekir.You will run these tasks on a single test machine to learn how to set up the configuration, but in order to get the full effect, you will need to deploy the SignalR application to two or more servers. Ayrıca, sunuculardan birine veya ayrı bir adanmış sunucuya SQL Server de yüklemelisiniz.You must also install SQL Server on one of the servers, or on a separate dedicated server.

SQL Server diyagramı kullanarak ölçeği genişletme

Görev 1-senaryoyu anlamaTask 1 - Understanding the Scenario

Bu görevde, yerel makinenizde birden çok IIS örneğinin benzetimini yaparken, Geek sınavın 2 örneğini çalıştıracaksınız.In this task, you will run 2 instances of Geek Quiz simulating multiple IIS instances on your local machine. Bu senaryoda, bir uygulamadaki sorular aracılığıyla yanıt verme sırasında, ikinci örneğin istatistik sayfasında güncelleştirmeye bildirilmez.In this scenario, when answering trivia questions on one application, update won't be notified on the statistics page of the second instance. Bu benzetim, uygulamanızın birden çok örneğe dağıtıldığı ve onlarla iletişim kurmak için bir yük dengeleyici kullanıldığı bir ortama benzer.This simulation resembles an environment where your application is deployed on multiple instances and using a load balancer to communicate with them.

  1. Kaynak/EX2-ScalingOutWithSQLServer/Begin klasöründe bulunan BEGIN. sln çözümünü açın.Open the Begin.sln solution located in the Source/Ex2-ScalingOutWithSQLServer/Begin folder. Yüklendikten sonra, çözümün aynı yapılar, ancak farklı adlara sahip iki proje olduğunu Sunucu Gezgini görürsünüz.Once loaded, you will notice on the Server Explorer that the solution has two projects with identical structures but different names. Bu, yerel makinenizde aynı uygulamanın iki örneğini çalıştırmanın benzetimini yapar.This will simulate running two instances of the same application on your local machine.

    Çözüme başla Geek sınavın 2 örnek benzetimiBegin Solution Simulating 2 Instances of Geek Quiz

    Çözüme başla Geek sınavın 2 örnek benzetimiBegin Solution Simulating 2 Instances of Geek Quiz

  2. Çözüm düğümüne sağ tıklayıp Özellikler' i seçerek çözümün Özellikler sayfasını açın.Open the properties page of the solution by right-clicking the solution node and selecting Properties. Başlangıç projesialtında birden çok başlangıç projesi seçin ve her Iki proje Için de eylem değerini başlatılacakşekilde değiştirin.Under Startup Project, select Multiple startup projects and change the Action value for both projects to Start.

    Birden çok proje başlatılıyorStarting Multiple Projects

    Birden çok proje başlatılıyorStarting Multiple Projects

  3. Çözümü çalıştırmak için F5 tuşuna basın.Press F5 to run the solution. Uygulama, farklı bağlantı noktalarında aynı uygulamanın birden fazla örneğini taklit eden iki Geek test örneğini başlatır.The application will launch two instances of Geek Quiz in different ports, simulating multiple instances of the same application. Sol taraftaki tarayıcıların birini ekranın sağ tarafında sabitleyin.Pin one of the browsers on left and the other on the right of your screen. Kimlik bilgilerinizle oturum açın veya yeni bir Kullanıcı kaydedin.Log in with your credentials or register a new user. Oturum açtıktan sonra, Üçlü sayfayı sola tutun ve sağdaki tarayıcıdaki İstatistikler sayfasına gidin.Once logged in, keep the Trivia page on the left and go to the Statistics page in the browser on the right.

    Yan yana Geek test

    Yan yana Geek testGeek Quiz Side by Side

    Farklı bağlantı noktalarında Geek test

    Farklı bağlantı noktalarında Geek testGeek Quiz in Different Ports

  4. Sol tarayıcıda sorularınızı yanıtlamayı başlatın ve doğru tarayıcıda istatistik sayfasının güncelleştirilmediğini fark edeceksiniz.Start answering questions in the left browser and you will notice that the Statistics page in the right browser is not being updated. Bunun nedeni, SignalR 'nin istemcilerine iletileri dağıtmak için yerel bir önbellek kullanması ve bu senaryonun birden çok örneği benzetiğinden, önbelleğin aralarında paylaşılmaması nedeniyle oluşur.This is because SignalR uses a local cache to distribute messages across their clients and this scenario is simulating multiple instances, therefore the cache is not shared between them. Aynı adımları test ederek ve tek bir uygulama kullanarak SignalR 'nin çalıştığını doğrulayabilirsiniz.You can verify that SignalR is working by testing the same steps but using a single app. Aşağıdaki görevlerde, iletileri örnekler arasında çoğaltmak için bir arka düzlem yapılandıracaksınız.In the following tasks you will configure a backplane to replicate the messages across instances.

  5. Visual Studio 'ya geri dönün ve hata ayıklamayı durdurun.Go back to Visual Studio and stop debugging.

Görev 2 – SQL Server arka düzlemi oluşturmaTask 2 – Creating the SQL Server Backplane

Bu görevde, Geek test uygulaması için bir arka düzlem olarak kullanılacak bir veritabanı oluşturacaksınız.In this task, you will create a database that will serve as a backplane for the Geek Quiz application. SQL Server Nesne Gezgini kullanarak sunucunuza gözatıp veritabanını başlatabilirsiniz.You will use SQL Server Object Explorer to browse your server and initialize the database. Ayrıca, Hizmet Aracısıetkinleştirecektir.Additionally, you will enable the Service Broker.

  1. Visual Studio'Da menü görünümü ' nü açın ve SQL Server Nesne Gezgini' yi seçin.In Visual Studio, open menu View and select SQL Server Object Explorer.

  2. SQL Server düğümüne sağ tıklayıp SQL Server Ekle... seçeneğini belirleyerek LocalDB örneğinizi bağlayın.Connect to your LocalDB instance by right-clicking the SQL Server node and selecting Add SQL Server... option.

    SQL Server örneği eklemeAdding a SQL Server Instance

    SQL Server Nesne Gezgini SQL Server örnek eklemeAdding a SQL Server instance to SQL Server Object Explorer

  3. Sunucu adını (LocalDB) \v11.0 olarak ayarlayın ve Windows kimlik doğrulamasını kimlik doğrulama modu olarak bırakın.Set the server name to (localdb)\v11.0 and leave Windows Authentication as your authentication mode. Devam etmek için Bağlan’a tıklayın.Click Connect to continue.

    LocalDB 'ye bağlanmaConnecting to LocalDB

    LocalDB 'ye bağlanmaConnecting to LocalDB

  4. LocalDB örneğinize bağlı olduğunuza göre, SignalR için SQL Server geri düzlemi temsil edecek bir veritabanı oluşturmanız gerekir.Now that you are connected to your LocalDB instance, you will need to create a database that will represent the SQL Server backplane for SignalR. Bunu yapmak için veritabanları düğümüne sağ tıklayın ve Yeni veritabanı Ekle' yi seçin.To do this, right-click the Databases node and select Add New Database.

    Yeni veritabanı eklemeAdding a new database

    Yeni veritabanı eklemeAdding a new database

  5. Veritabanı adını SignalR olarak ayarlayın ve Tamam ' a tıklayarak oluşturun.Set the database name to SignalR and click OK to create it.

    SignalR veritabanı oluşturmaCreating the SignalR database

    SignalR veritabanı oluşturmaCreating the SignalR database

    Note

    Veritabanı için herhangi bir ad seçebilirsiniz.You can choose any name for the database.

  6. Güncelleştirmeleri geri düzlemden daha verimli bir şekilde almak için, veritabanı için Hizmet Aracısı etkinleştirmeniz önerilir.To receive updates more efficiently from the backplane, it is recommended to enable Service Broker for the database. Hizmet Aracısı, SQL Server mesajlaşma ve kuyruğa alma için yerel destek sağlar.Service Broker provides native support for messaging and queuing in SQL Server. Arka düzlem Hizmet Aracısı olmadan da kullanılabilir.The backplane also works without Service Broker. Veritabanına sağ tıklayıp Yeni sorgu' yı seçerek yeni bir sorgu açın.Open a new query by right-clicking the database and select New Query.

    Yeni bir sorgu açılıyorOpening a New Query

    Yeni bir sorgu açılıyorOpening a New Query

  7. Hizmet Aracısı etkinleştirilip etkinleştirilmediğini denetlemek için sys. databases katalog görünümündeki _Broker_etkin sütununu sorgulayın.To check whether Service Broker is enabled, query the is_broker_enabled column in the sys.databases catalog view. Son açılan sorgu penceresinde aşağıdaki betiği yürütün.Execute the following script in the recently opened query window.

    SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
    

    Hizmet Aracısı durumu sorgulanıyorQuerying the Service Broker Status

    Hizmet Aracısı durumu sorgulanıyorQuerying the Service Broker Status

  8. Veritabanınızdaki _broker_etkin sütununun değeri "0"ise, etkinleştirmek için aşağıdaki komutu kullanın.If the value of the is_broker_enabled column in your database is "0", use the following command to enable it. Veritabanı >< , veritabanını oluştururken ayarladığınız adla değiştirin (örn. SignalR).Replace <YOUR-DATABASE> with the name you set when creating the database (e.g.: SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Hizmet Aracısı etkinleştiriliyorEnabling Service Broker

    Hizmet Aracısı etkinleştiriliyorEnabling Service Broker

    Note

    Bu sorgu kilitlenme olarak görünüyorsa, VERITABANıNA bağlı bir uygulama olmadığından emin olun.If this query appears to deadlock, make sure there are no applications connected to the DB.

Görev 3 – SignalR uygulamasını yapılandırmaTask 3 – Configuring the SignalR Application

Bu görevde, Geek sınavını SQL Server arka düzleme bağlanacak şekilde yapılandıracaksınız.In this task, you will configure Geek Quiz to connect to the SQL Server backplane. Önce SignalR. SqlServer NuGet paketini ekleyecek ve bağlantı dizesini arka düzlem veritabanınıza ayarlayacaksınız.You will first add the SignalR.SqlServer NuGet package and set the connection string to your backplane database.

  1. NuGet paket yöneticisi > Araçlar ' dan Paket Yöneticisi konsolunu açın.Open the Package Manager Console from Tools > NuGet Package Manager. Varsayılan proje açılan listesinde geektest projesinin seçildiğinden emin olun.Make sure that GeekQuiz project is selected in the Default project drop-down list. Microsoft. Aspnet. SignalR. SqlServer NuGet paketini yüklemek için aşağıdaki komutu yazın.Type the following command to install the Microsoft.AspNet.SignalR.SqlServer NuGet package.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. Project GeekQuiz2için önceki adımı, ancak bu kez tekrarlayın.Repeat the previous step but this time for project GeekQuiz2.

  3. SQL Server geri düzlemi yapılandırmak için, Geektest projesinin Startup.cs dosyasını açın ve Configure yöntemine aşağıdaki kodu ekleyin.To configure the SQL Server backplane, open the Startup.cs file of the GeekQuiz project and add the following code to the Configure method. <-veritabanı> , SQL Server geri düzlemi oluştururken kullandığınız veritabanı adınızla değiştirin.Replace <YOUR-DATABASE> with your database name you used when creating the SQL Server backplane. GeekQuiz2 projesi için bu adımı tekrarlayın.Repeat this step for the GeekQuiz2 project.

    (Kod parçacığı- RealTimeSignalR-EX2-StartupConfiguration)(Code Snippet - RealTimeSignalR - Ex2 - StartupConfiguration)

    public class Startup 
    {   
        public void Configuration(IAppBuilder app) 
        {           
            var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
            GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
            this.ConfigureAuth(app);
            app.MapSignalR();
        }
    }
    
  4. Her iki proje de SQL Server arkadüzlemi kullanacak şekilde yapılandırıldığına göre, bunları aynı anda çalıştırmak için F5 tuşuna basın.Now that both projects are configured to use the SQL Server backplane, press F5 to run them simultaneously.

  5. Visual Studio , farklı bağlantı noktalarında Geek sınavın iki örneğini başlatır.Again, Visual Studio will launch two instances of Geek Quiz in different ports. Sol taraftaki tarayıcılardan birini ekranın sağ tarafında sabitleyin ve kimlik bilgilerinizle oturum açın.Pin one of the browsers on the left and the other on the right of your screen and log in with your credentials. Sol taraftaki sayfayı sola tutun ve sağ tarayıcıda İstatistikler sayfasına gidin.Keep the Trivia page on the left and go to Statistics pagein the right browser.

  6. Sol tarayıcıda sorularınızı yanıtlamayı başlatın.Start answering questions in the left browser. Bu kez, istatistik sayfası, geri düzlemi için teşekkürler.This time, the Statistics page is updated thanks to the backplane. Uygulamalar arasında geçiş yapın (İstatistikler artık sol tarafta bulunur ve en sağda bulunur) ve her iki örnek için çalıştığını doğrulamak için test yinelenir.Switch between applications (Statistics is now on the left, and Trivia is on the right) and repeat the test to validate that it is working for both instances. Biriktirme listesi, her bağlı sunucu için paylaşılan bir ileti önbelleği görevi görür ve her sunucu, bağlı istemcilere dağıtmak üzere iletileri kendi yerel önbelleğinde depolar.The backplane serves as a shared cache of messages for each connected server, and each server will store the messages in their own local cache to distribute to connected clients.

  7. Visual Studio 'ya geri dönün ve hata ayıklamayı durdurun.Go back to Visual Studio and stop debugging.

  8. SQL Server backdüzlemi bileşeni, belirtilen veritabanında gerekli tabloları otomatik olarak oluşturur.The SQL Server backplane component automatically generates the necessary tables on the specified database. SQL Server Nesne Gezgini panelinde, geri düzlemi (ör. SignalR) için oluşturduğunuz veritabanını açın ve tabloları genişletin.In the SQL Server Object Explorer panel, open the database you created for the backplane (e.g.: SignalR) and expand its tables. Aşağıdaki tabloları görmeniz gerekir:You should see the following tables:

    Arka düzlem tarafından oluşturulan tablolar

    Arka düzlem tarafından oluşturulan tablolarBackplane Generated Tables

  9. SignalR. Messages_0 tablosuna sağ tıklayın ve verileri görüntüle' yi seçin.Right-click the SignalR.Messages_0 table and select View Data.

    SignalR geri düzlemi Iletileri tablosunu görüntüle

    SignalR geri düzlemi Iletileri tablosunu görüntüleView SignalR Backplane Messages Table

  10. Gidiş ile soruları yanıtlarken hub 'a gönderilen farklı iletileri görebilirsiniz.You can see the different messages sent to the Hub when answering the trivia questions. Geri düzlemi, bu iletileri herhangi bir bağlı örneğe dağıtır.The backplane distributes these messages to any connected instance.

    Backuçak Iletileri tablosu

    Backuçak Iletileri tablosuBackplane Messages Table


ÖzetSummary

Bu uygulamalı laboratuvarda, uygulamanıza SignalR ekleme ve hub 'larıkullanarak sunucudan bağlı istemcilerinize bildirim gönderme hakkında bilgiler edindiniz.In this hands-on lab, you have learned how to add SignalR to your application and send notifications from the server to your connected clients using Hubs. Ayrıca, uygulamanız birden fazla IIS örneğine dağıtıldığında bir backdüzlemi bileşeni kullanarak uygulamanızı nasıl ölçeklendirebilirsiniz.Additionally, you learned how to scale out your application by using a backplane component when your application is deployed in multiple IIS instances.