Menggunakan SignalR di ASP .NET Core

SignalR adalah library untuk ASP .Net yang memudahkan developer untuk menambahkan real-time fungsionalitas pada web application. SignalR menambahkan kemampuan web application untuk mem-push konten atau data ke semua atau sebagian client yang sedang terkoneksi tanpa menunggu client tersebut untuk melakukan request terlebih dahulu. Beberapa fungsi real-time yang bisa diimplementasikan menggunakan SignalR adalah notifikasi instan, aplikasi chat sederhana dan aplikasi yang membutuhkan push notification.

Dengan kapabilitas real-time push konten dari server ke client, maka developer dengan mudah dapat menambahkan fitur – fitur real time ke dalam web application. SignalR menyediakan API yang sederhana untuk membuat koneksi antara client dan server  dengan menggunakan RPC (Remote Procedure Call) untuk memanggil fungsi (method) javascript yang ada di client dari code yang ada di server, SignalR juga memelihara koneksi dan secara otomatis meng-handle beberapa event yaitu : OnConnected dan OnDisconnected.

Transport

SignalR menggunakan beberapa mode transport untuk membuat koneksi antara Client dan Server. Beberapa koneksi yang dipakai adalah : HTML 5 Transport (Websocket , Server Sent Events) dan Comet Transport (Forever Frame, Ajax Long Polling), SignalR akan memilih mode transport yang paling optimal untuk digunakan melalui proses seleksi dengan mengecek beberapa kriteria yang harus dipenuhi oleh client dan server. Websocket adalah yang paling optimal, tetapi teknik lain seperti server-sent events dan long-polling bisa juga dipakai bila koneksi websocket tidak tersedia atau client dan web server yang digunakan tidak mendukung teknologi websocket. Jika client menggunakan browser versi lama (internet explorer dibawah versi 8) yang tidak mendukung mode Websocket, SignalR secara otomatis akan menggunakan long-polling atau server-sent event. Teknologi web-server  juga menentukan jenis transport yang didukung oleh suatu web aplikasi yang menggunakan SignalR. Selengkapnya ada di sini.

Hubs

Hub adalah jalur komunikasi atau mekanisme tingkat tinggi yang digunakan SignalR untuk mengijinkan client code untuk memanggil method (fungsi) yang ada di server dengan mudah seperti memanggil method yang ada di client itu sendiri, dan sebaliknya server code bisa memanggil method yang ada di client secara langsung. Karena Hub yang mengatur komunikasi, maka untuk meng-handle event OnConnected dan OnDisconnected kita dapat meng-override kedua method tersebut di dalam Hub Class. Di bawah ini adalah contoh ChatHub dengan fungsi sederhana: mengirim pesan ke semua client yang sedang terkoneksi.

 

 

 

Intinya Hub adalah simple POCO yang menurunkan class Hub, method yang bisa di-override adalah OnConnectedAsync dan OnDisconnectedAsync.

Simple Chat App

Untuk mendemonstrasikan SignalR di asp.net core, mari kita buat aplikasi chat sederhana dengan fitur :

  • hanya user yang sudah terautentikasi yang bisa mengirim dan menerima chat.
  • chat akan di-broadcast ke semua user yang sedang terkoneksi.

Buat project MVC baru menggunakan dotnet cli dan pastikan dikomputer sudah terinstall .net core 2.1 . Buka VSCode dan buat folder baru dengan nama hubs, didalamnya buat class baru yaitu ChatHub.cs copy paste code yang ada di atas.

Kemudian buat controller baru dengan nama ChatController, di dalamnya ada satu method Index yang mengembalikan view. Method ini kosong, karena semua logic untuk mengirim dan menerima chat akan diimplementasikan menggunakan javascript di didalam View Index.cshtml. Untuk penjelasan lebih jelas tentang arsitektur MVC lihat posting saya disini.

Di dalam folder views, tambahkan folder baru Chat dan didalamnya buat file baru Index.cshtml. Untuk menggunakan SignalR javascript client library maka kita harus menginstall npm package @aspnet/signalr, maka itu buka terminal favorit anda dan ketik npm init . untuk menginisialisasi nodejs project dan npm install @aspnet/signalr  untuk menginstall SignalR module. Setelah terinstall, copy file signalr.js dari folder .\node_modules\@aspnet\signalr\dist\browser\ ke folder .\wwwroot\lib\signalr\.

Setelah itu buatlah layout index.cshtml menyerupai chat form, tambahkan referensi javascript  signalr.js dan javascript snippet untuk membuat koneksi ke hub yang kita buat sebelumnya. Seperti yang saya jelaskan di atas bahwa client code bisa memanggil server code secara langsung seperti local method yang dibuat langsung di client.

Supaya signalr bisa digunakan dalam suatu project ASP .Net Core maka kita perlu register Hubs dan services di Startup.cs. seperti gambar di bawah.

Setelah itu cobalah compile dan run aplikasi dengan mengetik:

dotnet build

dan

donet run

di dalam terminal.

 

Source code ada disini.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s