Hands On Lab: Real-Time Aplikasi Web dengan SignalR

Artikel
07/13/2023

Peringatan

Dokumentasi ini bukan untuk versi terbaru SignalR. Lihat ASP.NET Core SignalR.

Unduh Kit Pelatihan Web Camps, Rilis Oktober 2015

Aplikasi Web real time menampilkan kemampuan untuk mendorong konten sisi server ke klien yang terhubung saat terjadi, secara real-time. Bagi pengembang ASP.NET, ASP.NET SignalR adalah pustaka untuk menambahkan fungsionalitas web real time ke aplikasi mereka. Ini memanfaatkan beberapa transportasi, secara otomatis memilih transportasi terbaik yang tersedia mengingat transportasi klien dan server terbaik yang tersedia. Ini memanfaatkan WebSocket, API HTML5 yang memungkinkan komunikasi dua arah antara browser dan server.

SignalR juga menyediakan API tingkat tinggi sederhana untuk melakukan server ke RPC klien (panggil fungsi JavaScript di browser klien Anda dari kode .NET sisi server) di aplikasi ASP.NET Anda, serta menambahkan kait yang berguna untuk manajemen koneksi, seperti peristiwa sambungkan/putuskan sambungan, koneksi pengelompokan, dan otorisasi.

SignalR adalah abstraksi atas beberapa transportasi yang diperlukan untuk melakukan pekerjaan real time antara klien dan server. Koneksi SignalR dimulai sebagai HTTP, dan kemudian dipromosikan ke koneksi WebSocket jika tersedia. WebSocket adalah transportasi ideal untuk SignalR, karena membuat penggunaan memori server yang paling efisien, memiliki latensi terendah, dan memiliki fitur yang paling mendasar (seperti komunikasi dupleks penuh antara klien dan server), tetapi juga memiliki persyaratan yang paling ketat: WebSocket mengharuskan server untuk menggunakan Windows Server 2012 atau Windows 8, bersama dengan .NET Framework 4,5. Jika persyaratan ini tidak terpenuhi, SignalR akan mencoba menggunakan transportasi lain untuk membuat koneksinya (seperti polling panjang Ajax).

SignalR API berisi dua model untuk berkomunikasi antara klien dan server: Koneksi Persisten dan Hub. Koneksi mewakili titik akhir sederhana untuk mengirim pesan penerima tunggal, dikelompokkan, atau disiarkan. Hub adalah alur tingkat tinggi yang dibangun di atas API Koneksi yang memungkinkan klien dan server Anda untuk memanggil metode satu sama lain secara langsung.

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, Rilis Oktober 2015, tersedia di https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. Harap dicatat bahwa tautan Alat Penginstal di halaman tersebut tidak lagi berfungsi; gunakan salah satu tautan di bawah bagian Aset sebagai gantinya.

Gambaran Umum

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

Kirim pemberitahuan dari server ke klien menggunakan SignalR.
Skalakan aplikasi SignalR Anda menggunakan SQL Server.

Prasyarat

Berikut ini diperlukan untuk menyelesaikan lab langsung ini:

Visual Studio Express 2013 untuk Web atau yang lebih tinggi

Siapkan

Untuk menjalankan latihan di lab langsung ini, Anda harus mengatur lingkungan Anda terlebih dahulu.

Buka jendela Windows Explorer dan telusuri folder Sumber lab.
Klik kanan Setup.cmd dan pilih Jalankan sebagai administrator untuk meluncurkan proses penyiapan yang akan mengonfigurasi lingkungan Anda dan menginstal cuplikan kode Visual Studio untuk lab ini.
Jika kotak dialog Kontrol Akun Pengguna ditampilkan, konfirmasikan tindakan untuk melanjutkan.

Catatan

Pastikan Anda telah memeriksa semua dependensi untuk lab ini sebelum menjalankan penyiapan.

Menggunakan Cuplikan Kode

Di seluruh dokumen lab, Anda akan diinstruksikan untuk menyisipkan blok kode. Untuk kenyamanan Anda, sebagian besar kode ini disediakan sebagai Visual Studio Code Cuplikan, yang dapat Anda akses dari dalam Visual Studio 2013 untuk menghindari harus menambahkannya secara manual.

Catatan

Setiap latihan disertai dengan solusi awal yang terletak di folder Mulai latihan yang memungkinkan Anda mengikuti setiap latihan secara independen dari yang lain. Perlu diketahui bahwa cuplikan kode yang ditambahkan selama latihan hilang dari solusi awal ini dan mungkin tidak berfungsi sampai Anda menyelesaikan latihan. Di dalam kode sumber untuk latihan, Anda juga akan menemukan folder Akhir yang berisi solusi Visual Studio dengan kode yang dihasilkan dari menyelesaikan langkah-langkah dalam latihan yang sesuai. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan saat Anda bekerja melalui lab langsung ini.

Latihan

Lab langsung ini mencakup latihan berikut:

Bekerja dengan data Real-Time menggunakan SignalR
Meluaskan Skala Menggunakan SQL Server

Perkiraan waktu untuk menyelesaikan lab ini: 60 menit

Catatan

Saat pertama kali memulai Visual Studio, Anda harus memilih salah satu koleksi pengaturan yang telah ditentukan sebelumnya. Setiap koleksi yang telah ditentukan sebelumnya dirancang untuk mencocokkan gaya pengembangan tertentu dan menentukan tata letak jendela, perilaku editor, cuplikan kode IntelliSense, dan opsi kotak dialog. Prosedur di lab ini menjelaskan tindakan yang diperlukan untuk menyelesaikan tugas tertentu di Visual Studio saat menggunakan koleksi Pengaturan Pengembangan Umum . Jika Anda memilih koleksi pengaturan yang berbeda untuk lingkungan pengembangan Anda, mungkin ada perbedaan dalam langkah-langkah yang harus Anda mempertimbangkan.

Latihan 1: Bekerja dengan data Real-Time Menggunakan SignalR

Meskipun obrolan sering digunakan sebagai contoh, Anda dapat melakukan lebih banyak hal dengan fungsionalitas Web real-time. Setiap kali pengguna me-refresh halaman web untuk melihat data baru atau halaman mengimplementasikan polling panjang Ajax untuk mengambil data baru, Anda dapat menggunakan SignalR.

SignalR mendukung fungsionalitas pendorongan atau penyiaran server; ini menangani manajemen koneksi secara otomatis. Dalam koneksi HTTP klasik untuk komunikasi server klien, koneksi dibuat ulang untuk setiap permintaan, tetapi SignalR menyediakan koneksi persisten antara klien dan server. Di SignalR, kode server memanggil kode klien di browser menggunakan Panggilan Prosedur Jarak Jauh (RPC), daripada model respons permintaan yang kita ketahui hari ini.

Dalam latihan ini, Anda akan mengonfigurasi aplikasi Geek Quiz untuk menggunakan SignalR untuk menampilkan dasbor Statistik dengan metrik yang diperbarui tanpa perlu me-refresh seluruh halaman.

Tugas 1 - Menjelajahi Halaman Statistik Kuis Geek

Dalam tugas ini, Anda akan melalui aplikasi dan memverifikasi bagaimana halaman statistik ditampilkan dan bagaimana Anda dapat meningkatkan cara informasi diperbarui.

Buka Visual Studio Express 2013 untuk Web dan buka solusi GeekQuiz.sln yang terletak di folder Source\Ex1-WorkingWithRealTimeData\Begin .
Tekan F5 untuk menjalankan solusi. Halaman Masuk akan muncul di browser.

Menjalankan solusi
Klik Daftar di sudut kanan atas halaman untuk membuat pengguna baru di aplikasi.

Tautan

Daftarkan tautan
Di halaman Daftar, masukkan Nama pengguna dan Kata Sandi, lalu klik Daftar.

Mendaftarkan pengguna
Aplikasi mendaftarkan akun baru dan pengguna diautentikasi dan dialihkan kembali ke halaman beranda yang menunjukkan pertanyaan kuis pertama.
Buka halaman Statistik di jendela baru dan letakkan halaman Beranda dan Statistik berdampingan.

Jendela berdampingan
Di halaman Beranda , jawab pertanyaan dengan mengklik salah satu opsi.

Menjawab pertanyaan
Setelah mengklik salah satu tombol, jawabannya akan muncul.

Pertanyaan dijawab dengan benar
Perhatikan bahwa informasi yang diberikan di halaman Statistik sudah kedaluarsa. Refresh halaman untuk melihat hasil yang diperbarui.

Halaman statistik
Kembali ke Visual Studio dan hentikan penelusuran kesalahan.

Tugas 2 – Menambahkan SignalR ke Kuis Geek untuk Memperlihatkan Bagan Online

Dalam tugas ini, Anda akan menambahkan SignalR ke solusi dan mengirim pembaruan ke klien secara otomatis ketika jawaban baru dikirim ke server.

Dari menu Alat di Visual Studio, pilih Pengelola Paket NuGet, lalu klik Konsol Manajer Paket.
Di jendela Konsol Manajer Paket , jalankan perintah berikut:
```
Install-Package Microsoft.AspNet.SignalR
```
Penginstalan paket SignalR
Catatan

Saat menginstal paket SignalR NuGet versi 2.0.2 dari aplikasi MVC 5 baru, Anda harus memperbarui paket OWIN secara manual ke versi 2.0.1 (atau lebih tinggi) sebelum menginstal SignalR. Untuk melakukan ini, Anda dapat menjalankan skrip berikut di Package Manager Console:
```
get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
```
Dalam rilis SignalR di masa mendatang, dependensi OWIN akan diperbarui secara otomatis.
Di Penjelajah Solusi, perluas folder Skrip dan perhatikan bahwa file SignalR js ditambahkan ke solusi.

Referensi SignalR JavaScript
Di Penjelajah Solusi, klik kanan proyek GeekQuiz , pilih Tambahkan | Folder Baru, dan beri nama Hub.
Klik kanan folder Hubs dan pilih Tambahkan | Item Baru.

Tambahkan item baru
Dalam kotak dialog Tambahkan Item Baru , pilih Visual C# | Web | Simpul SignalR di panel kiri, pilih Kelas SignalR Hub (v2) dari panel tengah, beri nama file StatisticsHub.cs dan klik Tambahkan.

Kotak dialog Tambahkan item baru

Ganti kode di kelas StatisticsHub dengan kode berikut.

(Cuplikan Kode - RealTimeSignalR - Ex1 - StatisticsHubClass)

namespace GeekQuiz.Hubs
{
    using Microsoft.AspNet.SignalR;

    public class StatisticsHub : Hub
    {
    }
}

Buka Startup.cs dan tambahkan baris berikut di akhir metode Konfigurasi .

(Cuplikan Kode - RealTimeSignalR - Ex1 - MapSignalR)
```
public void Configuration(IAppBuilder app)
{
    this.ConfigureAuth(app);
    app.MapSignalR();
}
```
Buka halaman StatisticsService.cs di dalam folder Layanan dan tambahkan yang berikut ini menggunakan direktif.

(Cuplikan Kode - RealTimeSignalR - Ex1 - UsingDirectives)
```
using Microsoft.AspNet.SignalR;
using GeekQuiz.Hubs;
```
Untuk memberi tahu klien pembaruan yang terhubung, Anda terlebih dahulu mengambil objek Konteks untuk koneksi saat ini. Objek Hub berisi metode untuk mengirim pesan ke satu klien atau menyiarkan ke semua klien yang terhubung. Tambahkan metode berikut ke kelas StatisticsService untuk menyiarkan data statistik.

(Cuplikan Kode - 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);
    }
}
```
Catatan

Dalam kode di atas, Anda menggunakan nama metode arbitrer untuk memanggil fungsi pada klien (yaitu: updateStatistics). Nama metode yang Anda tentukan ditafsirkan sebagai objek dinamis, yang berarti tidak ada IntelliSense atau validasi waktu kompilasi untuk itu. Ekspresi dievaluasi pada durasi. Ketika panggilan metode dijalankan, SignalR mengirimkan nama metode dan nilai parameter ke klien. Jika klien memiliki metode yang cocok dengan nama, metode tersebut dipanggil dan nilai parameter diteruskan ke dalamnya. Jika tidak ada metode yang cocok yang ditemukan pada klien, tidak ada kesalahan yang dimunculkan. Untuk informasi selengkapnya, lihat Panduan API ASP.NET SignalR Hubs.
Buka halaman TriviaController.cs di dalam folder Pengontrol dan tambahkan yang berikut ini menggunakan direktif.
```
using GeekQuiz.Services;
```

Tambahkan kode yang disorot berikut ke metode tindakan Posting .

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

Buka halaman Statistics.cshtml di dalam Tampilan | Folder utama . Temukan bagian Skrip dan tambahkan referensi skrip berikut di awal bagian.

(Cuplikan Kode - RealTimeSignalR - Ex1 - SignalRScriptReferences)
```
@section Scripts {
    @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
    @Scripts.Render("~/signalr/hubs");
    ...
}
```
Catatan

Saat Anda menambahkan SignalR dan pustaka skrip lainnya ke proyek Visual Studio Anda, Manajer Paket mungkin menginstal versi file skrip SignalR yang lebih baru daripada versi yang ditunjukkan dalam topik ini. Pastikan bahwa referensi skrip dalam kode Anda cocok dengan versi pustaka skrip yang diinstal di proyek Anda.

Tambahkan kode yang disorot berikut untuk menyambungkan klien ke hub SignalR dan memperbarui data statistik saat pesan baru diterima dari hub.

(Cuplikan Kode - 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>
}

Dalam kode ini, Anda membuat Proksi Hub dan mendaftarkan penanganan aktivitas untuk mendengarkan pesan yang dikirim oleh server. Dalam hal ini, Anda mendengarkan pesan yang dikirim melalui metode updateStatistics .

Tugas 3 - Menjalankan Solusi

Dalam tugas ini, Anda akan menjalankan solusi untuk memverifikasi bahwa tampilan statistik diperbarui secara otomatis menggunakan SignalR setelah menjawab pertanyaan baru.

Tekan F5 untuk menjalankan solusi.

Catatan

Jika belum masuk ke aplikasi, masuk dengan pengguna yang Anda buat di Tugas 1.
Buka halaman Statistik di jendela baru dan letakkan halaman Beranda dan Halaman statistik berdampingan seperti yang Anda lakukan di Tugas 1.
Di halaman Beranda , jawab pertanyaan dengan mengklik salah satu opsi.

Menjawab pertanyaan lain
Setelah mengklik salah satu tombol, jawabannya akan muncul. Perhatikan bahwa informasi Statistik di halaman diperbarui secara otomatis setelah menjawab pertanyaan dengan informasi yang diperbarui tanpa perlu merefresh seluruh halaman.

Halaman statistik disegarkan setelah jawaban

Latihan 2: Meluaskan skala menggunakan SQL Server

Saat menskalakan aplikasi web, Anda umumnya dapat memilih antara opsi peningkatan dan peluasan skala . Meningkatkan skala berarti menggunakan server yang lebih besar, dengan lebih banyak sumber daya (CPU, RAM, dll.) sementara peluasan skala berarti menambahkan lebih banyak server untuk menangani beban. Masalah dengan yang terakhir adalah bahwa klien dapat dirutekan ke server yang berbeda. Klien yang tersambung ke satu server tidak akan menerima pesan yang dikirim dari server lain.

Anda dapat menyelesaikan masalah ini dengan menggunakan komponen yang disebut backplane, untuk meneruskan pesan antar server. Dengan backplane diaktifkan, setiap instans aplikasi mengirim pesan ke backplane, dan backplane meneruskannya ke instans aplikasi lainnya.

Saat ini ada tiga jenis backplanes untuk SignalR:

Windows Azure Service Bus. Service Bus adalah infrastruktur olahpesan yang memungkinkan komponen mengirim pesan yang digabungkan secara longgar.
SQL Server. Backplane SQL Server menulis pesan ke tabel SQL. Backplane menggunakan Service Broker untuk olahpesan yang efisien. Namun, ini juga berfungsi jika Service Broker tidak diaktifkan.
Redis. Redis adalah penyimpanan kunci-nilai dalam memori. Redis mendukung pola terbitkan/berlangganan ("pub/sub") untuk mengirim pesan.

Setiap pesan dikirim melalui bus pesan. Bus pesan mengimplementasikan antarmuka IMessageBus , yang menyediakan abstraksi terbitkan/berlangganan. Backplanes bekerja dengan mengganti IMessageBus default dengan bus yang dirancang untuk backplane tersebut.

Setiap instans server terhubung ke backplane melalui bus. Ketika pesan dikirim, pesan masuk ke backplane, dan backplane mengirimkannya ke setiap server. Ketika server menerima pesan dari backplane, server menyimpan pesan di cache lokalnya. Server kemudian mengirimkan pesan kepada klien dari cache lokalnya.

Untuk informasi selengkapnya tentang cara kerja backplane SignalR, baca artikel ini.

Catatan

Ada beberapa skenario di mana backplane dapat menjadi hambatan. Berikut adalah beberapa skenario SignalR yang khas:

Siaran server (misalnya, ticker stok): Backplanes bekerja dengan baik untuk skenario ini, karena server mengontrol laju pengiriman pesan.
Klien ke klien (misalnya, obrolan): Dalam skenario ini, backplane mungkin menjadi hambatan jika jumlah pesan diskalakan dengan jumlah klien; artinya, jika tingkat pesan tumbuh secara proporsional saat lebih banyak klien bergabung.
Realtime frekuensi tinggi (misalnya, game real-time): Backplane tidak disarankan untuk skenario ini.

Dalam latihan ini, Anda akan menggunakan SQL Server untuk mendistribusikan pesan di seluruh aplikasi Geek Quiz. Anda akan menjalankan tugas-tugas ini pada satu mesin uji untuk mempelajari cara menyiapkan konfigurasi, tetapi untuk mendapatkan efek penuh, Anda harus menyebarkan aplikasi SignalR ke dua server atau lebih. Anda juga harus menginstal SQL Server di salah satu server, atau di server khusus terpisah.

Peluasan Skala Menggunakan Diagram SQL Server

Tugas 1 - Memahami Skenario

Dalam tugas ini, Anda akan menjalankan 2 instans Geek Quiz yang mensimulasikan beberapa instans IIS di komputer lokal Anda. Dalam skenario ini, saat menjawab pertanyaan trivia pada satu aplikasi, pembaruan tidak akan diberi tahu di halaman statistik instans kedua. Simulasi ini menyerupankan lingkungan tempat aplikasi Anda disebarkan pada beberapa instans dan menggunakan load balancer untuk berkomunikasi dengannya.

Buka solusi Begin.sln yang terletak di folder Source/Ex2-ScalingOutWithSQLServer/Begin . Setelah dimuat, Anda akan melihat pada Penjelajah Server bahwa solusi memiliki dua proyek dengan struktur yang identik tetapi nama yang berbeda. Ini akan mensimulasikan menjalankan dua instans aplikasi yang sama di komputer lokal Anda.

Mulai Solusi Simulasi 2 Instans Kuis Geek
Buka halaman properti solusi dengan mengklik kanan simpul solusi dan memilih Properti. Di bawah Proyek Startup, pilih Beberapa proyek startup dan ubah nilai Tindakan untuk kedua proyek menjadi Mulai.

Memulai Beberapa Proyek
Tekan F5 untuk menjalankan solusi. Aplikasi ini akan meluncurkan dua instans Geek Quiz di port yang berbeda, mensimulasikan beberapa instans dari aplikasi yang sama. Sematkan salah satu browser di kiri dan yang lainnya di sebelah kanan layar Anda. Masuk dengan kredensial Anda atau daftarkan pengguna baru. Setelah masuk, simpan halaman Trivia di sebelah kiri dan buka halaman Statistik di browser di sebelah kanan.

Kuis Geek Berdampingan

Kuis Geek di Port Yang Berbeda
Mulai jawab pertanyaan di browser kiri dan Anda akan melihat bahwa halaman Statistik di browser yang tepat tidak diperbarui. Ini karena SignalR menggunakan cache lokal untuk mendistribusikan pesan di seluruh klien mereka dan skenario ini mensimulasikan beberapa instans, oleh karena itu cache tidak dibagikan di antara mereka. Anda dapat memverifikasi bahwa SignalR berfungsi dengan menguji langkah yang sama tetapi menggunakan satu aplikasi. Dalam tugas berikut, Anda akan mengonfigurasi backplane untuk mereplikasi pesan di seluruh instans.
Kembali ke Visual Studio dan hentikan penelusuran kesalahan.

Tugas 2 - Membuat Backplane SQL Server

Dalam tugas ini, Anda akan membuat database yang akan berfungsi sebagai backplane untuk aplikasi Geek Quiz . Anda akan menggunakan SQL Server Object Explorer untuk menelusuri server Anda dan menginisialisasi database. Selain itu, Anda akan mengaktifkan Service Broker.

Di Visual Studio, buka menu Tampilkan dan pilih SQL Server Object Explorer.
Sambungkan ke instans LocalDB Anda dengan mengklik kanan simpul SQL Server dan memilih opsi Tambahkan SQL Server... .

Menambahkan instans SQL Server ke SQL Server Object Explorer
Atur nama server ke (localdb)\v11.0 dan biarkan Autentikasi Windows sebagai mode autentikasi Anda. Klik Sambungkan untuk melanjutkan.

Menyambungkan ke LocalDB
Sekarang setelah Anda terhubung ke instans LocalDB, Anda harus membuat database yang akan mewakili backplane SQL Server untuk SignalR. Untuk melakukan ini, klik kanan simpul Database dan pilih Tambahkan Database Baru.

Menambahkan database baru
Atur nama database ke SignalR dan klik OK untuk membuatnya.

Membuat database SignalR

Catatan

Anda bisa memilih nama apa pun untuk database.
Untuk menerima pembaruan secara lebih efisien dari backplane, disarankan untuk mengaktifkan Service Broker untuk database. Service Broker menyediakan dukungan asli untuk olahpesan dan antrean di SQL Server. Backplane juga berfungsi tanpa Service Broker. Buka kueri baru dengan mengklik kanan database dan pilih Kueri Baru.

Membuka Kueri Baru
Untuk memeriksa apakah Service Broker diaktifkan, kueri kolom is_broker_enabled dalam tampilan katalog sys.databases . Jalankan skrip berikut di jendela kueri yang baru dibuka.
```
SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
```
Mengkueri Status Service Broker
Jika nilai kolom is_broker_enabled dalam database Anda adalah "0", gunakan perintah berikut untuk mengaktifkannya. Ganti <YOUR-DATABASE> dengan nama yang Anda tetapkan saat membuat database (misalnya: SignalR).
```
ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
```
Mengaktifkan Service Broker

Catatan

Jika kueri ini tampak mengalami kebuntuan, pastikan tidak ada aplikasi yang terhubung ke DB.

Tugas 3 - Mengonfigurasi Aplikasi SignalR

Dalam tugas ini, Anda akan mengonfigurasi Geek Quiz untuk menyambungkan ke backplane SQL Server. Anda akan terlebih dahulu menambahkan paket SignalR.SqlServer NuGet dan mengatur string koneksi ke database backplane Anda.

Buka Konsol Manajer Paket dariPengelola Paket NuGetAlat>. Pastikan bahwa proyek GeekQuiz dipilih di daftar drop-down Proyek default . Ketik perintah berikut untuk menginstal paket NuGet Microsoft.AspNet.SignalR.SqlServer .
```
Install-Package Microsoft.AspNet.SignalR.SqlServer
```
Ulangi langkah sebelumnya tetapi kali ini untuk proyek GeekQuiz2.

Untuk mengonfigurasi backplane SQL Server, buka file Startup.cs dari proyek GeekQuiz dan tambahkan kode berikut ke metode Konfigurasi. Ganti <YOUR-DATABASE> dengan nama database yang Anda gunakan saat membuat backplane SQL Server. Ulangi langkah ini untuk proyek GeekQuiz2 .

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

Sekarang setelah kedua proyek dikonfigurasi untuk menggunakan backplane SQL Server, tekan F5 untuk menjalankannya secara bersamaan.
Sekali lagi, Visual Studio akan meluncurkan dua instans Geek Quiz di port yang berbeda. Sematkan salah satu browser di sebelah kiri dan yang lain di sebelah kanan layar Anda dan masuk dengan kredensial Anda. Simpan halaman Trivia di sebelah kiri dan buka halaman Statistik di browser kanan.
Mulai jawab pertanyaan di browser kiri. Kali ini, halaman Statistik diperbarui berkat backplane. Beralih antar aplikasi (Statistik sekarang berada di sebelah kiri, dan Trivia berada di sebelah kanan) dan ulangi pengujian untuk memvalidasi bahwa ia berfungsi untuk kedua instans. Backplane berfungsi sebagai cache bersama pesan untuk setiap server yang terhubung, dan setiap server akan menyimpan pesan di cache lokal mereka sendiri untuk didistribusikan ke klien yang terhubung.
Kembali ke Visual Studio dan hentikan penelusuran kesalahan.
Komponen backplane SQL Server secara otomatis menghasilkan tabel yang diperlukan pada database yang ditentukan. Di panel SQL Server Object Explorer, buka database yang Anda buat untuk backplane (misalnya: SignalR) dan perluas tabelnya. Anda akan melihat tabel berikut:

Tabel yang Dihasilkan Backplane
Klik kanan tabel SignalR.Messages_0 dan pilih Tampilkan Data.

Lihat Tabel Pesan Backplane SignalR
Anda dapat melihat berbagai pesan yang dikirim ke Hub saat menjawab pertanyaan trivia. Backplane mendistribusikan pesan ini ke instans yang terhubung.

Tabel Pesan Backplane

Ringkasan

Di lab langsung ini, Anda telah mempelajari cara menambahkan SignalR ke aplikasi Anda dan mengirim pemberitahuan dari server ke klien yang terhubung menggunakan Hub. Selain itu, Anda mempelajari cara menskalakan aplikasi dengan menggunakan komponen backplane saat aplikasi Anda disebarkan dalam beberapa instans IIS.

Bagikan melalui

Hands On Lab: Real-Time Aplikasi Web dengan SignalR

Gambaran Umum

Tujuan

Prasyarat

Siapkan

Menggunakan Cuplikan Kode

Latihan

Latihan 1: Bekerja dengan data Real-Time Menggunakan SignalR

Tugas 1 - Menjelajahi Halaman Statistik Kuis Geek

Tugas 2 – Menambahkan SignalR ke Kuis Geek untuk Memperlihatkan Bagan Online

Tugas 3 - Menjalankan Solusi

Latihan 2: Meluaskan skala menggunakan SQL Server

Tugas 1 - Memahami Skenario

Tugas 2 - Membuat Backplane SQL Server

Tugas 3 - Mengonfigurasi Aplikasi SignalR

Ringkasan

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: