Tutorial: Obrolan real time dengan SignalR 2

Artikel
07/13/2023

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

Di tutorial ini, Anda akan:

Menyiapkan proyek
Menjalankan sampel
Memeriksa kode

Peringatan

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

Prasyarat

Visual Studio 2017 dengan beban kerja ASP.NET dan pengembangan web .

Menyiapkan Proyek

Bagian ini menunjukkan cara menggunakan Visual Studio 2017 dan SignalR 2 untuk membuat aplikasi web ASP.NET kosong, menambahkan SignalR, dan membuat aplikasi obrolan.

Di Visual Studio, buat Aplikasi Web ASP.NET.
Di jendela Proyek ASP.NET Baru - SignalRChat , biarkan Kosong dipilih dan pilih OK.
Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan>Item Baru.
Di Tambahkan Item Baru - SignalRChat, pilihVisual C#>Web>SignalRterinstal> lalu pilih SignalR Hub Class (v2).
Beri nama kelas ChatHub dan tambahkan ke proyek.

Langkah ini membuat file kelas ChatHub.cs dan menambahkan sekumpulan file skrip dan referensi perakitan yang mendukung SignalR ke proyek.

Ganti kode dalam file kelas ChatHub.cs baru dengan kode ini:

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 dan pilih Tambahkan>Item Baru.
Di Tambahkan Item Baru - SignalRChat pilihVisual C#>Webterinstal> lalu pilih Kelas Startup OWIN.
Beri nama kelas Startup dan tambahkan ke proyek.

Ganti kode default di kelas Startup dengan kode ini:

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan>Halaman HTML.
Beri nama indeks halaman baru dan pilih OK.
Di Penjelajah Solusi, klik kanan halaman HTML yang Anda buat dan pilih Atur sebagai Halaman Mulai.

Ganti kode default di halaman HTML dengan kode ini:

<!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-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.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>

Di Penjelajah Solusi, perluas Skrip.

Pustaka skrip untuk jQuery dan SignalR terlihat dalam proyek.

Penting

Manajer paket mungkin telah menginstal versi skrip SignalR yang lebih baru.

Periksa apakah referensi skrip di blok kode sesuai dengan versi file skrip dalam proyek.

Referensi skrip dari blok kode asli:

<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-3.1.1.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>

Jika tidak cocok, perbarui file .html .
Dari bilah menu, pilih Simpan Semua File>.

Jalankan Sampel

Di toolbar, aktifkan Debugging Skrip lalu pilih tombol putar untuk menjalankan sampel dalam mode Debug.
Saat browser terbuka, masukkan nama untuk identitas obrolan Anda.
Salin URL dari browser, buka dua browser lain, dan tempelKAN URL ke bilah alamat.
Di setiap browser, masukkan nama yang unik.
Sekarang, tambahkan komentar dan pilih Kirim. Ulangi di browser lain. Komentar muncul secara real time.

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.

Lihat bagaimana aplikasi obrolan berjalan di tiga browser yang berbeda. Ketika Tom, Anand, dan Susan mengirim pesan, semua browser diperbarui secara real time:
Di Penjelajah Solusi, periksa simpul Dokumen Skrip untuk aplikasi yang sedang berjalan. Ada file skrip bernama hub yang dihasilkan pustaka SignalR saat runtime. File ini mengelola komunikasi antara skrip jQuery dan kode sisi server.

Memeriksa Kode

Aplikasi SignalRChat menunjukkan dua tugas pengembangan SignalR dasar. Ini menunjukkan kepada Anda cara membuat hub. Server menggunakan hub tersebut sebagai objek koordinasi utama. Hub menggunakan pustaka SignalR jQuery untuk mengirim dan menerima pesan.

SignalR Hubs di ChatHub.cs

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

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

Metode ini Send menunjukkan beberapa konsep hub:

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

Panggil fungsi 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 di index.html

Halaman index.html dalam sampel kode menunjukkan cara menggunakan pustaka SignalR jQuery untuk berkomunikasi dengan hub SignalR. Kode melakukan banyak tugas penting. Ini mendeklarasikan proksi untuk mereferensikan hub, menyatakan fungsi yang dapat dipanggil server untuk mendorong konten ke klien, dan memulai koneksi untuk mengirim pesan ke hub.

var chat = $.connection.chatHub;

Catatan

Di JavaScript referensi ke kelas server dan anggotanya harus camelCase. Sampel kode mereferensikan kelas C# ChatHub di JavaScript sebagai chatHub.

Dalam blok kode ini, Anda membuat fungsi panggilan balik dalam 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>');
    };

Kelas hub di server memanggil fungsi ini untuk mendorong pembaruan konten ke setiap klien. Dua baris yang mengodekan html konten sebelum menampilkannya bersifat opsional dan menunjukkan cara yang baik untuk mencegah injeksi skrip.

Kode ini membuka koneksi dengan hub.

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

Catatan

Pendekatan ini memastikan bahwa kode membuat koneksi sebelum penanganan aktivitas dijalankan.

Kode memulai koneksi lalu meneruskannya fungsi untuk menangani peristiwa klik pada tombol Kirim di halaman HTML.

Mendapatkan kode

Unduh Proyek yang Selesai

Sumber Daya Tambahan:

Untuk informasi selengkapnya tentang SignalR, lihat sumber daya berikut ini:

Langkah berikutnya

Di tutorial ini, Anda akan:

Menyiapkan proyek
Menjalankan sampel
Memeriksa kode

Lanjutkan ke artikel berikutnya untuk mempelajari cara menggunakan SignalR dan MVC 5.

SignalR 2 dan MVC 5

Share via

Tutorial: Obrolan real time dengan SignalR 2

Prasyarat

Menyiapkan Proyek

Jalankan Sampel

Memeriksa Kode

SignalR Hubs di ChatHub.cs

SignalR dan jQuery di index.html

Mendapatkan kode

Sumber Daya Tambahan:

Langkah berikutnya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: