Bagikan melalui

Tutorial: SignalR Self-Host

  • Artikel

oleh Patrick Fletcher

Peringatan

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

Tutorial ini menunjukkan cara membuat server SignalR 2 yang dihost sendiri, dan cara menyambungkannya dengan klien JavaScript.

Versi perangkat lunak yang digunakan dalam tutorial

Menggunakan Visual Studio 2012 dengan tutorial ini

Untuk menggunakan Visual Studio 2012 dengan tutorial ini, lakukan hal berikut:

  • Perbarui Pengelola Paket Anda ke versi terbaru.
  • Instal Alat Penginstal Platform Web.
  • Di Alat Penginstal Platform Web, cari dan instal ASP.NET dan Web Tools 2013.1 untuk Visual Studio 2012. Ini akan menginstal templat Visual Studio untuk kelas SignalR seperti Hub.
  • Beberapa templat (seperti Kelas Startup OWIN) tidak akan tersedia; untuk ini, gunakan file Kelas sebagai gantinya.

Pertanyaan dan komentar

Silakan tinggalkan umpan balik tentang bagaimana Anda menyukai tutorial ini dan apa yang dapat kami tingkatkan di komentar di bagian bawah halaman. Jika Anda memiliki pertanyaan yang tidak terkait langsung dengan tutorial, Anda dapat mempostingnya ke forum ASP.NET SignalR atau StackOverflow.com.

Gambaran Umum

Server SignalR biasanya dihosting dalam aplikasi ASP.NET di IIS, tetapi juga dapat dihost sendiri (seperti di aplikasi konsol atau layanan Windows) menggunakan pustaka host mandiri. Pustaka ini, seperti semua SignalR 2, dibangun di OWIN (Open Web Interface untuk .NET). OWIN mendefinisikan abstraksi antara server web .NET dan aplikasi web. OWIN memisahkan aplikasi web dari server, yang membuat OWIN ideal untuk menghosting sendiri aplikasi web dalam proses Anda sendiri, di luar IIS.

Alasan untuk tidak menghosting di IIS meliputi:

  • Lingkungan di mana IIS tidak tersedia atau diinginkan, seperti farm server yang ada tanpa IIS.
  • Overhead performa IIS perlu dihindari.
  • Fungsionalitas SignalR akan ditambahkan ke aplikasi yang sudah ada yang berjalan di Layanan Windows, peran pekerja Azure, atau proses lainnya.

Jika solusi sedang dikembangkan sebagai host mandiri karena alasan performa, disarankan untuk juga menguji aplikasi yang dihosting di IIS untuk menentukan manfaat performa.

Tutorial ini berisi bagian-bagian berikut:

Membuat server

Dalam tutorial ini, Anda akan membuat server yang dihosting di aplikasi konsol, tetapi server dapat dihosting dalam segala jenis proses, seperti layanan Windows atau peran pekerja Azure. Untuk kode sampel untuk menghosting server SignalR di Layanan Windows, lihat SignalR Hosting Mandiri di Layanan Windows.

  1. Buka Visual Studio 2013 dengan hak istimewa administrator. Pilih File, Proyek Baru. Pilih Windows di bawah simpul Visual C# di panel Templat, dan pilih templat Aplikasi Konsol. Beri nama proyek baru "SignalRSelfHost" dan klik OK.

    Cuplikan layar Proyek Baru dengan opsi Windows, templat Aplikasi Konsol, dan bidang Nama sedang disorot.

  2. Buka konsol manajer paket NuGet dengan memilih Alat>NuGet Package Manager>Package Manager Console.

  3. Di konsol manajer paket, masukkan perintah berikut:

    Install-Package Microsoft.AspNet.SignalR.SelfHost

    Perintah ini menambahkan pustaka Self-Host SignalR 2 ke proyek.

  4. Di konsol manajer paket, masukkan perintah berikut:

    Install-Package Microsoft.Owin.Cors

    Perintah ini menambahkan pustaka Microsoft.Owin.Cors ke proyek. Pustaka ini akan digunakan untuk dukungan lintas domain, yang diperlukan untuk aplikasi yang menghosting SignalR dan klien halaman web di domain yang berbeda. Karena Anda akan menghosting server SignalR dan klien web di port yang berbeda, ini berarti bahwa lintas domain harus diaktifkan untuk komunikasi antara komponen-komponen ini.

  5. Ganti konten Program.cs dengan kode berikut.

    using System;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Hosting;
using Owin;
using Microsoft.Owin.Cors;

namespace SignalRSelfHost
{
    class Program
    {
        static void Main(string[] args)
        {
            // This will *ONLY* bind to localhost, if you want to bind to all addresses
            // use http://*:8080 to bind to all addresses. 
            // See http://msdn.microsoft.com/library/system.net.httplistener.aspx 
            // for more information.
            string url = "http://localhost:8080";
            using (WebApp.Start(url))
            {
                Console.WriteLine("Server running on {0}", url);
                Console.ReadLine();
            }
        }
    }
    class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseCors(CorsOptions.AllowAll);
            app.MapSignalR();
        }
    }
    public class MyHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addMessage(name, message);
        }
    }
}

    Kode di atas mencakup tiga kelas:

    • Program, termasuk metode Utama yang mendefinisikan jalur utama eksekusi. Dalam metode ini, aplikasi web jenis Startup dimulai pada URL yang ditentukan (http://localhost:8080). Jika keamanan diperlukan pada titik akhir, SSL dapat diimplementasikan. Lihat Cara: Mengonfigurasi Port dengan Sertifikat SSL untuk informasi selengkapnya.
    • Startup, kelas yang berisi konfigurasi untuk server SignalR (satu-satunya konfigurasi yang digunakan tutorial ini adalah panggilan ke UseCors), dan panggilan ke MapSignalR, yang membuat rute untuk objek Hub apa pun dalam proyek.
    • MyHub, kelas SignalR Hub yang akan diberikan aplikasi kepada klien. Kelas ini memiliki satu metode, Kirim, yang akan dipanggil klien untuk menyiarkan pesan ke semua klien lain yang terhubung.

  6. Compile dan jalankan aplikasi. Alamat yang dijalankan server harus ditampilkan di jendela konsol.

    Cuplikan layar server yang berjalan di jendela konsol.

  7. Jika eksekusi gagal dengan pengecualian System.Reflection.TargetInvocationException was unhandled, Anda harus memulai ulang Visual Studio dengan hak istimewa administrator.

  8. Hentikan aplikasi sebelum melanjutkan ke bagian berikutnya.

Mengakses server dengan klien JavaScript

Di bagian ini, Anda akan menggunakan klien JavaScript yang sama dari tutorial Memulai. Kami hanya akan membuat satu modifikasi pada klien, yaitu menentukan URL hub secara eksplisit. Dengan aplikasi yang dihost sendiri, server mungkin belum tentu berada di alamat yang sama dengan URL koneksi (karena proksi terbalik dan load balancer), sehingga URL perlu didefinisikan secara eksplisit.

  1. Di Penjelajah Solusi, klik kanan pada solusi dan pilih Tambahkan, Proyek Baru. Pilih simpul Web , dan pilih templat Aplikasi Web ASP.NET . Beri nama proyek "JavascriptClient" dan klik OK.

    Cuplikan layar Tambahkan Proyek Baru dengan simpul Web, templat Aplikasi Web S P dot NET, dan bidang Nama sedang disorot.

  2. Pilih templat Kosong , dan biarkan opsi yang tersisa tidak dipilih. Pilih Buat Proyek.

    Cuplikan layar Proyek NET titik S P Baru dengan templat Kosong dipilih dan opsi Buat Proyek disorot.

  3. Di konsol manajer paket, pilih proyek "JavascriptClient" di drop-down Proyek default , dan jalankan perintah berikut:

    Install-Package Microsoft.AspNet.SignalR.JS

    Perintah ini menginstal pustaka SignalR dan JQuery yang akan Anda butuhkan di klien.

  4. Klik kanan pada proyek Anda dan pilih Tambahkan, Item Baru. Pilih simpul Web , dan pilih Halaman HTML. Beri nama halaman Default.html.

    Cuplikan layar Tambahkan Item Baru dengan opsi Web, templat Halaman H T M L, dan bidang Nama sedang disorot.

  5. Ganti konten halaman HTML baru dengan kode berikut. Verifikasi bahwa referensi skrip di sini cocok dengan skrip di folder Skrip proyek.

    <!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-1.6.4.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="http://localhost:8080/signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
        //Set the hubs URL for the connection
            $.connection.hub.url = "http://localhost:8080/signalr";
            
            // Declare a proxy to reference the hub.
            var chat = $.connection.myHub;
            
            // Create a function that the hub can call to broadcast messages.
            chat.client.addMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

    Kode berikut (disorot dalam sampel kode di atas) adalah penambahan yang telah Anda buat untuk klien yang digunakan dalam tutorial Mendapatkan Bintang (selain meningkatkan kode ke SignalR versi 2 beta). Baris kode ini secara eksplisit mengatur URL koneksi dasar untuk SignalR di server.

    //Set the hubs URL for the connection
$.connection.hub.url = "http://localhost:8080/signalr";

  6. Klik kanan pada solusi, dan pilih Atur Proyek Startup.... Pilih tombol radio Beberapa proyek startup , dan atur Tindakan kedua proyek ke Mulai.

    Cuplikan layar Halaman Properti Solusi dengan tombol radio Beberapa proyek startup dan entri Mulai Tindakan disorot.

  7. Klik kanan pada "Default.html" dan pilih Atur Sebagai Halaman Mulai.

  8. Jalankan aplikasi. Server dan halaman akan diluncurkan. Anda mungkin perlu memuat ulang halaman web (atau memilih Lanjutkan di debugger) jika halaman dimuat sebelum server dimulai.

  9. Di browser, berikan nama pengguna saat diminta. Salin URL halaman ke tab atau jendela browser lain dan berikan nama pengguna yang berbeda. Anda akan dapat mengirim pesan dari satu panel browser ke panel lain, seperti dalam tutorial Memulai.