Tutorial: Memulai SignalR 1.x

Artikel
07/13/2023

Peringatan

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

Tutorial ini menunjukkan cara menggunakan SignalR untuk membuat aplikasi obrolan real time. Anda akan menambahkan SignalR ke aplikasi web ASP.NET kosong dan membuat halaman HTML untuk mengirim dan menampilkan pesan.

Gambaran Umum

Tutorial ini memperkenalkan pengembangan SignalR dengan menunjukkan cara membangun aplikasi obrolan berbasis browser sederhana. Anda akan menambahkan pustaka SignalR ke aplikasi web ASP.NET kosong, membuat kelas hub untuk mengirim pesan ke klien, dan membuat halaman HTML yang memungkinkan pengguna mengirim dan menerima pesan obrolan. Untuk tutorial serupa yang menunjukkan cara membuat aplikasi obrolan di MVC 4 menggunakan tampilan MVC, lihat Memulai SignalR dan MVC 4.

Catatan

Tutorial ini menggunakan SignalR versi rilis (1.x). Untuk detail tentang perubahan antara SignalR 1.x dan 2.0, lihat Meningkatkan Proyek SignalR 1.x.

SignalR adalah pustaka .NET sumber terbuka untuk membangun aplikasi web yang memerlukan interaksi pengguna langsung atau pembaruan data real-time. Contohnya termasuk aplikasi sosial, game multipengguna, kolaborasi bisnis, dan berita, cuaca, atau aplikasi pembaruan keuangan. Ini sering disebut aplikasi real-time.

SignalR menyederhanakan proses pembangunan aplikasi real-time. Ini termasuk pustaka server ASP.NET dan pustaka klien JavaScript untuk mempermudah pengelolaan koneksi server klien dan mendorong pembaruan konten ke klien. Anda dapat menambahkan pustaka SignalR ke aplikasi ASP.NET yang ada untuk mendapatkan fungsionalitas real-time.

Tutorial menunjukkan tugas pengembangan SignalR berikut:

Menambahkan pustaka SignalR ke aplikasi web ASP.NET.
Membuat kelas hub untuk mendorong konten ke klien.
Menggunakan pustaka SignalR jQuery di halaman web untuk mengirim pesan dan menampilkan pembaruan dari hub.

Cuplikan layar berikut menunjukkan aplikasi obrolan yang berjalan di browser. Setiap pengguna baru dapat memposting komentar dan melihat komentar yang ditambahkan setelah pengguna bergabung dengan obrolan.

Instans obrolan

Bagian:

Menyiapkan Proyek
Jalankan Sampel
Memeriksa Kode
Langkah berikutnya

Menyiapkan Proyek

Bagian ini menunjukkan cara membuat aplikasi web ASP.NET kosong, menambahkan SignalR, dan membuat aplikasi obrolan.

Prasyarat:

Visual Studio 2010 SP1 atau 2012. Jika Anda tidak memiliki Visual Studio, lihat Unduhan ASP.NET untuk mendapatkan Alat Pengembangan Ekspres Visual Studio 2012 gratis.
Microsoft ASP.NET dan Web Tools 2012.2. Untuk Visual Studio 2012, alat penginstal ini menambahkan fitur ASP.NET baru termasuk templat SignalR ke Visual Studio. Untuk Visual Studio 2010 SP1, alat penginstal tidak tersedia tetapi Anda dapat menyelesaikan tutorial dengan menginstal paket SignalR NuGet seperti yang dijelaskan dalam langkah-langkah penyiapan.

Langkah-langkah berikut menggunakan Visual Studio 2012 untuk membuat Aplikasi Web Kosong ASP.NET dan menambahkan pustaka SignalR:

Di Visual Studio, buat Aplikasi Web Kosong ASP.NET.
Buka Konsol Manajer Paket dengan memilih Alat | Manajer Paket NuGet | Konsol Manajer Paket. Masukkan perintah berikut ke jendela konsol:

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

Perintah ini menginstal versi terbaru SignalR 1.x.
Di Penjelajah Solusi, klik kanan proyek, pilih Tambahkan | Kelas. Beri nama kelas baru ChatHub.
Di Penjelajah Solusi perluas simpul Skrip. Pustaka skrip untuk jQuery dan SignalR terlihat dalam proyek.

Ganti kode di kelas ChatHub dengan kode berikut.

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);
        }
    }
}

Di Penjelajah Solusi, klik kanan proyek, lalu klik Tambahkan | Item Baru. Dalam dialog Tambahkan Item Baru , pilih Kelas Aplikasi Global dan klik Tambahkan.
Tambahkan pernyataan berikut using setelah pernyataan yang disediakan using di kelas Global.asax.cs.
```
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
```
Tambahkan baris kode berikut dalam Application_Start metode kelas Global untuk mendaftarkan rute default untuk hub SignalR.
```
// Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
```
Di Penjelajah Solusi, klik kanan proyek, lalu klik Tambahkan | Item Baru. Dalam dialog Tambahkan Item Baru , pilih Halaman Html dan klik Tambahkan.
Di Penjelajah Solusi, klik kanan halaman HTML yang baru saja Anda buat dan klik Atur sebagai Halaman Mulai.

Ganti kode default di halaman HTML dengan kode berikut.

<!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-1.1.4.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>:&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>

Simpan Semua untuk proyek.

Jalankan Sampel

Tekan F5 untuk menjalankan proyek dalam mode debug. Halaman HTML dimuat dalam instans browser dan meminta nama pengguna.
Masukkan nama pengguna.
Salin URL dari baris alamat browser dan gunakan untuk membuka dua instans browser lagi. Di setiap instans browser, masukkan nama pengguna yang unik.
Di setiap instans browser, tambahkan komentar dan klik Kirim. Komentar harus ditampilkan di semua instans browser.

Catatan

Aplikasi obrolan sederhana ini tidak mempertahankan konteks diskusi di server. Hub menyiarkan komentar ke semua pengguna saat ini. Pengguna yang bergabung dengan obrolan nanti akan melihat pesan yang ditambahkan sejak mereka bergabung.

Cuplikan layar berikut menunjukkan aplikasi obrolan yang berjalan dalam tiga instans browser, yang semuanya diperbarui saat satu instans mengirim pesan:
Di Penjelajah Solusi, periksa simpul Dokumen Skrip untuk aplikasi yang sedang berjalan. Ada file skrip bernama hub yang dihasilkan pustaka SignalR secara dinamis saat runtime. File ini mengelola komunikasi antara skrip jQuery dan kode sisi server.

Memeriksa Kode

Aplikasi obrolan SignalR menunjukkan dua tugas pengembangan SignalR dasar: membuat hub sebagai objek koordinasi utama di server, dan menggunakan pustaka SignalR jQuery untuk mengirim dan menerima pesan.

Hub SignalR

Dalam sampel kode, kelas ChatHub berasal dari kelas Microsoft.AspNet.SignalR.Hub . Berasal dari kelas Hub adalah cara yang berguna untuk membangun aplikasi SignalR. Anda dapat membuat metode publik di kelas hub Anda lalu mengakses metode tersebut dengan memanggilnya dari skrip jQuery di halaman web.

Dalam kode obrolan, klien memanggil metode ChatHub.Send untuk mengirim pesan baru. Hub pada gilirannya mengirim pesan ke semua klien dengan memanggil Clients.All.broadcastMessage.

Metode Kirim menunjukkan beberapa konsep hub :

Deklarasikan metode publik di hub sehingga klien dapat memanggilnya.
Gunakan properti dinamis Microsoft.AspNet.SignalR.Hub.Clients untuk mengakses semua klien yang terhubung ke hub ini.

Panggil fungsi jQuery pada klien (seperti broadcastMessage fungsi) untuk memperbarui klien.

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

SignalR dan jQuery

Halaman HTML dalam sampel kode menunjukkan cara menggunakan pustaka SignalR jQuery untuk berkomunikasi dengan hub SignalR. Tugas penting dalam kode mendeklarasikan proksi untuk mereferensikan hub, mendeklarasikan fungsi yang dapat dipanggil server untuk mendorong konten ke klien, dan memulai koneksi untuk mengirim pesan ke hub.

Kode berikut mendeklarasikan proksi untuk hub.

var chat = $.connection.chatHub;

Catatan

Di jQuery referensi ke kelas server dan anggotanya dalam kasus camel. Sampel kode mereferensikan kelas C# ChatHub di jQuery sebagai chatHub.

Kode berikut adalah cara Anda membuat fungsi panggilan balik dalam skrip. Kelas hub di server memanggil fungsi ini untuk mendorong pembaruan konten ke setiap klien. Dua baris yang mengodekan konten HTML sebelum menampilkannya bersifat opsional dan menunjukkan cara sederhana untuk mencegah injeksi skrip.

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>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

Kode berikut menunjukkan cara membuka koneksi dengan hub. Kode memulai koneksi lalu meneruskannya fungsi untuk menangani peristiwa klik pada tombol Kirim di halaman HTML.

Catatan

Pendekatan ini memastikan bahwa koneksi dibuat sebelum penanganan aktivitas dijalankan.

$.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();
        });
    });

Langkah berikutnya

Anda mengetahui bahwa SignalR adalah kerangka kerja untuk membangun aplikasi web real-time. Anda juga mempelajari beberapa tugas pengembangan SignalR: cara menambahkan SignalR ke aplikasi ASP.NET, cara membuat kelas hub, dan cara mengirim dan menerima pesan dari hub.

Anda dapat membuat aplikasi sampel dalam tutorial ini atau aplikasi SignalR lainnya tersedia melalui Internet dengan menyebarkannya ke penyedia hosting. Microsoft menawarkan hosting web gratis hingga 10 situs web di akun uji coba Windows Azure gratis. Untuk panduan tentang cara menyebarkan sampel aplikasi SignalR, lihat Menerbitkan Sampel Memulai SignalR sebagai Situs Web Windows Azure. Untuk informasi mendetail tentang cara menyebarkan proyek web Visual Studio ke Situs Web Windows Azure, lihat Menyebarkan Aplikasi ASP.NET ke Situs Web Windows Azure. (Catatan: Transportasi WebSocket saat ini tidak didukung untuk Windows Azure Web Sites. Ketika transportasi WebSocket tidak tersedia, SignalR menggunakan transportasi lain yang tersedia seperti yang dijelaskan di bagian Transportasi dari topik Pengenalan SignalR.)

Untuk mempelajari konsep pengembangan SignalR yang lebih canggih, kunjungi situs berikut untuk kode sumber dan sumber daya SignalR:

Bagikan melalui

Tutorial: Memulai SignalR 1.x

Gambaran Umum

Menyiapkan Proyek

Jalankan Sampel

Memeriksa Kode

Hub SignalR

SignalR dan jQuery

Langkah berikutnya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: