Tutorial: Memulai SignalR 1.x dan MVC 4

Artikel
07/13/2023

Peringatan

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

Tutorial ini menunjukkan cara menggunakan ASP.NET SignalR untuk membuat aplikasi obrolan real time. Anda akan menambahkan SignalR ke aplikasi MVC 4 dan membuat tampilan obrolan untuk mengirim dan menampilkan pesan.

Gambaran Umum

Tutorial ini memperkenalkan Anda ke pengembangan aplikasi web real-time dengan ASP.NET SignalR dan ASP.NET MVC 4. Tutorial ini menggunakan kode aplikasi obrolan yang sama dengan tutorial Memulai SignalR, tetapi menunjukkan cara menambahkannya ke aplikasi MVC 4 berdasarkan templat Internet.

Dalam topik ini Anda akan mempelajari tugas pengembangan SignalR berikut:

Menambahkan pustaka SignalR ke aplikasi MVC 4.
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 lengkap yang berjalan di browser.

Instans obrolan

Bagian:

Menyiapkan Proyek
Jalankan Sampel
Memeriksa Kode
Langkah berikutnya

Menyiapkan Proyek

Prasyarat:

Visual Studio 2010 SP1, Visual Studio 2012, atau Visual Studio 2012 Express. Jika Anda tidak memiliki Visual Studio, lihat unduhan ASP.NET untuk mendapatkan Alat Pengembangan Ekspres Visual Studio 2012 gratis.
Untuk Visual Studio 2010, instal ASP.NET MVC 4.

Bagian ini menunjukkan cara membuat aplikasi ASP.NET MVC 4, menambahkan pustaka SignalR, dan membuat aplikasi obrolan.

1. Di Visual Studio, buat aplikasi ASP.NET MVC 4, beri nama SignalRChat, dan klik OK.
  
  Catatan
  
  Di VS 2010, pilih .NET Framework 4 di kontrol dropdown Versi kerangka kerja. Kode SignalR berjalan pada .NET Framework versi 4 dan 4.5.
  
  2. Pilih templat Aplikasi Internet, kosongkan opsi untuk Membuat proyek pengujian unit, dan klik OK.
  
  3. Buka Alat > Konsol Manajer Paket Manajer > Paket NuGet dan jalankan perintah berikut. Langkah ini menambahkan ke proyek sekumpulan file skrip dan referensi perakitan yang mengaktifkan fungsionalitas SignalR.
  
  install-package Microsoft.AspNet.SignalR -Version 1.1.3 4. Di Penjelajah Solusi perluas folder Skrip. Perhatikan bahwa pustaka skrip untuk SignalR telah ditambahkan ke proyek.
  
  5. Di Penjelajah Solusi, klik kanan proyek, pilih Tambahkan | Folder Baru, dan tambahkan folder baru bernama Hubs. 6. Klik kanan folder Hubs , klik Tambahkan | Kelas, dan buat kelas C# baru bernama ChatHub.cs. Anda akan menggunakan kelas ini sebagai hub server SignalR yang mengirim pesan ke semua klien.

Catatan

Jika Anda menggunakan Visual Studio 2012 dan telah menginstal pembaruan ASP.NET dan Web Tools 2012.2, Anda dapat menggunakan templat item SignalR baru untuk membuat kelas hub. Untuk melakukannya, klik kanan folder Hub, klik Tambahkan | Item Baru, pilih Kelas SignalR Hub (v1), dan beri nama kelas ChatHub.cs.

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 addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

Buka file Global.asax untuk proyek, dan tambahkan panggilan ke metode RouteTable.Routes.MapHubs(); sebagai baris pertama kode dalam Application_Start metode . Kode ini mendaftarkan rute default untuk hub SignalR dan harus dipanggil sebelum Anda mendaftarkan rute lain. Metode yang telah selesai Application_Start terlihat seperti contoh berikut.

protected void Application_Start()
{
    RouteTable.Routes.MapHubs();
    AreaRegistration.RegisterAllAreas();

    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterAuth();
}

Edit kelas yang HomeController ditemukan di Controllers/HomeController.cs dan tambahkan metode berikut ke kelas . Metode ini mengembalikan tampilan Obrolan yang akan Anda buat di langkah selanjutnya.
```
public ActionResult Chat()
{
    return View();
}
```
Klik kanan dalam metode yang Chat baru saja Anda buat, dan klik Tambahkan Tampilan untuk membuat file tampilan baru.
Dalam dialog Tambahkan Tampilan , pastikan kotak centang dipilih untuk Menggunakan tata letak atau halaman master (kosongkan kotak centang lainnya), lalu klik Tambahkan.

Edit file tampilan baru bernama Chat.cshtml. <Setelah tag h2>, tempelkan bagian div> dan @section scripts blok kode berikut <ke halaman. Skrip ini memungkinkan halaman untuk mengirim pesan obrolan dan menampilkan pesan dari server. Kode lengkap untuk tampilan obrolan muncul di blok kode berikut.

Penting

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

@{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>

<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>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</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();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Simpan Semua untuk proyek.

Jalankan Sampel

Tekan F5 untuk menjalankan proyek dalam mode debug.
Di baris alamat browser, tambahkan /home/chat ke URL halaman default untuk proyek. Halaman Obrolan 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 di browser.
Di Penjelajah Solusi, periksa simpul Dokumen Skrip untuk aplikasi yang sedang berjalan. Simpul ini terlihat dalam mode debug jika Anda menggunakan Internet Explorer sebagai penjelajah Anda. Ada file skrip bernama hub yang dihasilkan pustaka SignalR secara dinamis saat runtime. File ini mengelola komunikasi antara skrip jQuery dan kode sisi server. Jika Anda menggunakan browser selain Internet Explorer, Anda juga dapat mengakses file hub dinamis dengan menelusurinya secara langsung, misalnya http://mywebsite/signalr/hubs.

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.addNewMessageToPage.

Metode Kirim menunjukkan beberapa konsep hub :

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

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

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR dan jQuery

File tampilan Chat.cshtml dalam sampel kode menunjukkan cara menggunakan pustaka SignalR jQuery untuk berkomunikasi dengan hub SignalR. Tugas penting dalam kode membuat referensi ke proksi yang dihasilkan secara otomatis untuk 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 unta. Sampel kode mereferensikan kelas C# ChatHub di jQuery sebagai chatHub. Jika Anda ingin mereferensikan ChatHub kelas di jQuery dengan casing Pascal konvensional seperti yang Anda lakukan di C#, edit file kelas ChatHub.cs. using Tambahkan pernyataan untuk mereferensikan Microsoft.AspNet.SignalR.Hubs namespace. Kemudian tambahkan HubName atribut ke ChatHub kelas , misalnya [HubName("ChatHub")]. Terakhir, perbarui referensi jQuery Anda ke ChatHub kelas .

Kode berikut menunjukkan cara membuat fungsi panggilan balik dalam skrip. Kelas hub di server memanggil fungsi ini untuk mendorong pembaruan konten ke setiap klien. Panggilan opsional ke htmlEncode fungsi menunjukkan cara untuk HTML mengodekan konten pesan sebelum menampilkannya di halaman, sebagai cara untuk mencegah injeksi skrip.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

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

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.

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 dan MVC 4

Gambaran Umum

Menyiapkan Proyek

Jalankan Sampel

Memeriksa Kode

Hub SignalR

SignalR dan jQuery

Langkah berikutnya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: