Pengembangan Aplikasi Real-time Menggunakan SignalR

ASP.NET SignalR atau dapat disingkat menjadi SignalR adalah library yang memudahkan kita untuk menambahkan fungsi komunikasi real-time pada aplikasi yang kita kembangkan. Fungsi real-time di sini adalah kemampuan server melakukan pengiriman (push) konten atau data kepada client yang sudah terkoneksi ke server, sehingga server tidak perlu menunggu client untuk melakukan permintaan (request) data terbaru.

SignalR selain digunakan untuk pengembangan aplikasi web, juga bisa digunakan untuk platform lainnya seperti desktop (console dan windows form) ataupun mobile (windows phone, android dan iOS).

SignalR menyediakan API yang memungkinkan server memanggil fungsi/method yang dimiliki oleh client atau pun sebaliknya. Proses memanggil method secara remote ini dikenal dengan istilah remote procedure call (RPC).

Sumber - Introduction to SignalR

Pada gambar di atas Hub merupakan class turunan dari class Microsoft.AspNet.SignalR.Hub yang memungkinkan server memanggil fungsi/method yang dimiliki oleh client atau sebaliknya client memanggil fungsi/method yang dimiliki oleh server. Sedangkan Hub Proxy merupakan objek proxy dari class Hub yang ada di server, sehingga method yang dipanggil melalui objek proxy ini otomatis akan dieksekusi secara remote (dijalankan di sisi server).

Sebagai contoh penggunaan SignalR, kita akan membuat aplikasi sederhana tanpa database. Di contoh ini kita akan melihat bagaimana cara server dan client berbagi data secara real-time.

Aplikasi di atas terdiri dari tiga project yaitu :

1. DemoSignalR.WinFormServer

   Project ini bertipe Windows Application yang berfungsi sebagai Server dari SignalR

2. DemoSignalR.WinFormClient

   Project ini juga bertipe Windows Application yang berfungsi sebagai aplikasi Client

3. DemoSignalR.Model

   Terakhir adalah project DemoSignalR.Model, project ini bertipe Class Library yang isinya hanya berupa class model. Objek dari class model inilah nantinya akan dishare secara real-time dari server ke client atau sebaliknya.

   

Berikutnya kita akan bahas satu persatu ketiga project di atas.

1. DemoSignalR.WinFormServer

Project ini berfungsi sebagai server dari SignalR. Untuk menggunakan SignalR kita perlu menambahkan beberapa library yang bisa kita install via NuGet.

Berikut adalah daftar paket NuGet yang perlu kita tambahkan untuk project server.

SignalR Hubs API

SignalR Hubs API memungkinkan server memanggil fungsi/method yang dimiliki oleh client atau sebaliknya client memanggil fungsi/method yang dimiliki oleh server. Proses memanggil method secara remote ini dikenal dengan istilah remote procedure call (RPC).

Di server kita mendefinisikan method yang bisa langsung dipanggil oleh client, kemudian di dalam method ini akan memanggil method yang dijalankan oleh client. Contoh :

Coba perhatikan kode di atas, method AddCustomer adalah method server yang kita definisikan dan bisa langsung dipanggil oleh client. Nah di dalam method ini juga ada perintah ` Clients.All.RefreshData(customer). Method RefreshData setelah property All adalah dynamic method, sehingga kita bebas menentukan sendiri nama methodnya. Dan jangan lupa method RefreshData` ini juga harus kita definisikan ulang di bagian client.

Untuk menggunakan fitur SignalR Hubs API kita cukup membuat sebuah class yang merupakan turunan dari class Microsoft.AspNet.SignalR.Hub. Misal kita membuat sebuah class dengan nama ServerHub, class ini harus turunan dari class Microsoft.AspNet.SignalR.Hub. Untuk kode lengkapnya seperti berikut :

Mendaftarkan SignalR

SignalR itu seperti parasit, tidak bisa hidup mandiri sehingga membutuhkan sebuah wadah (host) untuk kelangsungan hidupnya. Ada beberapa cara yang bisa digunakan untuk menempatkan SignalR ke dalam wadahnya (host) yaitu :

• Hosting in Internet Information Services (IIS)
• Hosting in a Console or Desktop application (Self hosting)
• Hosting in a Windows Service (Self hosting)

Karena contoh Server SignalR yang kita buat di atas bertipe Windows Application, berarti kita menggunakan cara Self hosting untuk meng-hostkan SignalR. Untuk mengaktifkan fitur Self hosting kita perlu menambahkan library Microsoft.AspNet.SignalR.SelfHost dan Microsoft.AspNet.Cors, kemudian kita buat class baru dengan nama Startup. Untuk kode lengkapnya seperti berikut :

Setelah membuat class ServerHub dan Startup kita lanjutkan dengan form utama (FrmServer). Untuk desain UInya seperti berikut :

Untuk kode lengkapnya seperti berikut :

Setelah menyelesaikan project Server (DemoSignalR.WinFormServer) kita lanjutkan dengan project DemoSignalR.Model.

2. DemoSignalR.Model

Project ini hanya berisi class-class model. Data atau objek dari class-class model inilah yang nantinya akan dishare oleh server dan client secara real-time. Sebagai contoh di project ini kita hanya menambahkan satu class model yaitu Customer.

Class Customer di atas masuk dalam kategori complex types sehingga objek dari class Customer tersebut tidak bisa langsung dikirim dari client ke server atau sebaliknya. Perlu diketahui untuk tipe-tipe data primitif seperti integer, long, boolean termasuk string (pengecualian untuk string bukan tipe data primitif) bisa langsung dikirim dari client ke server atau sebaliknya. Khusus untuk objek dari complex types perlu kita konversi terlebih dulu datanya dalam format json.

Ada dua cara yang bisa kita gunakan yaitu :

• Menambahkan atribut JsonProperty pada property class

• Atau mengkonversi secara langsung objek class ke dalam format json
  

Jadi terserah Anda mau menggunakan cara yang mana.

3. DemoSignalR.WinFormClient

Project terakhir yang akan kita bahas adalah DemoSignalR.WinFormClient ini adalah project untuk Client SignalR, tipenya juga sama seperti project Server SignalR yaitu Windows Application.

Untuk menggunakan SignalR di sisi client kita perlu menambahkan beberapa library yang bisa kita install via NuGet.

Berikut adalah daftar paket NuGet yang perlu kita tambahkan di project client.

Untuk kode lengkapnya seperti berikut :

Dan hasilnya adalah seperti berikut :

Selamat MENCOBA

Referensi :

• Introduction to SignalR
• Getting Started with SignalR 2
• High-Frequency Realtime with SignalR 2
• Learn About ASP.NET SignalR