See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/330105251

Seri Belajar ASP.NET: Membangun Aplikasi Real-Time dengan ASP.NET Core

SignalR

Book · January 2019

CITATIONS READS

0 3,765

2 authors:

Erick Kurniawan M Reza Faisal

21 PUBLICATIONS   4 CITATIONS   
Universitas Lambung Mangkurat
58 PUBLICATIONS   105 CITATIONS   
SEE PROFILE
SEE PROFILE

Some of the authors of this publication are also working on these related projects:

IT Asset Management View project

DNA Sequence Classification View project

All content following this page was uploaded by M Reza Faisal on 03 January 2019.

The user has requested enhancement of the downloaded file.

 Kata Pengantar
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia & INDC
yang selalu memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat
untuk berkarya dan berbagi. Tidak lupa penulis juga mengucapkan terima kasih kepada
Microsoft Indonesia atas dukungan dan dedikasinya pada komunitas MUGI & INDC sehingga
kami bisa selalu terus berkarya.
Buku ini ditujukan untuk pengembang yang ingin membuat aplikasi real-time (Real-Time
Application/RTA). Saat ini telah tersedia library yang mempermudah developer untuk
membangun aplikasi real-time, salah satunya adalah ASP.NET SignalR. Buku ini akan
memberikan panduan menyiapkan backend yang berperan sebagai server. Sedangkan
panduan untuk membuat aplikasi client akan diberikan dalam tiga tipe project yaitu project
aplikasi web, aplikasi desktop atau aplikasi mobile. Harapannya pembaca dapat mendapatkan
pengetahuan dasar tentang konsep RTA sekaligus penerapannya.
Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-
training.com atau ke reza.faisal@gmail.com.
Akhir kata semoga buku ini dapat bermanfaat bagi komunitas IT di Indonesia

Yogyakarta, Januari 2019 Banjarmasin, Januari 2019

Erick Kurniawan M Reza Faisal

(erick@actual-training.com) (reza.faisal@gmail)

I
 Daftar Isi
Kata Pengantar ............................................................................................... I
Daftar Isi ........................................................................................................ II
Daftar Gambar ............................................................................................. IV
Daftar Tabel .................................................................................................. VI
1 Pendahuluan .................................................................................................7
Aplikasi Real-Time ..........................................................................................7
Socket .................................................................................................................7
Multicast ..........................................................................................................14
Aplikasi Web...................................................................................................17
Web Socket ......................................................................................................18
ASP.NET SignalR ...........................................................................................18
SignalR dan WebSocket ................................................................................20
Transport dan Fallback ..................................................................................20
ASP.NET Core SignalR .................................................................................20
Kebutuhan Client ...........................................................................................22
Javascript Client ...................................................................................................22
.NET Client ...........................................................................................................22

Source Code .....................................................................................................23

Referensi ..........................................................................................................23
2 Aplikasi ASP.NET Core SignalR .............................................................24
Membuat Web Project ...................................................................................24
Menambahkan SignalR Hub ........................................................................27
Konfigurasi SignalR ......................................................................................27
Menambahkan SignalR Client .....................................................................29
Menjalankan Aplikasi ...................................................................................31
Source Code .....................................................................................................32
Referensi ..........................................................................................................32
3 SignalR dengan TypeScript dan Webpack .............................................33
Membuat ASP.NET Core Web Application ...............................................33
Konfigurasi Webpack dan TypeScript .......................................................34

II
 Pengaturan Aplikasi ASP.NET Core ...........................................................40
Client Server Communication ......................................................................42
Mencoba Menjalankan Aplikasi .................................................................43
Source Code .....................................................................................................44
Referensi ..........................................................................................................44
4 Hosting SignalR pada Microsoft Azure .................................................45
Membuat Instance Azure Apps ...................................................................45
Konfigurasi Azure Apps ...............................................................................46
Mengunggah Aplikasi ...................................................................................47

5 Windows Form Client ...............................................................................51

Membuat Project Windows Form ................................................................51
Menambahkan NuGet Package SignalR ....................................................51
Mendesain Form Chat ...................................................................................52
Menambahkan Kode Untuk Koneksi .........................................................52
Menjalankan Aplikasi Windows Forms.....................................................57
Referensi ..........................................................................................................59
6 Mobile Client (Xamarin Forms) ..............................................................60
Membuat Project Xamarin Cross Platform.................................................60
Menambahkan Library SignalR Pada Xamarin Forms ............................61
Membuat Form Untuk Mengirimkan Pesan ..............................................61
Menambahkan Kode untuk Menampilkan Data dan Kirim Data .........62
Menjalankan Aplikasi Xamarin di Android Device/Emulator ...............66
Source Code .....................................................................................................68
Referensi ..........................................................................................................69
7 Penutup ........................................................................................................70

III
 Daftar Gambar
Gambar 1. Ilustrasi socket. ................................................................................................................ 8
Gambar 2. Uji coba komunikasi multicast. .................................................................................... 16
Gambar 3. Program listener. ........................................................................................................... 16
Gambar 4. Komunikasi request and respond. ............................................................................... 17
Gambar 5. Web service. ................................................................................................................... 17
Gambar 6. Komunikasi client dan server dengan SignalR........................................................... 19
Gambar 7. Arsitektur ASP.NET Core SignalR. ............................................................................. 22
Gambar 8. Project SignalRChat. ..................................................................................................... 24
Gambar 9. Web Application. .......................................................................................................... 25
Gambar 10. Client-Side Library. ..................................................................................................... 25
Gambar 11. Versi library. ................................................................................................................ 26
Gambar 12. Target Location. ........................................................................................................... 26
Gambar 13. Aplikasi web SignalRChat .......................................................................................... 31
Gambar 14. Mengirim pesan. ......................................................................................................... 31
Gambar 15. Menerima Pesan. ......................................................................................................... 32
Gambar 16. Konfigurasi. ................................................................................................................. 33
Gambar 17. Web Application. ........................................................................................................ 34
Gambar 18. Perintah npm pada console. ....................................................................................... 34
Gambar 19. Hasil perintah npm install. ......................................................................................... 35
Gambar 20. Membuat file webpack.config.js. ............................................................................... 36
Gambar 21. Menambahkan file style sheet. ................................................................................... 38
Gambar 22. Menambahkan file TypeScript. .................................................................................. 39
Gambar 23. Install library SignalR. ................................................................................................ 42
Gambar 24. Membuat bundle client-side asset. ............................................................................ 43
Gambar 25. Tampilan untuk mengirim pesan. ............................................................................. 44
Gambar 26. Percakapan pada aplikasi. .......................................................................................... 44
Gambar 27. Layanan Azure App.................................................................................................... 45
Gambar 28. Web Apps. ................................................................................................................... 45
Gambar 29. Form informasi Web App........................................................................................... 46
Gambar 30. Application settings. ................................................................................................... 46
Gambar 31. Opsi web socket........................................................................................................... 47
Gambar 32. Overview...................................................................................................................... 47

IV
Gambar 33. Publish.......................................................................................................................... 48
Gambar 34. Publish Target.............................................................................................................. 48
Gambar 35. Import Profile. ............................................................................................................. 48
Gambar 36. Publish.......................................................................................................................... 49
Gambar 37. Akses project................................................................................................................ 49
Gambar 38. Aplikasi web SignalRChat. ......................................................................................... 50
Gambar 39. Membuat project Windows Form. ............................................................................. 51
Gambar 40. NuGet Package. ........................................................................................................... 51
Gambar 41. Desain Form Chat. ...................................................................................................... 52
Gambar 42. SignalR Chat Sample................................................................................................... 57
Gambar 43. Koneksi ke chatHub. ................................................................................................... 57
Gambar 44. Web Apps. ................................................................................................................... 58
Gambar 45. Pesan pada aplikasi Windows Form. ........................................................................ 58
Gambar 46. Menerima pesan di aplikasi web. .............................................................................. 58
Gambar 47. Menerima pesan di aplikasi Windows Form. ........................................................... 59
Gambar 48. Project Xamarin Forms. .............................................................................................. 60
Gambar 49. Template. ..................................................................................................................... 60
Gambar 50. Solution XamarinSignalRClient. ................................................................................ 61
Gambar 51. Manage Packages for Solution. .................................................................................. 61
Gambar 52. Menjalankan aplikasi. ................................................................................................. 66
Gambar 53. Tampilan aplikasi. ....................................................................................................... 67
Gambar 54. Koneksi......................................................................................................................... 67
Gambar 55. Pengiriman pesan di aplikasi Web Client. ................................................................ 68
Gambar 56. Pesan pada aplikasi mobile. ....................................................................................... 68

V
 Daftar Tabel

Tabel 1. Perbandingan antara ASP.NET SignalR dan ASP.NET Core SignalR. ......................... 21
Tabel 2. Browser yang support SignalR. ........................................................................................ 22

VI
 1
Pendahuluan

Aplikasi Real-Time
Aplikasi real-time atau Real-Time Application (RTA) adalah program aplikasi yang
mempunyai fungsi dalam rentang waktu yang dirasakan pengguna secara langsung atau
terjadi saat itu juga. Contoh aplikasi real-time adalah:
- Aplikasi video conference.
- Game online.
- Chatting atau instant messaging seperti WhatsApp, Telegram atau Facebook
Messanger.

Socket
Salah satu cara komunikasi antar proses-proses pada jaringan komputer adalah dengan
memanfaatkan socket. Komunikasi dengan memanfaatkan socket dapat menggunakan
transmisi TCP ataupun UDP. Jika menggunakan transmisi TCP maka istilah datanya biasa
dikenal sebagai stream, sedangkan jika menggukan transmisi UDP maka istilah datanya
dikenal sebagai datagram. Untuk lebih mendapatkan pengetahuan yang lebih jauh tentang
TCP, UDP, stream dan datagram maka pembaca dianjurkan untuk membaca materi-materi
tentang Jaringan Komputer atau Sistem Tersebar.
Cara komunikasi ini adalah dengan membuat socket pada proses yang diinginkan. Informasi
yang diperlukan untuk melakukan komunikasi via socket adalah IP address dan port yang
digunakan.
Sebagai contoh, jika ada dua komputer yang terkoneksi pada jaringan komputer. Maka pada
pada setiap komputer tersebut dapat dibuat proses untuk saling berkomunikasi yang artinya
diperlukan socket pada setiap proses tersebut yang secara sederhana dapat digambarkan
seperti berikut.

7
 Gambar 1. Ilustrasi socket.
Pada gambar di atas, dicontohkan pada proses sender mempunyai fungsi untuk mengirimkan
pesan lewat jaringan komputer. Sedangkan pada proses listener akan berfungsi untuk
menerima pesan dari sender dan begitu pesan diterima proses ini akan memberikan balasan
kepada proses sender.
Berikut ini adalah contoh kode program implementasi dari ilustrasi di atas. Berikut ini adalah
kode program yang dapaat digunakan untuk proses sender, kode program dibawah ini dibuat
menggunakan C# dan .NET Core 2.1 SDK.
Kode program berikut untuk Sever / Listener.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Net.Sockets;

namespace ServerListenerConsole
{
class Program
{
// data masuk dari client.
public static string data = null;

public static void StartListening()

{
// data buffer untuk data masuk.
byte[] bytes = new Byte[1024];

// menentukan lokal endpoint untuk socket.

IPHostEntry ipHostInfo = Dns.GetHostEntry(Dns.GetHostName());

8
 IPAddress ipAddress = ipHostInfo.AddressList[0];
IPEndPoint localEndPoint = new IPEndPoint(ipAddress, 11000);
// membuat socket TCP/IP.

Socket listener = new Socket(ipAddress.AddressFamily,

SocketType.Stream, ProtocolType.Tcp); //new Socket(AddressFamily.InterNetwork,
SocketType.Stream, ProtocolType.Tcp);
// Bind socket ke local endpoint dan
// mendengarkan data yang masuk.
try
{
Console.WriteLine("Hostname : " + ipHostInfo.HostName);
Console.WriteLine("IP Addr : " + localEndPoint.Address);
Console.WriteLine("Port : " + localEndPoint.Port);

listener.Bind(localEndPoint);
listener.Listen(10);
while (true)
{
Console.WriteLine("");
Console.WriteLine("Menunggu pesan baru...");
// Program dihentikan saat menunggu koneksi yang masuk.
Socket handler = listener.Accept();
data = null;
while (true)
{
bytes = new byte[1024];
int bytesRec = handler.Receive(bytes);
data += Encoding.ASCII.GetString(bytes, 0, bytesRec);

if (data.IndexOf("<EOF>") > -1)

{
break;
}
}

// menampilkan data pada layar.

data = data.Substring(0, data.Length - 5);
Console.WriteLine(DateTime.Now.ToString() + " : {0}",
data);

9
 // mengirimkan balasan ke client.
data = DateTime.Now.ToString();
byte[] msg = Encoding.ASCII.GetBytes(data);
handler.Send(msg);
handler.Shutdown(SocketShutdown.Both);
handler.Close();
}
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}

Console.WriteLine("\nPress ENTER to continue...");

Console.Read();
}

static int Main(string[] args)

{
StartListening();
return 0;
}
}
}

Kemudian tambahkan juga program Client yang akan digunakan untuk mengirimkan pesan.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Net.Sockets;

namespace ClientSenderConsole
{
class Program
{
public static void StartChat(string message)
{
// Data buffer untuk data masuk.

10
 byte[] bytes = new byte[1024];

// melakukan koneksi remote ke server.

try
{
// menentukan endpoint remote untuk socket.
// contoh digunakan port 11000.
IPHostEntry ipHostInfo = Dns.GetHostEntry(Dns.GetHostName());
IPAddress ipAddress = ipHostInfo.AddressList[0];
IPEndPoint remoteEP = new IPEndPoint(ipAddress, 11000);

// membuat socket TCP/IP.

Socket sender = new Socket(ipAddress.AddressFamily,
SocketType.Stream, ProtocolType.Tcp);

// melakukan koneksi ke socket remote endpoint.

// penanganan jika error.
try
{
sender.Connect(remoteEP);

Console.WriteLine("Socket connected to {0}",

sender.RemoteEndPoint.ToString());

// encode data string menjadi byte array.

byte[] msg = Encoding.ASCII.GetBytes(message + "<EOF>");

// mengirim data via socket.

int bytesSent = sender.Send(msg);

// menerima respon dari server.

int bytesRec = sender.Receive(bytes);
Console.WriteLine("Terkirim pada
{0}",Encoding.ASCII.GetString(bytes, 0, bytesRec));
Console.WriteLine("Konfirmasi diterima pada " +
DateTime.Now.ToString());
Console.WriteLine();

// release socket. sender.Shutdown(SocketShutdown.Both);

sender.Close();

11
 catch (ArgumentNullException ane)
{
Console.WriteLine("ArgumentNullException : {0}",
ane.ToString());
}
catch (SocketException se)
{
Console.WriteLine("SocketException : {0}", se.ToString());
}
catch (Exception e)
{
Console.WriteLine("Unexpected exception : {0}",
e.ToString());
}
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
}

static int Main(string[] args)

{
bool isRepeat = true;
while (isRepeat)
{
Console.Write("Pesan : ");
string message = Console.ReadLine(); StartChat(message);

if (!String.IsNullOrEmpty(message))
{
if (message.ToUpper().Equals("EXIT"))
{
isRepeat = false;
}
}
}
return 0;
}
}

12
}

Untuk memperlihatkan bagaimana kedua program di atas melakukan pengiriman pesan via
socket maka dapat dijalankan proses listener/server terlebih dahulu, maka dapat dilihat
tampilan seperti berikut ini.

Selanjutnya dijalanakn proses sender/client yang berfungsi untuk mengirimkan pesan. Pada
gambar dibawah ini dapat dilihat pesan dikirimkan dan mendapat respon dari proses listener.
Sedangkan pada proses listener dapat dilihat bagaimana pesan diterima

Dari contoh di atas maka dapat dilihat bahwa komunikasi via socket memungkinkan pesan
atau data dikirimkan antar proses yang terkoneksi pada jaringan. Berdasarkan skenario
sederhana seperti pada contoh di atas maka dapat dikembangkan untuk banyak hal, sebagai
contoh untuk aplikasi chatting, pengiriman notifikasi atau data penting secara real-time dan
lain-lain. Pengiriman perubahan data secara real-time sering digunakan pada aplikasi penting
seperti pada bursa saham, dimana data tidak diminta oleh client ke server, tapi justru
sebaliknya yaitu server mengirimkan data kepada client jika terjadi perubahan pada data.
Implementasi yang lain adalah pada game online, dimana antar pemain terkoneksi pada
server game agar bisa saling berinterasi dengan pemain lain secara real-time, hal ini tentunya
dapat memanfaatkan komunikasi dengan memanfaatkan socket.

13
Multicast
Komunikasi multicast memungkinkan sebuah pesan dikirimkan dari sebuah proses
dikirimkan kepada setiap anggota dari sebuah kelompok proses. Atau mengirimkan sebuah
informasi kepada banyak penerima secara sekaligus dan sering dikenal dengan istilah
broadcast. Sebagai contoh adalah mengirimkan pesan dari 1 komputer ke seluruh komputer
yang berada dalam 1 jaringan.
Untuk melihat cara kerja komunikasi multicast dapat dengan mencoba kode program berikut
ini. Seperti halnya pembahasan komunikasi socket di atas, komunikasi ini juga masih
memanfaatkan socket dan contoh ini terdiri atas dua program yaitu listener dan sender.
Berikut ini adalah kode program listener.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Threading.Tasks;

namespace MulticastServer
{
class Program
{
static void Main(string[] args)
{
UdpClient client = new UdpClient();

client.ExclusiveAddressUse = false;
IPEndPoint localEp = new IPEndPoint(IPAddress.Any, 2222);

client.Client.SetSocketOption(SocketOptionLevel.Socket,
SocketOptionName.ReuseAddress, true);
client.ExclusiveAddressUse = false;
client.Client.Bind(localEp);
IPAddress multicastaddress = IPAddress.Parse("239.0.0.222");
client.JoinMulticastGroup(multicastaddress);

Console.WriteLine("Listening this will never quit so you will need

to ctrl-c it");

while (true)
{

14
 Byte[] data = client.Receive(ref localEp);
string strData = Encoding.Unicode.GetString(data);
Console.WriteLine(strData);
}
}
}
}

Sedangkan berikut ini adalah kode program proses sender.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Threading.Tasks;

namespace MulticastSender
{
class Program
{
static void Main(string[] args)
{
UdpClient udpclient = new UdpClient();

IPAddress multicastaddress = IPAddress.Parse("239.0.0.222");

udpclient.JoinMulticastGroup(multicastaddress);
IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222);
Byte[] buffer = null;
Console.WriteLine("Press ENTER to start sending messages");
Console.ReadLine();
for (int i = 0; i <= 8000; i++)
{
buffer = Encoding.Unicode.GetBytes(i.ToString());
udpclient.Send(buffer, buffer.Length, remoteep);
Console.WriteLine("Sent " + i);
}
Console.WriteLine("All Done! Press ENTER to quit.");
Console.ReadLine();
}

15
 }
}

Pada gambar di bawah ini merupakan uji coba komunikasi multicast, dimana window pada
sisi kiri adalah program sender yang akan mengirimkan sebuah pesan ke beberapa program
listener (pada sisi kanan) sekaligus.

Gambar 2. Uji coba komunikasi multicast.

Berikut ini adalah hasil dimana pesan yang dikirimkan program sender berhasil diterima oleh
kedua program listener tersebut.

Gambar 3. Program listener.

Berbeda dengan kode program pada bagian sebelumnya, pada kode program ini
menggunakan transmisi UDP untuk melakukan komunikasi. Kemudian IP address yang
digunakan bukanlah IP address dari komputer program listener. Untuk melakukan
komunikasi multicast digunakan IP address yang khusus untuk keperluan itu yaitu IP
address class D dari 224.0.0.0 sampai 239.255.255.255.
Jenis komunikasi multicast dapat dimanfaatkan untuk banyak keperluan, diantaranya adalah
dapat dimanfaatkan untuk mengiriman notifikasi atau alert ke banyak proses yang berada
dalam satu kelompok.

16
Aplikasi Web
Komunikasi aplikasi web menggunakan protokol HTTP. Pada aplikasi web terdapat server
yang dikenal dengan istilah web server dan client yang akan mengakses halaman atau
layanan web tersebut disebut client. Salah satu program client yang sering digunakan adalah
web browser. Cara komunikasi yang dilakukan adalah request dan respond seperti pada
gambar di bawah ini.

Gambar 4. Komunikasi request and respond.

Jika yang diakses client adalah halaman web maka client akan menuliskan nama halaman
yang akan di akses (request) kemudian web server akan memberikan halaman yang diminta
oleh client tersebut (respond), dan data halaman web (HTML) akan ditampilkan menurut
kaidah antarmuka HTML.
Jika yang diakses oleh client adalah layanan web (web server) maka dapat digambarkan
sebagai berikut. Seperti diketahui, web service adalah mekanisme mengakses fungsi yang ada
di server secara remote lewat jalur HTTP.

Gambar 5. Web service.

Seperti halnya pada saat mengakes halaman web, saat mengakses web service pun tetap
menggunakan cara request dan respond. Yang membedakan dari halaman web adalah data
yang didapat hasil respond ini adalah berupa data XML atau JSON.
Dengan cara komunikasi request-respond ini maka perubahan data pada client hanya bisa
terjadi jika client melakukan permintaan pembaharuan data ke server. Jadi tidak
dimungkinkan jika server mengirimkan data ke client tanpa permintaan. Sehingga tidak
dimungkinkan membuat aplikasi chatting secara real-time jika hanya memanfaatkan standar
komunikasi HTTP saja.

17
Web Socket
Dari paparan di atas, diketahui jika komunikasi HTTP mempunyai keterbatasan jika
dibandingkan komunikasi via socket yang sebelumnya telah dibahas. Tetapi keduanya
mempunyai persamaan yaitu ada yang berperan sebagai client dan yang lainnya berperan
sebagai server. Keduanya sama-sama berkomunikasi pada jaringan tetapi pada proses client
dan server pada aplikasi web tidak memiliki “socket”. Jadi jika aplikasi web ingin
berkomunikasi seperti layaknya komunikasi socket yang telah dibahas di atas maka pada
proses client dan server perlu ditambahkan “socket”.
Adalah web socket protokol yang memungkinkan hal itu bisa dilakukan. Web socket
merupakan protokol yang menyediakan kanal komunikasi full-duplex dengan menggunakan
sebuah koneksi TCP. Seperti halnya socket yang memerlukan IP address dan port untuk
saling berkomunikasi, maka web socket pun memerlukan kedua hal itu. Tetapi karena
digunakan jalur HTTP artinya port yang digunakan adalah port 80. Hal ini merupakan
keuntungan tersendiri karena port tersebut umum digunakan, sehingga tidak akan
mempunyai masalah dengan kebijakan firewall.
Saat ini web socket sudah didukung dan dapat digunakan pada web browser seperti Internet
Explorer, Google Chrome, Firefox, Safari dan Opera. Selain itu web socket tidak hanya dapat
digunakan pada pada web browser dan web server saja, tetapi dapat digunakan pada aplikasi
client atau server yang lain. Hal ini berarti komunikasi socket ke web server dapat dilakukan
oleh aplikasi Web, Windows Forms, Android, IOS, Windows 10 Apps, dan lain-lain.

ASP.NET SignalR
Jika kita perhatikan cara melakukan koneksi pada contoh program yang dibahas pada bagian
Socket dan Multicast terlihat sangat mudah dan singkat.
Sebagai contoh untuk membuat socket yang menggunakan transmisi TCP cukup dengan cara
seperti berikut ini.
IPHostEntry ipHostInfo = Dns.Resolve(Dns.GetHostName());
IPAddress ipAddress = ipHostInfo.AddressList[0];
IPEndPoint localEndPoint = new IPEndPoint(ipAddress, 11000);
Socket listener = new Socket(AddressFamily.InterNetwork,
SocketType.Stream, ProtocolType.Tcp);

Atau untuk membuat komunikasi multicast cukup dengan cara berikut ini.
UdpClient udpclient = new UdpClient();
IPAddress multicastaddress = IPAddress.Parse("239.0.0.222");
udpclient.JoinMulticastGroup(multicastaddress);
IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222);

Kemudahan penulisan kode di atas dikarenakan hal itu sudah ditangani oleh .NET
Framework dengan cara memanfaatkan namespace System.Net dan System.Net.Socket.
Sehingga developer yang menggunakan namespace tersebut dapat langsung menggunakan
class-class untuk komunikasi menggunakan socket.
ASP.NET SignalR atau dapat disingkat menjadi SignalR adalah library seperti halnya
namespace di atas yang bertujuan untuk mempermudahkan kerja developer. SignalR adalah

18
library yang dpat digunakan oleh developer ASP.NET untuk memudahkan membuat proses
fungsi web real-time pada aplikasi yang dibuat. Fungsi web real-time adalah kemampuan
untuk membuat kode 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 baru.
Fungsional real-time pada aplikasi web ASP.NET dengan menggunakan SignalR dapat
digunakan untuk membuat aplikasi chat yang sesungguhnya. Bukan hanya itu saja developer
dapat melakukan banyak hal lainnya sebagai contoh untuk membuat dashboard dan aplikasi
monitoring, aplikasi kolaborasi yang berfungsi untuk melakukan edit dokumen secara
simultan oleh banyak user, update kemajuan pekerjaan dan real-time form. SignalR juga
dapat digunakan untuk aplikasi web yang memerlukan update dengan frekuensi tinggi dari
server seperti real-time game.
SignalR menyediakan API yang mudah untuk membuat server-to-client remote procedure
call (RPC) yang memanggil fungsi-fungsi Javascript pada client browser dan platform client
lainnya dari kode server-side. Ini artinya fungsi kode pada server diijinkan untuk memanggil
fungsi kode pada client. SignalR juga menyediakan API untuk mengelola koneksi seperti
untuk event connect dan disconnect, selain itu juga menyediakan untuk koneksi group.
Pada gambar di bawah ini menjelaskan komunikasi antara client dan server dengan
memanfaatkan SignalR.

Gambar 6. Komunikasi client dan server dengan SignalR.

SignalR menangani pengelolaan koneksi secara otomatis dan terdapat kemampuan untuk
melakukan broadcast pesan secara simultan ke seluruh client yang telah terkoneksi ke server.
SignalR membuat koneksi antara client dan server terjadi secara persitent tidak seperti yang
terjadi pada koneksi HTTP pada umumnya.
Aplikasi yang menggunakan SignalR dapat menangani ribuan client menggunakan Service
Bus, SQL Server atau Redis.

19
SignalR dan WebSocket
SignalR berkomunikasi dengan memanfaatkan transport WebSocket jika tersedia, tetapi jika
transport tersebut belum tersedia maka komunikasi masih bisa dilakukan dengan transport
lainnya yang tersedia. Artinya developer yang menggunakan SignalR tidak perlu khawatir
akan transport yang digunakan untuk membuat fungsi web real-time. Developer juga tidak
perlu khawatir akan perubahan karena perkembangan teknologi WebSocket dan transport
lainnya karena SignalR akan dikembangkan secara berkesinambungan mengikuti
perkembangan teknologi yang ada.
WebSocket adalah transport ideal untuk SignalR karena efisien dalam penggunaan memory
server dan latency terendah.

Transport dan Fallback

Transport yang digunakan oleh SignalR adalah :
1. Transport HTML 5: Pada jenis transport ini terdapat dua transport yang dapat
digunakan yaitu :
a. WebSocket, transport ini telah didukung oleh versi terbaru dari Internet
Explorer, Google Chrome, Mozilla Firefox dan pada web browser Safari dan
Opera hanya sebagian implementasi saja yang dilakukan. Artinya tidak
seluruh kemampuan dari transport WebSocket didukung pada Safar dan
Operai.
b. Server Sent Events juga dikenal dengan istilah EventSource telah didukung
oleh seluruh web browser kecuali Internet Explorer.
2. Transport Coment: Berikut ini aalah transport yang digunakan pada jenis ini, yaitu :
a. Forever Frame, transport ini hanya dapat digunakan pada Internet Explorer.
b. Ajax long polling.

ASP.NET Core SignalR

ASP.NET Core SignalR adalah versi terbaru dari Library SignalR yang sudah mendukung
.NET Core. SignalR sendiri ada pada .NET Core dan ASP.NET Core mulai versi 2.1.
Secara fungsionalitas tidak ada perbedaan yang signifikan antara SignalR .NET Classic (.NET
4.5 keatas) dan SignalR untuk ASP.NET Core. Tetapi ada beberapa perbedaan yang perlu
dicermati ketika menggunakan ASP.NET Core SignarR. Perbedaan yang jelas terlihat adalah
pada nama library/package yang ada pada NuGet Package, dan perbedaan framework yang
didukung.
Berikut adalah tabel perbedaan nama package-nya.

20
 Tabel 1. Perbandingan antara ASP.NET SignalR dan ASP.NET Core SignalR.

Beberapa perbedaan fitur yang lain adalah sebagai berikut:

1. Automatic Reconnects : Fitur ini belum didukung pada ASP.NET Core SignalR .
Jika client terputus maka pengguna harus secara eksplisit memulai koneksi baru jika
ingin terhubung kembali.
2. Protocol Support: ASP.NET Core SignalR mendukung JSON dan juga protokol baru
yaitu binary protocol yang berbasis MessagePack.
3. Transport: Forever Frame transport tidak didukung pada ASP.NET Core SignalR.
4. Single hub per connection: Pada ASP.NET Core SignalR, connection model
disederhanakan. Connection dibuat langsung ke hub tunggal.
5. Streaming: ASP.NET Core SignalR sekarang mendukung streaming data dari hub
ke client.
6. PersistentConnection removal: ASP.NET Core SignalR sudah tidak lagi
mendukung PersistentConnection.
7. GlobalHost: karena ASP.NET Core menggunakan DI (Dependency Injection) maka
GlobalHost tidak digunakan lagi.
8. HubPipeline: ASP.NET Core SignalR tidak mendukung modul HubPipeline.
9. TypeScript: ASP.NET Core SignalR client ditulis menggunakan Typescript. Anda
dapat memeilih menggunakan Javascript atau Typescript untuk membuat client.
10. jQuery: Jika pada ASP.NET SignalR lama membutuhkan jQuery maka di ASP.NET
Core SignalR dependency terhadap jQuery sudah dihilangkan.
11. Scaleout: ASP.NET Core SignalR mendukung Azure SignalR Services dan Redis.
Berikut adalah gambar dari arsitektur ASP.NET Core SignalR.

21
 Gambar 7. Arsitektur ASP.NET Core SignalR.

Kebutuhan Client
SignalR untuk ASP.NET Core mendukung server platform yang didukung oleh ASP.NET
Core.

Javascript Client
Browser yang dibutuhkan untuk menjalankan ASP.NET Core SignalR adalah sebagai berikut:

Tabel 2. Browser yang support SignalR.

.NET Client
.NET Client dapat dijalankan pada semua platform yang mendukung ASP.NET Core seperti
Xamarin yang dapat digunakan untuk membangun aplikasi Android atau IOS.
Jika server menjalankan IIS, maka web socket transport membutuhkan IIS 8.0 keatas yang
berjalan pada platform Windows Server 2012 keatas.

22
Source Code
https://github.com/ekurniawan/SampleServerListenerConsole
https://github.com/ekurniawan/SampleClientSenderConsole

Referensi
https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.2
http://elvanydev.com/SignalR-Core-SqlDependency-part1/

23
 2
Aplikasi ASP.NET Core SignalR
Pada bab ini akan dicontohkan pembuatan aplikasi realtime menggunakan SignalR. Aplikasi
Client yang akan dibuat menggunakan library Javascript. Beberapa topik yang akan dibahas
pada bab ini adalah:
• Membuat Project Web dengan ASP.NET Core
• Menambahkan ASP.NET SignalR Library
• Membuat SignalR Hub
• Pengaturan project menggunakan SignalR
• Menambahkan kode untuk mengirimkan pesan dari satu client ke semua client yang
terhubung
Untuk mencoba menjalankan contoh kode dibawah ini dibutuhkan tools sebagai berikut:
• Visual Studio 2017 versi 15.9 keatas atau Visual Studio Code
• .NET Core SDK 2.2

Membuat Web Project

1. Buat project ASP.NET Core application dengan nama SignalRChat.

Gambar 8. Project SignalRChat.

2. Pilih Web Application, anda dapat menggunakan .NET SDK versi 2.1 atau 2.2

24
 Gambar 9. Web Application.
3. SignalR Library sudah terdapat di dalam Library Microsoft.AspNetCore.App,
namun kita tetap perlu untuk menambahkan JavaScript Client Library. Untuk
kebutuhkan tersebut akan digunakan Library Manager (LibMan).
4. Untuk menambahkan library SignalR Client , Klik kanan pada project, kemudian
pilih Add > Client-Side Library.

Gambar 10. Client-Side Library.

5. Pilih unpkg pada Provider.
6. Pada Library pilih @aspnet/signalr@1.
7. Pilih versi paling akhir yaitu 1.1.0

25
 Gambar 11. Versi library.
8. Pilih Choose Specific File, kemudian pilih pada folder dist/browser sebagai berkut

Gambar 12. Target Location.

9. File tersebut akan disimpan kedalam folder wwwroot/lib/signalr/
10. Kemudian tekan tombol Install.

26
Menambahkan SignalR Hub
1. Langkah selanjutnya adalah menambahkan Hub. Hub class digunakan sebagai
high-level pipeline yang dapat menghandle komunikasi atara client dan server.
2. Pada SignalRChat Project tambahkan folder Hubs
3. Kemudian pada Hubs folder buat ChatHub.cs file.
4. Tambahkan kode sebagai berikut:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user,
message);
}
}
}

5. ChatHub class diturunkan dari SignalR Hub class. Hub class digunakan untuk
pengaturan koneksi, group, dan messaging.
6. SendMessage method dapat dipanggil oleh semua client yang terkoneksi. Ini akan
mengirimkan semua message ke semua client.

Konfigurasi SignalR
1. SignalR harus dikonfigurasi agar dapat mengirimkan permintaan ke SignalR.
2. Tambahkan beberapa pengaturan berikut pada Startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;

namespace SignalRChat
{
public class Startup

27
 {
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add
services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential
cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSignalR();
}

// This method gets called by the runtime. Use this method to configure
the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change
this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

28
 app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("/chatHub");
});

app.UseMvc();
}
}
}
3. Kode diatas digunakan untuk menambahkan modul SignalR pada ASP.NET Core
Dependency Injection system dan middleware pipeline.

Menambahkan SignalR Client

1. Langkah selanjutnya adalah menambahkan kode untuk aplikasi Client.
2. Pada file Pages/Index.cshtml tambahkan kode berikut ini:
@page
<div class="container">
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-6">&nbsp;</div>
<div class="col-6">
User..........<input type="text" id="userInput" />
<br />
Message...<input type="text" id="messageInput" />
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">&nbsp;</div>
<div class="col-6">
<ul id="messagesList"></ul>

29
 </div>
</div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>
3. Textbox digunakan untuk memasukan pesan yang akan dikirimkan
4. Kemudian list dengan Id messageList digunakan untuk menampilkan pesan yang
diterima dari SignalR Hub.
5. Menambahkan referensi ke SignalR Javascript Client yang ada pada folder
wwwroot.
6. Kemudian tambahkan file chat.js pada filder js yang ada pada folder wwwroot.
7. Tambahkan kode berikut pada chat.js
"use strict";

var connection = new

signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {

var msg = message.replace(/&/g, "&amp;").replace(/</g,
"&lt;").replace(/>/g, "&gt;");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(function (err) {
return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function
(event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
8. Pada kode diatas dapat dilihat bahwa pertama akan dibuat object untuk koneksi
9. Menambahkan submit button untuk mengirimkan pesan ke hub
10. Menambahkan objek koneksi yang dapat menangani pesan yang diterima dari hub
dan menambahkannya kedalam list.

30
Menjalankan Aplikasi
1. Langkah terakhir adalah menjalankan aplikasi yang sudah dibuat.
2. Tekan Ctrl+F5 untuk menjalankan aplikasi.

Gambar 13. Aplikasi web SignalRChat

3. Masukan informasi pengguna dan pesan yang akan dikirimkan untuk pengguna
lain
4. Info pengguna dan pesan akan dapat dilihat pada tampilan list dibawah form
5. Kemudian buka browser lain dan masukan alamat website yang sama untuk
membuat client baru.
6. Pada tampilan browser yang baru masukan juga nama pengguna dan pesan

Gambar 14. Mengirim pesan.

7. Pesan dari pengguna jovan juga akan masuk ke tampilan list pada halaman
pengguna erick.

31
 Gambar 15. Menerima Pesan.

Source Code
https://github.com/ekurniawan/SampleSignalRCore_Chat

Referensi
https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-
2.2&tabs=visual-studio

32
 3
SignalR dengan TypeScript dan
Webpack

Pada bab ini akan dibahas bagaimana cara menggunakan Webpack dengan SignalR. Dengan
menggunakan webpack pengembang dapat membungkus client-side resources dari aplikasi
web.
Pada tutorial akan dipelajari hal sebagai berikut:
• Konfigurasi SignalR TypeScript client.
• Konfigurasi build pipeline menggunakan Webpack
• Konfigurasi SignalR server
• Membuat komunikasi antara client dan server

Membuat ASP.NET Core Web Application

1. Konfigurasi Visual Studio agar dapat menggunakan perintah npm dengan cara
menambahkan PATH environment variable.
2. Navigasi ke Tools > Options > Project and Solutions > Web Package Management >
External Web Tools.
3. Pada PATH pindahkan ke baris kedua setelah .\node_module\.bin

Gambar 16. Konfigurasi.

4. Kemudian tambahkan project ASP.NET Core Web Application baru dengan nama
SignalRWebPack.
5. Pilih .NET Core SDK versi 2.2

33
 Gambar 17. Web Application.
6. Pilih tombol OK untuk membuat project baru.

Konfigurasi Webpack dan TypeScript

Langkah-langkah dibawah ini digunakan untuk mengkonversi dari kode TypeScript ke
Javascript (transpile) dan membungkus semua client-side resources.
1. Pada project root jalankan perintah berikut untuk membuat file package.json.
2. Buka console kemudian masuk kedalam root folder dari project yang dibuat,
kemudian jalankan perintah berikut.

Gambar 18. Perintah npm pada console.

3. Kemudian tambahkan kode berikut pada file package.json
{
"name": "SignalRWebPack",
"version": "1.0.0",

34
 "private": true,
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4. Atur private property menjadi true untuk mencegah peringatan instalasi pada step
selanjutnya
5. Kemudian jalankan perintah npm berikut pada project root
npm install -D -E clean-webpack-plugin@0.1.19 css-loader@0.28.11 html-
webpack-plugin@3.2.0 mini-css-extract-plugin@0.4.0 ts-loader@4.4.1
typescript@2.9.2 webpack@4.12.0 webpack-cli@3.0.6

Gambar 19. Hasil perintah npm install.

6. Tunggu sampai proses instalasi webpack selesai.
7. Kemudian pada file package.json pada bagian property script tambahkan
pengaturan berikut.
"scripts": {
"build": "webpack --mode=development --watch",
"release": "webpack --mode=production",
"publish": "npm run release && dotnet publish -c Release"
},
8. build digunakan untuk mem-bundle client-side resource pada development mode
dan melihat jika ada perubahan.
9. release digunakan untuk mem-bundle client-side resources pada production mode.
10. publish digunakan untuk menjalankan script untuk mem-bundle client-side
resources in production mode.
11. Kemudian buat file dengan nama webpack.config.js.

35
 Gambar 20. Membuat file webpack.config.js.
12. Kemudian tambahkan kode berikut:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "wwwroot"),
filename: "[name].[chunkhash].js",
publicPath: "/"
},
resolve: {
extensions: [".js", ".ts"]
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},

36
 plugins: [
new CleanWebpackPlugin(["wwwroot/*"]),
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new MiniCssExtractPlugin({
filename: "css/[name].[chunkhash].css"
})
]
};
13. File diatas digunakan untuk pengaturan kompilasi Webpack.
14. Buat folder baru dengan nama src pada project root. Folder ini akan digunakan
untuk menyimpan project client-side dan assets.
15. Pada folder src buat file dengan nama index.html.
16. Kemudian tambahkan kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ASP.NET Core SignalR</title>
</head>
<body>
<div id="divMessages" class="messages">
</div>
<div class="input-zone">
<label id="lblMessage" for="tbMessage">Message:</label>
<input id="tbMessage" class="input-zone-input" type="text" />
<button id="btnSend">Send</button>
</div>
</body>
</html>
17. Kemudian buat file dengan nama main.css. file ini akan digunakan untuk style
halaman.

37
 Gambar 21. Menambahkan file style sheet.
18. Kemudian pada folder src tambahkan kode css berikut ini:
*, *::before, *::after {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
}

.input-zone {
align-items: center;
display: flex;
flex-direction: row;
margin: 10px;
}

.input-zone-input {
flex: 1;
margin-right: 10px;
}

.message-author {
font-weight: bold;
}

.messages {
border: 1px solid #000;

38
 margin: 10px;
max-height: 300px;
min-height: 300px;
overflow-y: auto;
padding: 5px;
}
19. Pada folder src tambahkan file dengan nama tsconfig.json
20. Tambahkan kode berikut
{
"compilerOptions": {
"target": "es5"
}
}
21. Pengaturan ditas digunakan agar TypeScript compiler dapat menghasilkan file yang
kompatibel dengan ECMAScript-5 Javascript.
22. Pada folder scr tambahkan file dengan nama index.ts

Gambar 22. Menambahkan file TypeScript.

23. Kemudian tambahkan kode berikut:
import "./css/main.css";

const divMessages: HTMLDivElement = document.querySelector("#divMessages");

const tbMessage: HTMLInputElement = document.querySelector("#tbMessage");
const btnSend: HTMLButtonElement = document.querySelector("#btnSend");
const username = new Date().getTime();

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {

if (e.keyCode === 13) {
send();
}
});

39
 btnSend.addEventListener("click", send);

function send() {
}
24. Kode TypeScript diatas digunakan untuk mengambil data dari elemen DOM dan
menambahkan dua event yaitu keyup dan click.

Pengaturan Aplikasi ASP.NET Core

1. Pada project root tambahkan folder dengan nama Hubs.
2. Kemudian pada folder Hubs tambahkan file dengan nama ChatHub.cs.
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SignalRWebPack.Hubs
{
public class ChatHub : Hub
{
public async Task NewMessage(string username, string message)
{
await Clients.All.SendAsync("messageReceived", username, message);
}
}
}
3. Method NewMessage akan digunakan untuk mengirimkan pesan ke semua client.
4. Pada file Startup.cs tambahkan kode berikut ini:
using SignalRWebPack.Hubs;

namespace SignalRWebPack
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}

public IConfiguration Configuration { get; }

40
 // This method gets called by the runtime. Use this method to add
services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential
cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSignalR();
}

// This method gets called by the runtime. Use this method to configure
the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change
this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseSignalR(options =>
{
options.MapHub<ChatHub>("/hub");
});

41
 }
}
}

Client Server Communication

Pada bagian ini akan ditambahkan SignalR Client yang.
1. Buka console, kemudian pada project root jalankan perintah berikut untuk install
library SignalR.

Gambar 23. Install library SignalR.

2. Kemudian pada file src/index.ts tambahkan kode berikut:
import "./css/main.css";
import * as signalR from "@aspnet/signalr";

const divMessages: HTMLDivElement = document.querySelector("#divMessages");

const tbMessage: HTMLInputElement = document.querySelector("#tbMessage");
const btnSend: HTMLButtonElement = document.querySelector("#btnSend");
const username = new Date().getTime();

const connection = new signalR.HubConnectionBuilder()

.withUrl("/hub")
.build();

connection.start().catch(err => document.write(err));

connection.on("messageReceived", (username: string, message: string) => {

let messageContainer = document.createElement("div");

messageContainer.innerHTML =
`<div class="message-author">${username}</div><div>${message}</div>`;

divMessages.appendChild(messageContainer);
divMessages.scrollTop = divMessages.scrollHeight;
});

42
 tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
if (e.keyCode === 13) {
send();
}
});

btnSend.addEventListener("click", send);

function send() {
connection.send("newMessage", username, tbMessage.value)
.then(() => tbMessage.value = "");
}
3. Kode diatas digunakan untuk mengirimkan dan menerima pesan dari SignalR Hubs
yang ada di sisi server.

Mencoba Menjalankan Aplikasi

1. Buka console kemudian arahkan ke project root dari aplikasi.
2. Jalankan perintah berikut untuk mem-bundle semua client-side asset yang disimpan
pada wwwroot folder.

Gambar 24. Membuat bundle client-side asset.

3. Jalankan aplikasi ASP.NET Core dengan menekan tombol Ctrl+F5.
4. Buka lagi satu browser dan masukan url yang sama dengan aplikasi yang sedang
berjalan.
5. Masukan pesan yang akan dikirimkan. Tampilan aplikasi pada browser dapat
dilihat pada gambar dibawah ini.

43
 Gambar 25. Tampilan untuk mengirim pesan.
6. Setelah pesan dikirimkan dari browser pertama maka pesan tersebut dapat dilihat
pada browser kedua.

Gambar 26. Percakapan pada aplikasi.

7. Demikian juga jika pesan dikirimkan dari browser kedua, maka akan ditampilkan
secara realtime pada browser pertama.

Source Code
https://github.com/ekurniawan/SampleSignalRCore_Webpack

Referensi
https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-
webpack?view=aspnetcore-2.2&tabs=visual-studio

44
 4
Hosting SignalR pada Microsoft
Azure

Pada bab ini akan dibahas bagaimana cara memasang aplikasi web yang menggunakan
SignalR library pada layanan cloud yaitu Microsoft Azure.

Membuat Instance Azure Apps

1. Masuk kedalam Azure Portal di alamat https://portal.azure.com
2. Pilih layanan Azure Apps.

Gambar 27. Layanan Azure App.

3. Kemudian tambahkan satu web apps baru sebagai berikut:

Gambar 28. Web Apps.

4. Pilih tombol create, kemudian lengkapi informasi berikut.

45
 Gambar 29. Form informasi Web App.
5. Pilih nama domain, subscription, dan service plan.
6. Pada contoh ini digunakan Free Service Plan dan menggunakan data center yang
berlokasi di South East Asia.
7. Tekan tombol create untuk membuat Azure Apps instance yang baru.

Konfigurasi Azure Apps

Langkah selanjutnya adalah mengkonfigurasi Azure App agar dapat menjalankan Library
SignalR
1. Masuk kedalam Azure Instance yang sudah dibuat sebelumnya.
2. Kemudian akses menu Application settings.

Gambar 30. Application settings.

3. Pastikan bahwa menu web sockets sudah On.

46
 Gambar 31. Opsi web socket.
4. Setelah itu pilih menu Overview, kemudian unduh publish profile yang akan
digunakan sebagai identitas ketika mengunggah aplikasi SignalR ke cloud.

Gambar 32. Overview.

5. Pilih Get publish profile untuk mengunduh file profile yang akan digunakan pada
langkah selanjutnya.

Mengunggah Aplikasi
1. Buka aplikasi SignalRChat yang sudah dibuat pada Bab2.
2. Klik kanan pada project, kemudian pilih Publish

47
 Gambar 33. Publish.
3. Maka akan muncul tampilan berikut ini:

Gambar 34. Publish Target.

4. Pilih import profile.

Gambar 35. Import Profile.

5. Kemudian masukan file publish profile yang sudah didapat pada langkah
sebelumnya.

48
6. Kemudian tekan tombol Publish.

Gambar 36. Publish.

7. Maka Visual Studio akan secara otomatis menggungah project yang sudah dibuat ke
layanan Azure Apps.
8. Setelah selesai maka akses url mysignalr.azurewebsites.net

Gambar 37. Akses project.

9. Buka url tersebut pada browser lain, kemudian pada browser pertama masukan
contoh info pengguna dan pesan.
10. Pada browser kedua seharusnya dapat dilihat pesan yang sebelumnya sudah
dikirimkan dari browser pertama.

49
 Gambar 38. Aplikasi web SignalRChat.
11. Gambar diatas menunjukan bahwa pesan dari browser 1 berhasil ditampilkan di
browser kedua.

50
 5
Windows Form Client
Pada bab ini akan dibahas cara untuk mengakses ASP.NET Core SignalR yang sudah dibuat
pada layanan cloud dari Aplikasi Windows Form.

Membuat Project Windows Form

1. Buat project Windows Form dengan nama WindowsFormsSample.

Gambar 39. Membuat project Windows Form.

2. Pastikan framework yang digunakan adalah .NET Framework 4.6.1 sehingga dapat
menggunakan library SignalR Client untuk .NET Core.

Menambahkan NuGet Package SignalR

1. Klik kanan pada project kemudian pilih Manage NuGet Package.
2. Kemudian cari library dengan nama Microsoft.AspNetCore.SignalR.Client, tekan
tombol Install.

Gambar 40. NuGet Package.

51
Mendesain Form Chat
Berikut adalah cara untuk mendesain Form Chat:
1. Buat Windows Form baru dengan nama ChatForm, kemudian desain tampilan form
tersebut sebagai berikut.

Gambar 41. Desain Form Chat.

2. Pada textbox untuk address beri nama addressTextBox.
3. Untuk tombol connect beri nama connectButton
4. Untuk tombol Disconnect beri nama disconnectButton
5. Untuk textbox deskripsi dibawah address beri nama messagesList
6. Untuk textbox pesan yang akan dikirimkan beri nama messageTextBox

Menambahkan Kode Untuk Koneksi

1. Untuk terkoneksi dengan aplikasi SignalR Core yang sudah dipasang pada layanan
Microsoft Azure, tambahkan kode dibawah ini pada ChatForm.
using System;
using System.Drawing;
using System.Windows.Forms;
using Microsoft.AspNetCore.SignalR.Client;

namespace WindowsFormsSample
{
public partial class ChatForm : Form
{
private HubConnection _connection;

public ChatForm()
{
InitializeComponent();
}

private void ChatForm_Load(object sender, EventArgs e)

52
{
addressTextBox.Focus();
}

private void addressTextBox_Enter(object sender, EventArgs e)

{
AcceptButton = connectButton;
}

private async void connectButton_Click(object sender, EventArgs e)

{
UpdateState(connected: false);

_connection = new HubConnectionBuilder()

.WithUrl(addressTextBox.Text)
.Build();

_connection.On<string, string>("ReceiveMessage", OnSend);

Log(Color.Gray, "Starting connection...");

try
{
await _connection.StartAsync();
}
catch (Exception ex)
{
Log(Color.Red, ex.ToString());
return;
}

Log(Color.Gray, "Connection established.");

UpdateState(connected: true);

messageTextBox.Focus();
}

private async void disconnectButton_Click(object sender, EventArgs e)

{
Log(Color.Gray, "Stopping connection...");

53
 try
{
await _connection.StopAsync();
}
catch (Exception ex)
{
Log(Color.Red, ex.ToString());
}

Log(Color.Gray, "Connection terminated.");

UpdateState(connected: false);
}

private void messageTextBox_Enter(object sender, EventArgs e)

{
AcceptButton = sendButton;
}

private async void sendButton_Click(object sender, EventArgs e)

{
try
{
await _connection.InvokeAsync("SendMessage", "WinForm Client",
messageTextBox.Text);
}
catch (Exception ex)
{
Log(Color.Red, ex.ToString());
}
}

private void UpdateState(bool connected)

{
disconnectButton.Enabled = connected;
connectButton.Enabled = !connected;
addressTextBox.Enabled = !connected;

messageTextBox.Enabled = connected;
sendButton.Enabled = connected;

54
 }

private void OnSend(string name, string message)

{
Log(Color.Black, name + ": " + message);
}

private void Log(Color color, string message)

{
Action callback = () =>
{
messagesList.Items.Add(new LogMessage(color, message));
};

Invoke(callback);
}

private class LogMessage

{
public Color MessageColor { get; }

public string Content { get; }

public LogMessage(Color messageColor, string content)

{
MessageColor = messageColor;
Content = content;
}
}

private void messagesList_DrawItem(object sender, DrawItemEventArgs e)

{
var message = (LogMessage)messagesList.Items[e.Index];
e.Graphics.DrawString(
message.Content,
messagesList.Font,
new SolidBrush(message.MessageColor),
e.Bounds);
}
}

55
}
2. Kode pada tombol Connect digunakan untuk koneksi dengan SignalR Hub yang
ada pada Microsoft Azure.
3. Url SignalR Hub yang ada pada Azure harus ditambahkan agar dapat terkoneksi.
4. Tombol Disconnect digunakan untuk memutus koneksi dengan SignalR Hub yang
ada pada Microsoft Azure.
5. Kode _connection.On<string, string>("ReceiveMessage", OnSend) digunakan
untuk terkoneksi dengan SignalR Hub yang ada di Azure. Parameter pertama berisi
string “ReceiveMessage”, nilai ini harus sama dengan nama parameter yang ada di
SignalR Hubs. Adapun kode di SignalRHubs adalah sebagai berikut (kode ada pada
Bab 2):
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
6. Kode dibawah ini digunakan untuk mengirimkan pesan ke SignalR Hubs yang ada
di Azure.
await _connection.InvokeAsync("SendMessage", "WinForm Client",
messageTextBox.Text);
7. Kemudian pada file Program.cs tambahkan program dibawah ini untuk
memastikan bahwa ChatForm akan dijalankan pertama kali ketika program
dijalankan.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsSample
{
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new ChatForm());
}
}

56
 }

Menjalankan Aplikasi Windows Forms

1. Tekan Ctrl+F5 pada program untuk menjalankan aplikasi Windows Form, maka
ditampilkan form berikut ini

Gambar 42. SignalR Chat Sample.

2. Kemudian masukan url dari ASP.NET Core SignalR yang sudah dibuat di Azure.
3. Pada contoh berikut ini akan digunakan aplikasi yang sudah diunggah ke layanan
Azure seperti pada contoh di bab sebelumnya. Alamat urlnya adalah
http://mysignalr.azurewebsites.net/chatHub

Gambar 43. Koneksi ke chatHub.

4. Jika terdapat pesan Connection established maka koneksi sudah berhasil.
5. Langkah selanjutnya buka aplikasi website client yang juga sudah dibuat dan
dipasang pada layanan Microsoft Azure.

57
 Gambar 44. Web Apps.
6. Kemudian masukan pesan pada aplikasi Windows Form.

Gambar 45. Pesan pada aplikasi Windows Form.

7. Pilih tombol send untuk mengirimkan pesan.
8. Maka pada tampilan Web Client yang ada pada layanan Azure dapat dilihat bahwa
pesan dari Windows Form client dapat dikirimkan.

Gambar 46. Menerima pesan di aplikasi web.

9. Sebaliknya jika pesan dikirimkan dari Web Client, maka pesan dari Web Client
tersebut akan ditampilkan di aplikasi Windows Form.

58
 Gambar 47. Menerima pesan di aplikasi Windows Form.

Referensi
https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-
2.2&tabs=visual-studio
https://docs.microsoft.com/en-us/aspnet/core/signalr/hubs?view=aspnetcore-2.2
https://docs.microsoft.com/en-us/aspnet/core/signalr/hubcontext?view=aspnetcore-2.2

59
 6
Mobile Client (Xamarin Forms)

Pada bab ini akan dibahas cara untuk terkoneksi ke layanan ASP.NET Core SignalR yang ada
pada layanan Azure dari aplikasi Client Xamarin.

Membuat Project Xamarin Cross Platform

1. Buat Project Cross Platform Mobile Development.
2. Template ini digunakan untuk membuat project Xamarin Forms yang nantinya
dapat ditarget ke multiple platform seperti Android, IOS, dan Windows 10 Apps.

Gambar 48. Project Xamarin Forms.

3. Beri nama projectnya XamarinSignalRClient.

Gambar 49. Template.

60
 4. Kemudian pilih template Blank untuk membuat aplikasi kosong (tanpa menu).
5. Pilih target platform, pada contoh diatas dipilih Android dan IOS.
6. Untuk code sharing pilih .NET Standard.
7. Maka Visual Studio akan membuatkan tiga macam project dalam satu solution.

Gambar 50. Solution XamarinSignalRClient.

8. Project Pertama XamarinSignalRClient adalah project cross platform Xamarin
Forms, sedangkan project yang lain XamarinSignalRClient.Android dan
XamarinSignalRClient.IOS adalah project spesifik untuk target platform Android
dan IOS.

Menambahkan Library SignalR Pada Xamarin

Forms
1. Klik kanan pada solution explorer, kemudian pilih manage Nuget Package.
2. Cari package dengan nama Microsoft.AspNetCore.SignalR.Client.
3. Kemudian check semua project dan tekan tombol Install.

Gambar 51. Manage Packages for Solution.

Membuat Form Untuk Mengirimkan Pesan

1. Pada project XamarinSignalRClient buka form dengan nama MainPage.
2. Kemudian tambahkan xaml berikut ini pada halaman design MainPage.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

61
 xmlns:local="clr-namespace:XamarinSignalRClient"
x:Class="XamarinSignalRClient.MainPage" Title="SignalR Client">

<StackLayout Margin="8">
<!-- Place new controls here -->
<Entry x:Name="ServerUrlEntry" Placeholder="Server URL"
Text="http://mysignalr.azurewebsites.net/chatHub" />
<Button x:Name="ConnectDisconnectButton" Text="Connect"
Clicked="ConnectDisconnectButton_Clicked" />
<ListView x:Name="MessagesListView" VerticalOptions="FillAndExpand" />
<StackLayout Orientation="Horizontal">
<Entry x:Name="MessageEntry" Placeholder="Message"
HorizontalOptions="FillAndExpand" />
<Button x:Name="SendButton" Text="Send"
Clicked="SendButton_Clicked" />
</StackLayout>
</StackLayout>
</ContentPage>
3. Pada kode diatas dapat dilihat desain form yang dibuat menggunakan bahasa
xaml. Bahasa xaml sendiri adalah format khusus mirip dengan html yang
digunakan untuk pengaturan User Interface pada Xamarin Forms.
4. Pada form tersebut terdapat beberapa kontrol seperti ServerUrlEntry untuk input
url, kemudian tombol Connect untuk koneksi ke server SignalR Hub yang ada di
Azure (lihat pada Bab 2 dan Bab 4), MessageEntry digunakan untuk menuliskan
pesan yang akan dikirimkan ke SignalR Hub dan dibroadcast ke semua client, dan
terakhir tombol Send untuk mengirimkan pesannya.

Menambahkan Kode untuk Menampilkan

Data dan Kirim Data
1. Pada MainPage buka editor untuk kode, kemudian tambahkan kode dibawah ini.
using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinSignalRClient
{
public partial class MainPage : ContentPage

62
 {
private ViewState _state = ViewState.Disconnected;

private ObservableCollection<string> _messages = new

ObservableCollection<string>();
private HubConnection _connection;

public MainPage()
{
InitializeComponent();
MessagesListView.ItemsSource = _messages;

private async void ConnectDisconnectButton_Clicked(object sender,

EventArgs e)
{
if (_state == ViewState.Connected)
{
UpdateState(ViewState.Disconnecting);

try
{
await _connection.StopAsync();
}
catch (Exception ex)
{
AppendMessage($"An error occurred while disconnecting:
{ex}");
UpdateState(ViewState.Connected);
return;
}

UpdateState(ViewState.Disconnected);
}
else
{
UpdateState(ViewState.Connecting);

try
{

63
 _connection = new HubConnectionBuilder()
.WithUrl(ServerUrlEntry.Text)
.Build();

_connection.On<string, string>("ReceiveMessage", OnSend);

await _connection.StartAsync();
}
catch (Exception ex)
{
AppendMessage($"An error occurred while connecting: {ex}");
UpdateState(ViewState.Disconnected);
return;
}

UpdateState(ViewState.Connected);
}
}

private void OnSend(string nama, string pesan)

{
Device.BeginInvokeOnMainThread(() =>
{
_messages.Add($"{nama} : {pesan}");
MessagesListView.ScrollTo(_messages.Last(),
ScrollToPosition.End, animated: true);
});
}

private async void SendButton_Clicked(object sender, EventArgs e)

{
if (_state != ViewState.Connected)
{
await DisplayAlert("Error", "Must be Connected to Send!", "OK");
return;
}

try
{

64
 await _connection.SendAsync("SendMessage","Xamarin Devices",
MessageEntry.Text);
MessageEntry.Text = "";
}
catch (Exception ex)
{
AppendMessage($"An error occurred while sending: {ex}");
}
}

private void UpdateState(ViewState state)

{
if (_state == state)
{
return;
}

switch (state)
{
case ViewState.Disconnected:
SendButton.IsEnabled = false;
MessageEntry.IsEnabled = false;
ServerUrlEntry.IsEnabled = true;
ConnectDisconnectButton.IsEnabled = true;
ConnectDisconnectButton.Text = "Connect";
break;
case ViewState.Connecting:
SendButton.IsEnabled = false;
MessageEntry.IsEnabled = false;
ServerUrlEntry.IsEnabled = false;
ConnectDisconnectButton.IsEnabled = false;
ConnectDisconnectButton.Text = "Connecting...";
break;
case ViewState.Disconnecting:
SendButton.IsEnabled = false;
MessageEntry.IsEnabled = false;
ServerUrlEntry.IsEnabled = false;
ConnectDisconnectButton.IsEnabled = false;
ConnectDisconnectButton.Text = "Disconnecting...";
break;

65
 case ViewState.Connected:
SendButton.IsEnabled = true;
MessageEntry.IsEnabled = true;
ServerUrlEntry.IsEnabled = false;
ConnectDisconnectButton.IsEnabled = true;
ConnectDisconnectButton.Text = "Disconnect";
break;
}
_state = state;
}

private enum ViewState

{
Disconnected,
Connecting,
Connected,
Disconnecting
}
}
}
2. Kode diatas digunakan untuk terkoneksi dengan SignalR Server Hub dan
mengirimkan pesan ke SignalR Hub yang ada pada layanan Azure.
3. Cara penggunaan Library SignalR mirip dengan aplikasi Windows Forms yang
sudah dibuat pada bab sebelumnya.

Menjalankan Aplikasi Xamarin di Android

Device/Emulator
1. Untuk mendeploy aplikasi ke platform Android, klik kanan pada project
XamarinSignalRClient.Android kemudian pilih “Set as Startup Project”.
2. Untuk menjalankan aplikasi Xamarin Forms pada Emulator/Device Android, anda
dapat memilih di tombol play.

Gambar 52. Menjalankan aplikasi.

3. Pada gambar diatas dapat dilihat pilihan Emulator / Device yang dapat digunakan.
Pada contoh ini digunakan device Asus untuk mencoba menjalankan aplikasi.
4. Setelah dijalankan akan muncul tampilan sebagai berikut.

66
 Gambar 53. Tampilan aplikasi.
5. Jangan lupa untuk terlebih dahulu mengakses halaman
http://mysignalr.azurewebsites.net/ sebelum menjalankan aplikasi mobile untuk
terkoneksi.
6. Kemudian pada aplikasi mobile masukan url berikut
http://mysignalr.azurewebsites.net/chatHub kemudian tekan tombol Connect.

Gambar 54. Koneksi.

7. Jika tombol berubah menjadi disconnect berarti menunjukan bahwa aplikasi sudah
berhasil terkoneksi ke SignalR Server.
8. Kemudian tambahkan pesan dan tekan tombol send untuk mengirmkan pesan ke
server dan akan dibroadcast ke semua client.

67
 9. Pesan yang dikirimkan dari aplikasi mobile akan ditampilkan di semua client yang
terkoneksi termasuk aplikasi Web Client.

Gambar 55. Pengiriman pesan di aplikasi Web Client.

10. Sebaliknya jika pesan dikirimkan dari Web Client, maka pesan tersebut juga akan
ditampilkan kedalam aplikasi mobile.

Gambar 56. Pesan pada aplikasi mobile.

Source Code
https://github.com/ekurniawan/SampleSignalRCore_Xamarin

68
Referensi
https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-
2.2&tabs=visual-studio
https://docs.microsoft.com/en-us/aspnet/core/signalr/hubs?view=aspnetcore-2.2
https://docs.microsoft.com/en-us/aspnet/core/signalr/hubcontext?view=aspnetcore-2.2

69
 7
Penutup
Akhir kata, semoga buku ini dapat bermanfaat untuk memberikan pengenalan cara membuat
aplikasi real-time. Jika ada kesalahan pada isi buku ini, silakan kirimkan saran dan kritiknya
via email kepada penulis.
Terima kasih.

70

View publication stats