SignalR Ver.1

See
discussions, stats, and author profiles for this publication at: https://www.researchgate.net/publication/274780035
Seri Belajar ASP.NET : Pengenalan ASP.NET

SignalR 2
Book January 2015
DOI: 10.13140/RG.2.1.2521.5769
CITATIONS
READS
205
1 author:
M Reza Faisal
Universitas Lambung Mangkurat
19 PUBLICATIONS 0 CITATIONS
SEE PROFILE
Available from: M Reza Faisal

Retrieved on: 07 November 2016
Kata Pengantar
Puji dan syukur diucapkan kepada Allah SWT atas selesainya ebook sederhana yang berjudul
Pengenalan ASP.NET SignalR.
Pada ebook ini memberikan pengenalan kepada developer tentang pemrograman real-time
dengan memanfaatkan ASP.NET SignalR 2. Ebook ini terdiri atas empat kelompok, kelompok
pertama berupa pendahuluan yang berisi teknologi yang bisa dimanfaatkan untuk membuat
aplikasi real-time. Setelah itu diperkenalkan ASP.NET SignalR. Pada kelompok kedua dibahas
tentang dua model komunikasi pada ASP.NET SignalR yaitu Hub dan Persistent Connection.
Pada kelompok ini akan diberikan contoh-contoh yang dapat diikuti pembaca agar lebih
mengerti tentang kedua model komunikasi ini. Kelompok ketiga adalah pembahasan untuk
memperlihatkan kepada pembaca bahwa ASP.NET SignalR tidak hanya dapat digunakan
untuk membuat aplikasi web real-time tetapi juga dapat dimanfaatkan untuk platform .NET
yang lain seperti aplikasi Windows Forms, Windows Store dan Windows Phone. Kelompok
yang keempat menjelaskan tentang hosting dan scaleout dengan memanfaatkan Service Bus.
Akhir kata, selamat membaca dan semoga ebook ini bermanfaat bagi para developer untuk
membuat aplikasi real-time. Kritik dan saran akan sangat berarti dan dapat ditujukan via
email.
Yogyakarta, Januari 2015
Banjarmasin, Januari 2015
Erick Kurniawan
M Reza Faisal
(erick@actual-training.com)
(reza.faisal@gmail)
Daftar Isi
Kata Pengantar ............................................................................................... i
Daftar Isi ......................................................................................................... ii
Daftar Gambar ............................................................................................... v
Daftar Kode Program ................................................................................ viii
Daftar Tabel................................................................................................... xi
1 Pendahuluan .................................................................................................1
Socket .................................................................................................................. 1
Multicast ............................................................................................................. 6
Aplikasi Web ..................................................................................................... 9
WebSocket ........................................................................................................ 10
ASP.NET SignalR ............................................................................................ 10
SignalR dan WebSocket..........................................................................................12
Transport dan Fallback ..........................................................................................12
Model Komunikasi .................................................................................................13
Platform ....................................................................................................................13
Referensi ........................................................................................................... 15
2 Lingkungan Pengembangan......................................................................16
3 Hub ...............................................................................................................17
Hello World ...................................................................................................... 17
Membuat Project .....................................................................................................17
Menulis Kode Program ..........................................................................................22
Uji Coba ....................................................................................................................24
Penjelasan .................................................................................................................26
Chat Room ........................................................................................................ 27

Uji Coba & Penjelasan ............................................................................................29
TimerHub ......................................................................................................... 32
Uji Coba ....................................................................................................................33
Penjelasan .................................................................................................................33
Referensi ........................................................................................................... 34
ii
4 Persistent Connection ...............................................................................35

Hello World ...................................................................................................... 35
Membuat Project .....................................................................................................35
Uji Coba ....................................................................................................................36
Penjelasan .................................................................................................................37
Chat Room ........................................................................................................ 39

Uji Coba & Penjelasan ............................................................................................41
Referensi ........................................................................................................... 42
5 Client Windows Forms .............................................................................43

Membuat Project ............................................................................................. 43
Menulis Kode Program .................................................................................. 45
Uji Coba ............................................................................................................ 46
Penjelasan ......................................................................................................... 48
Referensi ........................................................................................................... 51
6 Client Windows Phone .............................................................................52

Membuat Project ............................................................................................. 52
Uji Coba ............................................................................................................ 57
Penjelasan ......................................................................................................... 58
Referensi ........................................................................................................... 59
7 Client Windows App .................................................................................60

Membuat Project ............................................................................................. 60
Uji Coba ............................................................................................................ 64
Penjelasan ......................................................................................................... 66
Referensi ........................................................................................................... 68
8 Hosting SignalR: Self-Host ......................................................................69

Membuat Server: Console Application....................................................... 69
Membuat Project .....................................................................................................69
Penjelasan .................................................................................................................71
iii
Uji Coba ....................................................................................................................71
Membuat Client: Web Application.............................................................. 71

Membuat Project .....................................................................................................72
Penjelasan .................................................................................................................74
Uji Coba ....................................................................................................................74
Referensi ...................................................................................................................75
9 Hosting SignalR: Azure.............................................................................76

Publish Project ................................................................................................. 76
Uji Coba ............................................................................................................ 79
Referensi ........................................................................................................... 81
10 Scaleout dengan Service Bus ..................................................................82

Backplane dengan Azure Service Bus ......................................................... 83
Membuat Azure Cloud Services ...........................................................................84
Membuat Project .....................................................................................................84
Menambahkan Kode ..............................................................................................87
Publish Aplikasi .............................................................................................. 90

Konfigurasi Instance & VM ...................................................................................90
Uji Coba ....................................................................................................................91
Referensi ........................................................................................................... 92
iv
Daftar Gambar
Gambar 1. Program proses listener/server dijalankan pertama kali. ............................................. 5
Gambar 2. Program proses sender/client. .......................................................................................... 5
Gambar 3. Proses listener/server menerima pesan dari proses sender/client. .............................. 6
Gambar 4. Uji coba komunikasi multicast. ........................................................................................ 8
Gambar 5. Hasil uji coba komunikasi multicast. ............................................................................... 8
Gambar 6. Komunikasi pada HTTP. ................................................................................................... 9
Gambar 7. Web service. ........................................................................................................................ 9
Gambar 8. Memanggil method pada client dari server.................................................................. 11
Gambar 9. Memanggil method pada server dari client.................................................................. 12
Gambar 10. Diagram arsitektur SignalR. .......................................................................................... 13
Gambar 11. Solution ASP.NET.SignalR.2. ........................................................................................ 17
Gambar 12. Window Add New Project. ........................................................................................... 17
Gambar 13. Window New ASP.NET Project. .................................................................................. 18
Gambar 14. Project web HelloSignalR. ............................................................................................. 18
Gambar 15. Menambah SignalR Hub Class (v2). ............................................................................ 19
Gambar 16. Class HelloHub.cs. ......................................................................................................... 19
Gambar 17. File-file Javascript. .......................................................................................................... 20
Gambar 18. Namespace untuk mendukung implementasi SignalR............................................. 20
Gambar 19. Menambahkan class OWIN Startup. ........................................................................... 21
Gambar 20. Menambahkan file index.html...................................................................................... 22
Gambar 21. Membuat file index.html sebagai start page. .............................................................. 23
Gambar 22. HelloWorld di Internet Explorer. ................................................................................. 24
Gambar 23. Uji coba dengan 4 window web browser. ................................................................... 25
Gambar 24. Pengujian pengiriman pesan ke seluruh client. ......................................................... 25
Gambar 25. Daftar method event handler........................................................................................ 27
Gambar 26. Prompt nama user. ......................................................................................................... 29
Gambar 27. Alert untuk memberi informasi user baru bergabung pada chatroom. ................. 30
Gambar 28. Uji coba chatroom. .......................................................................................................... 31
Gambar 29. Uji coba timer.html. ........................................................................................................ 33
Gambar 30. Uji coba implementasi Persistent Connection. ........................................................... 37
Gambar 31. Input nama user. ............................................................................................................. 41
Gambar 32. Chat room. ....................................................................................................................... 41
Gambar 33. Window Add New Project ClientWinForms. .......................................................... 43

Gambar 34. ClientWinForms - Manage NuGet Packages Microsoft ASP.NET SignalR .NET
Client. ............................................................................................................................................ 44
Gambar 35. Daftar reference project ClientWinForms. .................................................................. 44
Gambar 36. Windows Forms Chat Room. ..................................................................................... 45
Gambar 37. Form Chat Room. ........................................................................................................... 45
Gambar 38. Uji coba aplikasi Windows Forms................................................................................ 47
Gambar 39. Pesan dikirim dari aplikasi Windows Forms. ............................................................ 47
Gambar 40. Pesan dikirim dari halaman web. ................................................................................ 48
Gambar 41. Pesan chat ditampilkan pada ListBox. ........................................................................ 51
Gambar 42. Window Add New Project ClientWinPhone. .......................................................... 52
Gambar 43. Versi Windows Phone OS yang digunakan. .............................................................. 53
Gambar 44. Project ClientWinPhone pada solution. ...................................................................... 53
Gambar 45. ClientWinPhone - Manage NuGet Packages Microsoft ASP.NET SignalR .NET
Client. ............................................................................................................................................ 54
Gambar 46. Namespace Microsoft.AspNet.SignalR.Client pada project ClientWinPhone. ...... 54
Gambar 47. Antarmuka aplikasi mobile chat real-time. ................................................................ 55
Gambar 48. Uji coba client Windows Phone. ................................................................................... 58
Gambar 49. Add New Project Windows Apps ............................................................................. 60
Gambar 50. Manage NuGet Package Microsoft ASP.NET SignalR Javascript Client. ............ 61
Gambar 51. Script SignalR client. ...................................................................................................... 61
Gambar 52. Pilihan untuk menjalankan Windows App. ............................................................... 62
Gambar 53. Peringatan saat menggunakan jQuery. ....................................................................... 62
Gambar 54. Pilihan menjalankan Windows App pada Local Machine. ...................................... 65
Gambar 55. Pilihan menjalankan Windows App pada Simulator. ............................................... 65
Gambar 56. Aplikasi client Windows App dijalankan. .................................................................. 65
Gambar 57. Aplikasi chat pada halaman web chatroom.html. ..................................................... 65
Gambar 58. Aplikasi chat Windows App. ........................................................................................ 66
Gambar 59. Javascript console. .......................................................................................................... 67
Gambar 60. Menambah project Consol Application....................................................................... 69
Gambar 61. NuGet Package Manager............................................................................................... 70
Gambar 62. Menambahkan library SignalR Self Host. ................................................................... 70
Gambar 63. Menambahkan library Owin. ....................................................................................... 70
Gambar 64. . Menjalankan server pada http://localhost:8080. ....................................................... 71
Gambar 65. Membuat project untuk aplikasi client ........................................................................ 72
Gambar 66. Memilih empty template. .............................................................................................. 72
vi
Gambar 67. Memilih empty template ............................................................................................... 73

Gambar 68. Menambahkan HTML Page pada client ..................................................................... 73
Gambar 69. Tampilan pengaturan Multiple startup project .......................................................... 74
Gambar 70. Tampilan output aplikasi Chat Room. ........................................................................ 75
Gambar 71. Tampilan project HelloSignalR. ................................................................................... 76
Gambar 72. Tampilan window Publish Web ................................................................................... 77
Gambar 73. Tampilan window pemilihan website ......................................................................... 77
Gambar 74. Tampilan window membuat website baru. ................................................................ 78
Gambar 75. Tampilan window publish aplikasi ............................................................................. 78
Gambar 76. Tampilan portal web Microsoft Azure. ....................................................................... 79
Gambar 77. Informasi site URL. ........................................................................................................ 79
Gambar 78. Tampilan output aplikasi Chat Room ......................................................................... 80
Gambar 80. Tampilan aplikasi Chat Room pada Azure ................................................................ 80
Gambar 82. Arsitektur scale out ........................................................................................................ 82
Gambar 83. Arsitektur backplane ...................................................................................................... 83
Gambar 84. Arsitektur backplane dengan Service Bus. ................................................................. 83
Gambar 85. Membuat Azure Cloud Service .................................................................................... 84
Gambar 86. Membuat Azure Service Bus ......................................................................................... 84
Gambar 87. Membuat Azure Cloud Service. ................................................................................... 85
Gambar 88. Menambahkan Web Role. ............................................................................................. 85
Gambar 89. Memilih template MVC. ................................................................................................ 86
Gambar 90. Menambahkan pustaka SignalR ................................................................................... 86
Gambar 91. Menambahkan class SignalR Hub. .............................................................................. 86
Gambar 92. Menambahkan View. ..................................................................................................... 88
Gambar 93. Menambahkan pustaka SignalR.ServiceBus. .............................................................. 89
Gambar 94. Tampilan Azure Service Bus. ........................................................................................ 89
Gambar 95. Tampilan Azure Service Bus. ........................................................................................ 89
Gambar 96. Tampilan Role ChatSampleSR. ..................................................................................... 90
Gambar 97. Menambahkan Instance count dan VM size. .............................................................. 90
Gambar 98. Mempublish aplikasi kedalam Azure Cloud Service. ............................................... 91
Gambar 99. Output aplikasi SignalR Chat pada browser Chrome. .............................................. 91
Gambar 100. Output aplikasi SignalR Chat pada browser Firefox. .............................................. 92
vii
Daftar Kode Program

Kode Program 1. Proses sender/client. ............................................................................................... 1
Kode Program 2. Proses listener/server. ............................................................................................. 3
Kode Program 3. Multicast listener. .................................................................................................... 6
Kode Program 4. Multicast sender. ..................................................................................................... 7
Kode Program 5. Penggunaan IP address class D. ........................................................................... 8
Kode Program 6. Membuat socket TCP. .......................................................................................... 10
Kode Program 7. Membuat komunikasi multicast. ........................................................................ 10
Kode Program 8. SignalR Hub Class (v2) - HelloWorld.cs. ........................................................... 19
Kode Program 9. Class OWIN Startup pada Hub Startup.cs. .................................................... 21
Kode Program 10. Class OWIN Startup pada Hub Startup.cs - modifikasi. ............................ 22
Kode Program 11. Hub - index.html. ................................................................................................ 23
Kode Program 12. SignalR Hub Class (v2) HelloWorld Method Hello. ................................ 26
Kode Program 13. Library Javascript SignalR. ................................................................................ 26
Kode Program 14. Libray Javascript dinamik SignalR. .................................................................. 26
Kode Program 15. Koneksi ke Hub server. ...................................................................................... 26
Kode Program 16. Fungsi saat tombol diklik. ................................................................................. 26
Kode Program 17. SignalR Hub Class (v2) - HelloWorld.cs ChatRoom. .................................. 28
Kode Program 18. Hub chatroom.html ......................................................................................... 28
Kode Program 19. Prompt nama user. ............................................................................................. 29
Kode Program 20. Input untuk menyimpan nama user. ............................................................... 29
Kode Program 21. Koneksi ke Hub di server. ................................................................................. 30
Kode Program 22. Event handler ketika ada client yang melakukan koneksi ke server. .......... 30
Kode Program 23. Fungsi connect di sisi client. .............................................................................. 30
Kode Program 24. Fungsi ketika tombol Send diklik. .................................................................... 31
Kode Program 25. Eksekusi method Send di sisi server. ............................................................... 31
Kode Program 26. Method Send di sisi server. ............................................................................... 31
Kode Program 27. Fungsi show di sisi client. .................................................................................. 32
Kode Program 28. SignalR Hub Class (v2) TimerHub.cs ............................................................ 32
Kode Program 29. Hub timer.html................................................................................................. 32
Kode Program 30. Penulisan koneksi ke class Hub HelloWorld. ................................................. 34
Kode Program 31. Penulisan koneksi ke class Hub TimerHub. .................................................... 34
Kode Program 32. SignalR Persistent Connection Class (v2) HelloWorld.cs. .......................... 35
viii
Kode Program 33. Class OWIN Startup pada Persistent Startup.cs. ......................................... 35
Kode Program 34. Persistent index.html. ...................................................................................... 36
Kode Program 35. Konfigurasi Hub pada OWIN Startup class. ................................................... 37
Kode Program 36. Konfigurasi Persistent Connection pada OWIN Startup class. .................... 37
Kode Program 37. Koneksi client ke server. .................................................................................... 37
Kode Program 38. Persistent Connection Server OnConnected. ............................................ 38
Kode Program 39. Persistent Connection Client received. ...................................................... 38
Kode Program 40. Persistent Connection Client tombol diklik. ............................................. 38
Kode Program 41. Persistent Connection Server OnReceived. ............................................... 38
Kode Program 42. Persistent Connection Class (v2) ChatRoom.cs. .......................................... 39
Kode Program 43. Path koneksi untuk class ChatRoom. ............................................................... 39
Kode Program 44. OWIN Startup class pada persistent Startup.cs. .......................................... 40
Kode Program 45. Persistent chatroom.html. ............................................................................... 40
Kode Program 46. ClientWinForms Form1.cs. ............................................................................. 46
Kode Program 47. Namespace Microsoft.AspNet.SignalR.Client. ............................................... 48
Kode Program 48. Instansiasi class dan interface. .......................................................................... 48
Kode Program 49. Koneksi ke Hub server. ...................................................................................... 49
Kode Program 50. Register method. ................................................................................................. 49
Kode Program 51. Method pada Hub sisi server. ........................................................................... 49
Kode Program 52. Method pada sisi client. ..................................................................................... 49
Kode Program 53. Register method dan data. ................................................................................. 49
Kode Program 54. Register method Show. ...................................................................................... 49
Kode Program 55. Method Show. ..................................................................................................... 49
Kode Program 56. ClientWinForms Form1.cs yang telah diupdate. ......................................... 50
Kode Program 57. MainPage.xaml. ................................................................................................... 55
Kode Program 58. MainPage.xaml.cs. .............................................................................................. 56
Kode Program 59. Koneksi ke Hub sisi server. ............................................................................... 58
Kode Program 60. Mendaftarkan method client dan memulai proses koneksi ke Hub server.
........................................................................................................................................................ 58
Kode Program 61. Method client Connected. ............................................................................... 58
Kode Program 62. Method client Show. ........................................................................................ 59
Kode Program 63. Method client Connected yang salah. ........................................................... 59
Kode Program 64. Baris jQuery.support sebelum diubah. ............................................................ 62
Kode Program 65. Baris jQuery.support setelah diubah. ............................................................... 63
Kode Program 66. default.html ......................................................................................................... 63
ix
Kode Program 67. Lokasi proxy yang digenerate otomatis. .......................................................... 66

Kode Program 68. Mendaftarkan fungsi hub client........................................................................ 67
Kode Program 69. Fungsi mengirim pesan chat. ............................................................................ 67
Kode Program 70. Kode aplikasi server. .......................................................................................... 70
Kode Program 71. Kode aplikasi client. ........................................................................................... 73
Kode Program 72. Koneksi ke server. ............................................................................................... 74
Kode Program 73. Kode server Hub. ................................................................................................ 87
Kode Program 74. Kode pada class Startup. .................................................................................... 87
Kode Program 75. Kode pada controller. ......................................................................................... 87
Kode Program 76. Kode pada view. ................................................................................................. 88
Kode Program 77. Menambahkan connection string pada file Startup ....................................... 89
Daftar Tabel
Tabel 1. Kebutuhan transport web browser..................................................................................... 14
Tabel 2. Kebutuhan transport pada Windows Dekstop dan Silverlight. ..................................... 15
Tabel 3. Kebutuhan transport pada Windows Store dan Windows Phone. ................................ 15
xi
Pendahuluan
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.
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 1. Proses sender/client.

using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Text;
System.Threading.Tasks;
System.Net;
using System.Net.Sockets;
using System.Text;
namespace SynchronousClient
{
class Program
{
public static void StartChat(string message)
{
// Data buffer untuk data masuk.
byte[] bytes = new byte[1024];
// melakukan koneksi remote ke server.
try
{
// menentukan endpoint remote untuk socket.
// contoh digunakan port 11000.
IPHostEntry ipHostInfo = Dns.Resolve(Dns.GetHostName());
IPAddress ipAddress = ipHostInfo.AddressList[0];
IPEndPoint remoteEP = new IPEndPoint(ipAddress, 11000);
// membuat socket TCP/IP.
Socket sender = new Socket(AddressFamily.InterNetwork,
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();
}
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;
}
}
}
Kode di bawah ini digunakan untuk proses listener.
Kode Program 2. Proses listener/server.

using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Net;
System.Net.Sockets;
namespace SynchronousServer
{
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.
IPEndPoint localEndPoint = new IPEndPoint(ipAddress, 11000);
// membuat socket TCP/IP.
Socket listener = 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);
// memulai mendengarkan koneksi.
while (true)
{
Console.WriteLine("");
Console.WriteLine("Menunggu pesan baru...");
// Program dihentikan saat menunggu koneksi yang masuk.
Socket handler = listener.Accept();
data = null;
// proses koneksi yang masuk.
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);
// 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;
}
}
}
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.
Gambar 1. Program proses listener/server dijalankan pertama kali.

Selanjutnya dijalanakn proses sender/client yang berfungsi untuk mengirimkan pesan.
Gambar 2. Program proses sender/client.
Pada gambar 2 dapat dilihat pesan dikirimkan dan mendapat respon dari proses listener.
Sedangkan pada proses listener dapat dilihat bagaimana pesan diterima, seperti pada gambar
di bawah ini.
Gambar 3. Proses listener/server menerima pesan dari proses sender/client.

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.
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.
Kode Program 3. Multicast listener.

using
using
using
using
using
using
using
System;
System.Linq;
System.Net;
System.Net.Sockets;
System.Text;
namespace MulticastListener
{
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)
{
Byte[] data = client.Receive(ref localEp);
string strData = Encoding.Unicode.GetString(data);
Console.WriteLine(strData);
}
}
}
}
Sedangkan berikut ini adalah kode program proses sender.
Kode Program 4. Multicast sender.

using
using
using
using
using
using
using
System;
System.Linq;
System.Net;
System.Net.Sockets;
System.Text;
namespace MulticastSender
{
class Program
{
{
UdpClient udpclient = new UdpClient();
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();
}
}
}
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 4. Uji coba komunikasi multicast.

Berikut ini adalah hasil dimana pesan yang dikirimkan program sender berhasil diterima oleh
kedua program listener tersebut.
Gambar 5. Hasil uji coba komunikasi multicast.

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. Hal ini bisa dilihat dari potongan kode
berikut ini.
Kode Program 5. Penggunaan IP address class D.


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.
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 6. Komunikasi pada HTTP.

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 7. 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.
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.
WebSocket
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, Win Forms, Windows Phone, Windows Store 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.
Kode Program 6. Membuat socket TCP.

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.
Kode Program 7. Membuat komunikasi multicast.

10
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
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, berikut ini adalah contoh real-time game yang dibangun
dengan SignalR yaitu http://shootr.signalr.net/.
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 8. Memanggil method pada client dari server.
11
Gambar 9. Memanggil method pada server dari client.

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.
Dan bagi SignalR adalah open-source, jadi bagi yang memiliki waktu untuk melihat kodenya
dapat diakses alamat ini https://github.com/signalr.
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.
Implementasi SignalR membutuhkan lingkungan server yang menggunakan Windows Sever
2012 atau Windows 8 dan .NET Framework 4.5. Jika kebutuhan ini tidak bisa dipenuhi maka
SignalR akan menggunakan transport lain untuk melakukan koneksi.
Transport dan Fallback

Transport yang digunakan oleh SignalR adalah :
1.
2.
Transport HTML 5.
Pada jenis transport ini terdapat dua transport yang dapat digunakan yaitu :
- 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.
- Server Sent Events juga dikenal dengan istilah EventSource telah didukung oleh
seluruh web browser kecuali Internet Explorer.
Transport Coment.
12
Berikut ini aalah transport yang digunakan pada jenis ini, yaitu :
- Forever Frame, transport ini hanya dapat digunakan pada Internet Explorer.
- Ajax long polling.
Model Komunikasi
Model komunikasi yang digunakan pada SignalR API adalah :
1.
2.
Persistent Connection.
Persistent Connection API memungkinkan developer untuk mengakses secara
langsung protokol komunikasi low level.
Hub.
Model ini adalah high-level pipeline. Cara kerja model ini, ketika kode server-side
memamnggil method pada client, sebuah paket dikirim lewat tranport yang aktif.
Paket ini berisi nama dan parameter method tersebut dengan format JSON. Ketika
client berhasil mencocokkan nama method tersebut dengan yang ada di client maka
client akan mengeksekusi method tersebut dengan menggunakan nilai parameter
yang telah dideselisasi.
Gambar 10. Diagram arsitektur SignalR.

Pada diagram arsitektur di atas dapat dilihat penjelasan secara terstruktur dari SignalR API.
Platform
Pada bagian ini akan diinformasikan platform yang mendukung ASP.NET SignalR.
Kebutuhan Server
Sistem operasi server yang dapat digunakan adalah :
1.
2.
Windows Server 2012.

Windows Server 2008 r2.
13
3.
4.
5.
Windows 8.
Windows 7.
Windows Azure.
Versi .NET Framework yang mendukung SignalR 2 adalah .NET Framework 4.5.
Web server yang dapat digunakan adalah :
1.
2.
3.
4.
IIS 8 atau IIS 8 Express.

IIS 7 dan 7.5
IIS harus dijalankan pada mode integrated. Mode classic tidak didukung.
Aplikasi hosting harus berjalan pada mode full trust.
Kebutuhan Client
Web browser yang menggunakan SignalR setidaknya dapat menggunakan jQuery 1.6.4 atau
versi major diatasnya seperti versi 1.7.2, versi 1.8.2 atau versi 1.9.1.
Web browser yang dapat digunakan adalah :
1.
2.
3.
4.
5.
6.
Microsoft Internet Explorer versi 8, 9, 10 dan 11. Mendukung versi modern, desktop,
dan mobile.
Mozilla Firefox: versi sekarang - 1, versi Windows dan Mac.
Google Chrome: versi sekarang - 1, versi Windows dan Mac.
Safari: versi sekarang - 1, versi Mac dan iOS.
Opera: versi sekarang - 1, hanya untuk versi Windows.
Android browser.
Tabel 1. Kebutuhan transport web browser.
Aplikasi Desktop dan Silverlight

SignalR juga dapat ditanamkan pada aplikasi standalone Window client atau Silverlight
dengan kebutuhan sistem sebagai berikut :
1.
2.
Aplikasi dibangun menggunakan .NET Framework 4 pada Windows XP SP3 atau

diatasnya.
Aplikasi dibangun menggunakan .NET Framework 4.5 pada Windows Vista atau
diatasnya.
14
Tabel 2. Kebutuhan transport pada Windows Dekstop dan Silverlight.
Aplikasi Windows Store dan Windows Phone

SignalR dapat digunakan pada aplikasi Windows Store dan Windows Phone 8. Berikut ini
adalah transport yang didukung pada platform ini.
Tabel 3. Kebutuhan transport pada Windows Store dan Windows Phone.
Referensi
http://www.asp.net/signalr/overview/getting-started/introduction-to-signalr
http://www.asp.net/signalr/overview/getting-started/supported-platforms
15
Lingkungan Pengembangan
Seperti yang telah disebutkan pada bagian sebelumnya bahwa lingkungan pengembangan
ASP.NET SignalR yang diajurkan adalah menggunakan Windows 2012 atau Windows 8 dan
.NET Framework 4.5.
Berikut ini adalah lingkungan pengembangan yang digunakan untuk menulis ebook ini :
1.
2.
3.
4.
Windows 8.1 Pro 64-bit.

.NET Framework 4.5.1.
Visual Studio 2013 SP 4.
SQL Server 2012 Express Edition.
16
Hub
Pada bagian berikut ini akan dipaparkan tahap-tahap implementasi ASP.NET SignalR 2 pada
aplikasi web dengan menggunakan model komunikasi Hub.
Hello World
Membuat Project
Langkah pertama yang dilakukan adalah membuat solution. Pada ebook ini dibuat solution
dengan nama ASP.NET.SignalR.2.
Gambar 11. Solution ASP.NET.SignalR.2.

Langkah selanjutnya menambahkan project web pada solution tersebut dengan cara klik
kanan pada solution tersebut kemudian pilih Add > New Project. Pada windows Add New
Project pilih Visual C# > Web > ASP.NET Web Application seperti pada gambar berikut.
Gambar 12. Window Add New Project.
17
Nama project ini adalah HelloSignalR yang dapat ditulis pada kolom Name, kemudian klik
tombol OK. Pada window New ASP.NET Project pilih Empty kemudian klik tombol OK.
Gambar 13. Window New ASP.NET Project.

Maka dapat dilihat tambahan project pada solution seperti yang dilihat pada gambar berikut
ini.
Gambar 14. Project web HelloSignalR.

Selanjutnya klik kanan pada project HelloSignalR dan pilih Add > New Item. Pada window
Add New Item pilih Web > SignalR Hub Class (v2). Pada kolom name isi nilai HelloWorld.cs
sebagai nama class. Kemudian klik tombol Add.
18
Gambar 15. Menambah SignalR Hub Class (v2).

Maka pada project HelloSignalR pada area Solution tambahan file class HelloHub.cs seperti
berikut ini.
Gambar 16. Class HelloHub.cs.

Berikut ini adalah isi dari file HelloHub.cs.
Kode Program 8. SignalR Hub Class (v2) - HelloWorld.cs.

using
using
using
using
using
System;
System.Linq;
System.Web;
Microsoft.AspNet.SignalR;
namespace HelloSignalR
{
public class HelloWorld : Hub
{
19
public void Hello()

{
Clients.All.hello();
}
}
}
Selain menambahkan file class tersebut juga ditambahkan folder Scripts yang berisi file-file
kode Javascript yang dapat dilihat pada gambar di bawah ini.
Gambar 17. File-file Javascript.

File-file Javascript tersebut ditambahkan karena dibutuhkan untuk mendukung implementasi
ASP.NET SignalR 2 pada aplikasi. Selain tambahan file-file Javascript tersebut, pada project
juga ditambahkan beberapa namespace yang dapat dilihat pada gambar berikut ini.
Gambar 18. Namespace untuk mendukung implementasi SignalR.
Dari gambar di atas dapat dilihat beberapa namespace penting seperti :
20
1.
2.
3.
4.
5.
6.
Microsoft.AspNet.SignalR.Core.
Microsoft.AspNet.SignalR.SystemWeb.
Microsoft.Owin.
Microsoft.Owin.Host.SystemWeb.
Microsoft.Owin.Security.
Owin.
Selanjutnya adalah menambahkan class OWIN Startup dengan cara klik kanan pada project
kemudian pilih Add > New Item. Kemudian pilih Web dan pilih OWIN Startup class. Pada
kolom Name isi dengan nilai Startup.cs. Kemudian klik tombol Add.
Gambar 19. Menambahkan class OWIN Startup.

Berikut ini adalah isi dari file Startup.cs.
Kode Program 9. Class OWIN Startup pada Hub Startup.cs.

using
using
using
using
System;
Microsoft.Owin;
Owin;
[assembly: OwinStartup(typeof(HelloSignalR.Startup))]
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// For more information on how to configure your application,
visit http://go.microsoft.com/fwlink/?LinkID=316888
}
}
}
21
Menulis Kode Program

Setelah persiapan project di atas telah selesai dilakukan maka selanjutnya dilakukan
modifikasi kode class-class yang telah ada.
Berikutnya adalah melakukan modifikasi class Startup.cs.
Kode Program 10. Class OWIN Startup pada Hub Startup.cs - modifikasi.
using
using
using
using
System;
Microsoft.Owin;
Owin;
[assembly: OwinStartup(typeof(HelloSignalR.Startup))]
{
{
{
app.MapSignalR();
}
}
}
Pada kode di atas ditambahkan kode app.MapSignalR() ke dalam method Configuration.

Selanjutnya ditambahkan file index.html yang akan menjadi aplikasi web dan sebagai
halaman client yang akan digunakan user. Aplikasi yang dibuat ini berfungsi mengirimkan
pesan berupa tulisan Hello World! kepada seluaruh client yang terkoneksi ke server.
Gambar 20. Menambahkan file index.html.

Untuk menambahkan file index.html ini dengan cara klik kanan pada project kemudian pilih
Add > New Item. Kemudian pilih Web > HTML Page dan berikan nama file index.html pada
kolom Name. Dan klik tombol Add. Setelah file index.html dibuat, klik kanan pada file
tersebut dan pilih Set as Start Page.
22
Gambar 21. Membuat file index.html sebagai start page.

Kemudian ubah isi file index.html menjadi seperti berikut ini.
Kode Program 11. Hub - index.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World! with SignalR</title>
<script src="./Scripts/jquery-1.10.2.min.js"></script>
<script src="./Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="./signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var hub = $.connection.helloWorld;
hub.client.hello = function () {
$('#AddText').append('Hello World!<br />');
}
$.connection.hub.start().done(function () {
$('#SubmitButton').click(function () {
hub.server.hello();
});
});
});
</script>
</head>
<body>
<div id="AddText"></div>
<input type="button" id="SubmitButton" value="Say Hello" />
</body>
23
</html>
Uji Coba
Setelah melakukan pembuatan kode di atas maka selanjutnya aplikasi web yang telah ditulis
di atas diuji coba. Untuk menguji aplikasi di atas akan digunakan beberapa window web
browser yang akan dijalan sekaligus. Pada uji coba ini akan digunakan dua jenis web browser
yaitu Internet Explorer dan Mozilla Firefox.
Langkah pertama yang dilakukan untuk uji coba ini adalah mengeksekusi project ini dengan
cara klik kanan pada project kemudian pilih Debug > Start new instance. Maka akan dapat
dilihat web browser Internet Explorer seperti berikut ini.
Gambar 22. HelloWorld di Internet Explorer.

Dengan alamat yang didapat dari address bar di atas maka bisa digunakan untuk dijalankan
pada window web browser lainnya.
24
Gambar 23. Uji coba dengan 4 window web browser.

Pada gambar di atas dapat dilihat digunakan 4 window web browser, 2 window pada sisi
sebelah kiri adalah Internet Explorer, sedangkan 2 window di sisi kanan adalah Mozilla
Firefox.
Selanjutnya adalah mencoba untuk mengklik tombol Say Hello pada salah satu window yang
ada untuk membuktikan bahwa pesan Hello World! akan dikirimkan ke seluruh window.
Gambar 24. Pengujian pengiriman pesan ke seluruh client.

Dari hasil uji coba tersebut jika tombol pada salah satu window diklik maka tulisan Hallo
World! akan ditampilkan pada seluruh web browser.
25
Penjelasan
Pada contoh di atas digunakan model komunikasi Hub. Oleh sebab itu pada project
ditambahkan class Hub dengan nama HelloWorld. Karakteristik high level dari Hub
membuat developer sangat dimudahkan. Terbukti pada pada contoh di atas tidak perlu
menulis baris kode yang rumit.
Seperti halnya penjelasan pada komunikasi socket di bagian sebelumnya dimana komunikasi
bisa terjadi dikarenakan pada proses listener dan proses sender terdapat sesuatu yang
dapat membuat kedua proses tersebut berkomunikasi secara aktif. Sesuatu yang dimaksud
itu adalah socket. Pada contoh di atas dapat dilihat ada sesuatu yang ditambahkan pada
sisi server dan sisi client. Sesuatu yang ditambahkan pada sisi server adalah dengan
menambahkan class Hub dengan nama file HelloWorld.cs yang diikuti dengan penambahan
beberapa namespace yang berfungsi untuk mendukung Hub. Sedangkan pada sisi client
dapat dilihat penambahan file-file pada folder Scripts yang berisi file Javascript yang
merupakan library jQuery dan SignalR yang berfungsi untuk membuat sesuatu pada sisi
client.
Ada beberapa hal yang perlu diperhatikan pada kode-kode program yang telah ditulis diatas
agar mengerti bagaimana cara kerja baris kode yang telah ditulis.
Pada kode program 8 di atas dapat dilihat kode dari class Hub dengan nama HelloWorld
yang didalamnya terdapat method dengan nama Hello dengan isi sebagai berikut :
Kode Program 12. SignalR Hub Class (v2) HelloWorld Method Hello.
public void Hello()
{
}
Dapat dilihat isi dari method Hello tersebut berfungsi untuk memanggil fungsi hello yang
berada pada kode sisi client yang terkoneksi pada server.
Sedangkan pada sisi client ada beberapa hal yang mesti diperhatikan untuk implementasi
SignalR. Hal yang pertama dilakukan adalah menambahkan library pendukung SignalR pada
client dengan cara menambahkan baris berikut ini.
Kode Program 13. Library Javascript SignalR.

Secara otomatis saat halaman ini diakses maka sisi server akan menyiapkan script-script
lainnya sehingga ditulis baris berikut ini untuk mengakses script tersebut.
Kode Program 14. Libray Javascript dinamik SignalR.

Selanjutnya adalah membuat koneksi antara client dengan hub pada sisi server yang dapat
dilihat pada baris berikut ini.
Kode Program 15. Koneksi ke Hub server.

Dari kode di atas dapat dilihat helloWorld mengacu kepada nama class Hub HelloWorld.
Baris penting lainnya pada sisi client adalah baris berikut ini.
Kode Program 16. Fungsi saat tombol diklik.

26
hub.server.hello();
});
});
Baris di atas akan dieksekusi saat tombol diklik dan akan mengeksekusi baris
hub.server.hello() yang artinya akan memanggil method Hello yang ada pada clas Hub
HelloWorld. Seperti yang dapat dilihat pada kode program 12 bahwa method Hello akan
memanggil fungsi hello yang ada di sisi client, berikut adalah fungsi hello yang ada di sisi
client.
hub.client.hello = function () {
$('#AddText').append('Hello World!<br />');
}
Fungsi ini yang memungkinkan tulisah Hello World! ditampilkan dilayar seluruh web
browser yang dapat dilihat pada gambar 24 di atas.
Chat Room
Pada bagian ini akan dibuat aplikasi chat room sederhana dengan memanfaatkan SignalR
Hub Class (v2) yang telah dibuat sebelumnya. Untuk membuat hal tersebut maka perlu
ditambahkan sebuah method pada tersebut. Selain itu juga akan diterangkan beberapa hal
yang dimiliki oleh class SignalR Hub Class (v2).

Seperti yang dilihat dari kode program 8 dapat dilihat bahwa class HelloWorld merupakan
turunan dari class Hub, hal itu memungkinkan class anak memiliki kemampuan dari
induknya seperti method atau property. Selain itu juga memungkinkan class anak ini
memodifikasi kemampuan yang dimiliki induknya seperti melakukan override method yang
dimiliki induknya. Jika diperhatikan pada class induk terdapat method yang dapat dilakukan
override seperti yang terlihat pada gambar di bawah ini, method yang berfungsi untuk
menangani event yang terjadi.
Gambar 25. Daftar method event handler.
Dari daftar di atas dapat dilihat ada method yang berfungsi sebagai event handler seperti :
1.
2.
OnConnected, dieksekusi jika client terkoneksi ke server.

OnDisconnected, dieksekusi jika client terputus koneksinya.
27
3.
OnReconnected, dieksekusi jika client melakan koneksi ulang.
Pada class Hub HelloWorld ini akan ditambahkan override method OnConnected dan
menambahkan method Send sebagai salah satu fungsi pada aplikasi ChatRoom ini.
Berikut ini adalah isi file class Hub HelloWorld yang telah dimodifikasi.
Kode Program 17. SignalR Hub Class (v2) - HelloWorld.cs ChatRoom.

using
using
using
using
using
using
System;
System.Linq;
System.Web;
{
public class HelloWorld : Hub
{
public void Hello()
{
}
public void Send(string user, string pesan)
{
Clients.All.show(user, pesan);
}
public override Task OnConnected()
{
return Clients.All.connected();
}
}
}
Selanjutnya akan ditambahkan halaman baru dengan nama chatroom.html.
Kode Program 18. Hub chatroom.html

<!DOCTYPE html>
<head>
<title>ChatRoom</title>
$('#UserChat').val(prompt('Enter your name:', ''));
hub.client.connected = function () {
alert('User baru bergabung.');
}
hub.client.show = function (user, pesan) {
$('#AddText').append('<strong> ' + user + ' :</strong> ' +
pesan + '<br />');
}
28
hub.server.send($('#UserChat').val(),
$('#PesanChat').val());
$('#PesanChat').val('').focus();
});
});
});
</script>
</head>
<body>
<div id="ChatUser"></div>
<input type="text" id="PesanChat" />
<input type="button" id="SubmitButton" value="Send" />
<input type="hidden" id="UserChat" />
</body>
</html>
Uji Coba & Penjelasan

Setelah halaman chatroom.html dieksekusi dapat dilihat tampilan seperti berikut ini.
Gambar 26. Prompt nama user.

Prompt di atas berfungsi untuk mengisikan nama user yang akan digunakan pada chatroom,
untuk menampilkan prompt tersebut digunakan kode Javascript sederhana seperti berikut
ini.
Kode Program 19. Prompt nama user.

Nilai nama user yang dimasukkan akan disimpan di client yaitu pada elemen dengan ID =
UserChat. Dalam kasus ini nilai tersebut akan disimpan pada elemen input seperti kode di
bawah ini.
Kode Program 20. Input untuk menyimpan nama user.

Selanjutnya akan dilakukan konesi ke hub di server, dan jika koneksi berhasil dilakukan maka
server akan mengirimkan pesan ke seluruh client untuk memberikan informasi bahwa ada
user baru yang bergabung ke chatroom. Berikut ini adalah kode untuk melakukan koneksi
ke hub di server.
29
Kode Program 21. Koneksi ke Hub di server.

Pada server terdapat event handler ketika ada koneksi yang terjadi yang kodenya dapat
dilihat di bawah ini.
Kode Program 22. Event handler ketika ada client yang melakukan koneksi ke
server.
{
}
Pada method tersebut dapat dilihat akan dilakukan pemanggilan fungsi connected yang ada
pada sisi server dimana fungsi tersebut dapat dilihat di bawah ini.
Kode Program 23. Fungsi connect di sisi client.

hub.client.connected = function () {
alert('User baru bergabung.');
}
Hasil dari fungsi tersebut dapat dilihat pada gambar di bawah ini.
Gambar 27. Alert untuk memberi informasi user baru bergabung pada chatroom.
Selanjutnya user dapat mengetikkan pesan dan klik tombol Send untuk mengirim pesan pada
chatroom. Untuk menguji halaman ini digunakan 3 window web browser yaitu 2 window
menggunakan Internet Explorer dan sisanya menggunakan Mozilla Firefox. Setiap window
akan mengetikkan nama user yang berbeda. Maka dapat dilihat seperti pada gambar di
bawah ini hasil pembicaraan 3 orang user pada chat room.
30
Gambar 28. Uji coba chatroom.

Cara kerja dari tombol Send di atas adalah ketika tombol Send diklik maka akan dieksekusi
baris kode berikut ini.
Kode Program 24. Fungsi ketika tombol Send diklik.

hub.server.send($('#UserChat').val(), $('#PesanChat').val());
});
});
Dari kode di atas dapat dilihat baris berikut yang berfungsi untuk memanggil method Send
yang ada di server.
Kode Program 25. Eksekusi method Send di sisi server.

hub.server.send($('#UserChat').val(), $('#PesanChat').val());
Dapat dilihat kode Send pada sisi server seperti berikut ini :
Kode Program 26. Method Send di sisi server.

public void Send(string user, string pesan)
{
Clients.All.show(user, pesan);
}
Isi dari method ini berfungsi untuk memanggil fungsi show yang ada pada setiap halaman
client. Karena halaman ini sedang diakses oleh 3 client maka setiap fungsi show pada setiap
31
client akan dipanggil dan dieksekusi. Berikut ini adalah isi dari fungsi show yang ada di kode
di sisi client.
Kode Program 27. Fungsi show di sisi client.

hub.client.show = function (user, pesan) {
$('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br
/>');
}
TimerHub
Pada bagian ini akan diperlihatkan uji coba untuk menambahkan class SignalR Hub Class (v2)
baru pada project ini untuk memperlihatkan bagaimana menangani lebih dari class Hub.

Oleh karena itu pada bagian ini akan dibuat sebuah class Hub yang sangat sederhana seperti
berikut ini.
Kode Program 28. SignalR Hub Class (v2) TimerHub.cs

using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Threading;
{
public class TimerHub : Hub
{
public void Knock()
{
while (true)
{
Thread.Sleep(5000);
string waktu = DateTime.Now.ToString();
Clients.All.doknock(waktu);
}
}
}
}
Jika method Knock dipanggil oleh client maka seperti yang dilihat pada isi dari method
tersebut terjadi pengulangan tanpa henti dimana akan mengirimkan pesan ke semua client
yang terkoneksi ke server setiap 5 detik.
Berikut ini adalah isi dari halaman client yang memanfaatkan class Hub ini.
Kode Program 29. Hub timer.html.

<!DOCTYPE html>
<head>
<title>Timer</title>
32
var hub = $.connection.timerHub;
hub.client.doknock = function (waktu) {
$('#AddText').append(waktu + ' knock knock <br />');
}
hub.server.knock();
});
});
</script>
</head>
<body>
</body>
</html>
Dari kode di atas dapat dilihat begitu koneksi berhasil maka client akan memanggil method
Knock di server, kemudian di dalam method Knock di server terlihat ada pemanggilan fungsi
doknock yang ada pada client.
Uji Coba
Di bawah ini dapat dilihat hasil dari halaman timer.html, terlihat pada halaman tersebut
pesan ditampilkan setiap 5 detik.
Gambar 29. Uji coba timer.html.
Penjelasan
Dari uji coba di atas dapat dilihat untuk menambahkan SignalR Hub Class (v2) dapat
dilakukan begitu saja, tanpa harus melakukan penambahan kode apapun di class OWIN
Startup Class. Hal ini nanti akan bisa dibandingkan pada pembahasan saat menggunakan
SignalR Persistent Class (v2) pada bagian selanjutnya.
Hal lain yang perlu diperhatikan adalah cara penulisan class Hub pada client untuk
melakukan koneksi. Pada bagian Hello World dan Chat Room digunakan class Hub dengan
nama HelloWorld sehingga cara penulisan di sisi client adalah sebagai berikut :
33
Kode Program 30. Penulisan koneksi ke class Hub HelloWorld.

$.connection.helloWorld;
Sedangkan pada bagian ini digunakan class Hub dengan nama TimerHub maka dapat dilihat
cara penulisan pada client seperti berikut :
Kode Program 31. Penulisan koneksi ke class Hub TimerHub.

$.connection.timerHub;
Dari kedua contoh tersebut dapat dilihat polanya bahwa huruf awal dari class Hub mesti
ditulis menjadi huruf kecil ketika ditulis pada kode client, selebihnya besar kecil huruf yang
ditulis mengikuti yang ditulis pada class Hub server.
Referensi
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr
http://www.thinkingcog.com/post/2013/02/23/signalr-sample-application-hello-world.aspx
34
Persistent Connection
Pada bagian berikut ini akan dipaparkan tahap-tahap implementasi ASP.NET SignalR 2 pada
aplikasi web dengan menggunakan model komunikasi Persistent.
Hello World
Membuat Project
Untuk mencoba model komunikasi ini dibuat project dengan nama HelloPersistent dengan
cara yang sama seperti yang telah dilakukan pada bagian sebelumnya. langkah selanjutnya
adalah membuat SignalR Persistent Connection Class (v2) dengan nama HelloWorld. Berikut
adalah kode dari class ini.
Kode Program 32. SignalR Persistent Connection Class (v2) HelloWorld.cs.

using
using
using
using
using
using
System;
System.Linq;
System.Web;
namespace HelloPersistent
{
public class HelloWorld : PersistentConnection
{
protected override Task OnConnected(IRequest request, string
connectionId)
{
return Connection.Send(connectionId, "Hello World! on " +
DateTime.Now.ToString() + "<br/>");
}
protected override Task OnReceived(IRequest request, string
connectionId, string data)
{
return Connection.Broadcast(data + DateTime.Now.ToString() +
"<br/>");
}
}
}
Selanjutnya membuat OWIN Startup Class dengan nama Startup.cs dengan isi yang telah
dimodifikasi menjadi seperti berikut ini.
Kode Program 33. Class OWIN Startup pada Persistent Startup.cs.

using
using
using
using
System;
Microsoft.Owin;
Owin;
35
[assembly: OwinStartup(typeof(HelloPersistent.Startup))]
{
{
{
app.MapSignalR<HelloWorld>("/echo");
}
}
}

Berikut ini adalah kode untuk implementasi Persistent Connection pada client yang dibuat
pada file index.html.
Kode Program 34. Persistent index.html.

<!DOCTYPE html>
<head>
<title>Hello World! with SignalR</title>
var persistent = $.connection('/echo');
persistent.received(function (data) {
$('#AddText').append(data);
});
persistent.start().done(function () {
persistent.send("Hello World Clicked");
});
});
});
</script>
</head>
<body>
<input type="button" id="SubmitButton" value="Say Hello" />
</body>
</html>
Uji Coba
Seperti halnya uji coba yang dilakukan pada bahasan Hello World pada bagian Hub
Connection, hasil yang didapat pada kode di atas tidak berbeda jauh. Secara tampilan dapat
dilihat pada gambar di bawah ini.
36
Gambar 30. Uji coba implementasi Persistent Connection.
Penjelasan
Jika diperhatikan terdapat beberapa perbedaan jika dibandingkan dengan implmentasi Hub.
Perbedaan pertama adalah pada isi SignalR Persistent Connection Class (v2) dengan nama
HelloWorld. Jika diperhatikan pada class ini semua method yang ditulis adalah hasil dari
override method yang dimiliki oleh class induk. Tidak ada method baru yang dapat ditulis
oleh developer. Berbeda dengan SignalR Hub Class (v2) yang didalamnya dapat
ditambahkan method baru untuk digunakan melakukan komunikasi dengan client. Selain itu
tidak dimungkinkan untuk memanggil method baru tersebut di kode client karena tidak
tersedianya method tersebut, hal ini dikarenakan tidak ada script dinamik berisi method
tersebut yang digenerate oleh server seperti pada implementasi Hub.
Konfigurasi yang dilakukan pada OWIN Startup class juga mengalami perbedaan. Pada
implementasi Hub, konfigurasi yang dilakukan adalah seperti berikut :
Kode Program 35. Konfigurasi Hub pada OWIN Startup class.

app.MapSignalR();
Sedangkan pada untuk implementasi Persistent Connection, konfigurasi yang dilakukan

pada OWIN Startup class adalah seperti berikut ini :
Kode Program 36. Konfigurasi Persistent Connection pada OWIN Startup class.
HelloWorld adalah mengacu kepada class Persistent Connection yang dibuat, sedangkan
/echo merupakan path yang digunakan untuk mengakses class tersebut jika ingin melakukan
koneksi. Sehingga pada kode client dapat dilihat baris berikut untuk melakukan koneksi pada
class Persistent Connection.
Kode Program 37. Koneksi client ke server.

var persistent = $.connection('/echo');
37
Setelah client melakukan koneksi ke server maka akan sisi server dapat mengetahui ada client
yang melakuan koneksi dan akan mengeksekusi method event handler berikut ini.
Kode Program 38. Persistent Connection Server OnConnected.

protected override Task OnConnected(IRequest request, string connectionId)
{
return Connection.Send(connectionId, "Hello World! on " +
DateTime.Now.ToString() + "<br/>");
}
Method itu memungkinkan untuk mengirimkan pesan ke client yang baru melakukan
koneksi dengan connectionId milik client tersebut, yang artinya pesan tidak dikirimkan secara
broadcast ke seluruh client yang terkoneksi. Pada kode di atas dapat dilihat bahwa baris
tersebut tidak memanggil fungsi yang ada di client, kode tersebut menggunakan method Send
yang telah disediakan.
Selanjutnya untuk menerima pesan tersebut pada client terdapat baris kode berikut ini.
Kode Program 39. Persistent Connection Client received.

$('#AddText').append(data);
});
Fungsi received ini bertugas untuk menangani apapun yang dikirimkan oleh server. Pada
saat pertama koneksi dilakukan dapat dilihat pesan yang ditampilkan pada baris pertama
pada gambar 30.
Selanjutnya jika tombol Say Hello diklik maka dapat dilihat fungsi seperti berikut :
Kode Program 40. Persistent Connection Client tombol diklik.

persistent.send("Hello World Clicked");
});
});
Seperti halnya cara pengiriman pesan di sisi server yang menggunakan method Send yang
telah disediakan, pada kode di atas dapat dilihat untuk mengirim pesan ke server
menggunakan fungsi send yang juga telah disediakan. Dan untuk menerima pesan yang
dikirimkan oleh client maka di server terdapat event handler berikut ini.
Kode Program 41. Persistent Connection Server OnReceived.

protected override Task OnReceived(IRequest request, string connectionId,
string data)
{
return Connection.Broadcast(data + DateTime.Now.ToString() + "<br/>");
}
Pada kode di atas dapat dilihat akan dijalankan method Broadcast untuk mengirimkan pesan
ke seluruh client yang terkoneksi dan pesan yang diterima client akan ditangani oleh fungsi
pada kode program 39.
Dari penjelasan ini dapat dilhat baik pada client dan server hanya digunakan fungsi atau
method yang telah disediakan oleh SignalR, tidak ada method tambahan dari developer yang
digunakan pada kode di atas. Seperti yang telah disebutkan pada bagian Model Komunikasi
tentang perbedaan Hub dan Persistent Connection yang menyatakan bahwa Hub merupakan
model komunikasi high level sedangkan Persistent Connection adalah model komunikasi low
38
level. Sehingga pada Persistent Connection tidak terdapat kemudahan seperti yang tersedia
pada Hub.
Chat Room
Pada akan dibuat halaman chat room dengan memanfaatkan Persistent Connection. Terdapat
fitur-fitur yang sedikit berbeda dengan chat room yang telah dibuat sebelumnya pada bagian
Hub.

Berbeda dengan Hub yang dapat menambahkan method pada class Hub sehingga sebuah
class Hub dapat digunakan untuk berbagai keperluan, maka karena pada class Persistent
Connection hanya memanfaatkan method dan fungsi yang telah disediakan menyebabnya
jika ada kebutuhan yang berbeda perlu dilakukan penambahan class Persistent Connection
yang baru.
Berikut ini adalah kode class Persistent Connection untuk keperluan pembuatan chat room
ini.
Kode Program 42. Persistent Connection Class (v2) ChatRoom.cs.

using
using
using
using
using
using
System;
System.Linq;
System.Web;
{
public class ChatRoom : PersistentConnection
{
protected override Task OnConnected(IRequest request, string
connectionId)
{
return Connection.Send(connectionId, "Selamat datang di chat
room.");
}
protected override Task OnReceived(IRequest request, string
connectionId, string data)
{
return Connection.Broadcast(data);
}
}
}
Agar class tersebut dapat digunakan oleh kode program pada client maka perlu ditambahkan
baris berikut ini pada file Startup.cs.
Kode Program 43. Path koneksi untuk class ChatRoom.

app.MapSignalR<ChatRoom>("/chat");
39
Sehingga secara lengkap isi OWIN Startup class project ini menjadi seperti berikut :
Kode Program 44. OWIN Startup class pada persistent Startup.cs.

using
using
using
using
System;
Microsoft.Owin;
Owin;
[assembly: OwinStartup(typeof(HelloPersistent.Startup))]
{
{
{
}
}
}
Sedangkan di kode program untuk sisi client dapat dilihat di bawah ini.
Kode Program 45. Persistent chatroom.html.

<!DOCTYPE html>
<head>
var persistent = $.connection('/chat');
$('#AddText').append(data + '<br/>');
});
persistent.send($('#UserChat').val() + ' : ' +
});
});
});
</script>
</head>
<body>
<div id="ChatUser"></div>
</body>
</html>
40
Uji Coba & Penjelasan

Hasil dari kode di atas dapat dilihat pada gambar di bawah ini. Di awal perlu diisikan nama
yang akan digunakan pada chat room.
Gambar 31. Input nama user.

Selanjutnya dapat dilihat halaman dapat digunakan untuk melakukan chat.
Gambar 32. Chat room.

Ada beberapa hal yang perlu diperlihatikan, pada kode program 42 dapat dilihat nama class
Persistent Connection yang dibuat adalah ChatRoom. Class tersebut harus didaftarkan pada
class OWIN Startup class dengan cara seperti berikut :
Sehingga jika kode client akan melakukan koneksi ke server akan digunakan baris kode
berikut ini :
var persistent = $.connection('/chat');
41
Jika dibandingkan dengan yang pernah dikerjakan pada bagian Hub, dapat dilihat ada
perbedaan dalam menangani pengelolaan class koneksi di sisi server pada OWIN Startup
class. Begitu juga untuk melakukan koneksi dari sisi client ke server terlihat ada perbedaan.
Referensi
https://github.com/SignalR/SignalR/wiki/QuickStart-Persistent-Connections
http://pepitosolis.wordpress.com/2013/11/27/signalr-2-0-persistentconnection-example/
42
Client Windows Forms
Pada bagian ini akan akan dijelaskan bagaimana membuat aplikasi real-time dengan
memanfaatkan model komunikasi Hub pada server dan menggunakan platform Windows
Form sebagai client.
Membuat Project
Tahap pertama yang dilakukan adalah membuat project. Untuk itu klik kanan pada solution
kemudian pilih Add > New Project. Kemudian pilih bahasa yang digunakan C# > Windows
Desktop > Windows Forms Application.
Gambar 33. Window Add New Project ClientWinForms.

Isi ClientWinForms pada kolom Name kemudian klik tombol OK.
Selanjutnya adalah menambahkan package Microsoft ASP.NET SignalR .NET Client pada
project ini dengan cara klik kanan pada project kemudian pilih Manage Nuget Packages.
43
Gambar 34. ClientWinForms - Manage NuGet Packages Microsoft ASP.NET

SignalR .NET Client.
Untuk mendapatkan daftar seperti di atas, ketikkan kata kunci signalr pada kolom pencarian
yang ada pada sebelah kanan atas. Kemudian klik Microsoft ASP.NET SignalR .NET Client
kemudian klik tombol Install. Maka akan dilakukan proses download paket tersebut dan
setelah selesai maka akan dilakukan proses installasi paket tersebut.
Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.
Gambar 35. Daftar reference project ClientWinForms.
44
Pada gambar di atas dapat dilihat terdapat namespace Microsoft.AspNet.SignalR.Client yang

didalamnya terdapat class-class yang dapat dipergunakan untuk melakukan koneksi ke
server.

Langkah selanjutnya adalah menulis kode program untuk membuat client aplikasi chat realtime pada Windows Forms. Aplikasi client ini akan melakukan koneksi ke class Hub pada
sisi server yang telah dibuat sebelumnya.
Gambar 36. Windows Forms Chat Room.

Pada form di atas hanya dilakukan perubahan pada Size menjadi 600x400 dan perubahan
pada property Text menjadi Chat Room.
Selanjutnya akan dibuat antarmuka form menjadi seperti berikut ini.
Gambar 37. Form Chat Room.
45
Kemudian akan ditambahkan beberapa kode pada form ini dan kode untuk menangani aksi
ketika tombol Send diklik.
Kode Program 46. ClientWinForms Form1.cs.

using
using
using
using
using
using
using
using
using
System;
System.ComponentModel;
System.Data;
System.Drawing;
System.Linq;
System.Text;
System.Windows.Forms;
using Microsoft.AspNet.SignalR.Client;
namespace ClientWinForms
{
public partial class Form1 : Form
{
HubConnection hubConnection;
IHubProxy hubProxy;
public Form1()
{
InitializeComponent();
hubConnection = new
HubConnection("http://localhost:30526/signalr/hubs");
hubProxy = hubConnection.CreateHubProxy("HelloWorld");
hubProxy.On("connected", Connected);
hubProxy.On<string, string>("show", (user, pesan) =>
MessageBox.Show(user + " : " + pesan));
hubConnection.Start().Wait();
}
private void Connected()
{
MessageBox.Show("User baru bergabung.");
}
private void buttonSend_Click(object sender, EventArgs e)
{
hubProxy.Invoke("Send", "winform user", textBox1.Text).Wait();
}
}
}
Uji Coba
Untuk uji coba dilakukan dengan menjalankan server terlebih dahulu. Kemudian
menjalankan client halaman chatroom.html. Kemudian menjalankan aplikasi client Windows
Forms ini.
46
Gambar 38. Uji coba aplikasi Windows Forms.

Pada gambar di atas dapat dilihat halaman chatroom.html saat pertama kali dijalankan,
dimana ditampilkan window alert dengan pesan User baru bergabung. Begitu juga pada
aplikasi Windows Form saat pertama kali dijalankan ditampilkan window dengan pesan
yang sama, yang menandakan aplikasi ini telah terkoneksi ke Hub di server.
Selanjutnya akan dikirimkan pesan dari client Windows Forms maka akan dapat dilihat
hasilnya seperti berikut ini.
Gambar 39. Pesan dikirim dari aplikasi Windows Forms.

Dapat dilihat pesan yang dikirimkan dari aplikasi Windows Forms berhasil mengirimkan
pesan secara broadcast.
47
Begitu pula jika pesan dikirimkan oleh client halaman web, dapat dilihat pesan juga diterima
oleh aplikasi ini.
Gambar 40. Pesan dikirim dari halaman web.

Pesan yang diterima pada aplikasi Windows Forms dengan menggunakan kode di atas masih
menggunakan MessageBox sehingga pesan belum ditampilkan seperti pada halaman web.
Penjelasan
Berikut ini adalah penjelasan dari kode program 46. Langkah pertama adalah mendaftarkan
namespace berikut ini.
Kode Program 47. Namespace Microsoft.AspNet.SignalR.Client.

Dengan kode tersebut maka class-class pada namespace tersebut akan dapat digunakan.
Selanjutnya adalah menyiapkan instan objek dari class-class berikut ini.
Kode Program 48. Instansiasi class dan interface.

IHubProxy hubProxy;
Penjelasan sederhana dari kedua class tersebut adalah :

1.
2.
Class HubConnection berisi fungsi-fungsi yang dapat digunakan untuk melakukan

komunikasi ke server.
Interface IhubProxy berfungsi untuk menangani sisi client, sebagai contoh untuk
menangani pendaftaran method pada sisi client yang dapat dipanggil oleh server.
Selanjutnya adalah kode berikut ini. Kedua baris di bawah ini berfungsi untuk melakukan
koneksi ke Hub pada sisi server.
48
Kode Program 49. Koneksi ke Hub server.

hubConnection = new HubConnection("http://localhost:30526/signalr/hubs");
Baris pertama untuk menentukan alamat dari server SignalR sedangkan baris kedua untuk
menentukan class Hub mana yang akan digunakan.
Pada penjelasan berikut ini adalah bagaimana membuat dan mendaftarkan method atau aksi
pada client agar bisa diakses oleh Hub sisi server. Ada dua cara untuk mendaftarkan method
tersebut. Cara pertama dapat dilihat pada baris berikut ini yang berfungsi untuk
mendaftarkan method.
Kode Program 50. Register method.

Parameter pertama dari method On di atas mengacu dari kode Hub sisi server berikut ini.
pada kode di bawah ini dapat dilihat ada pemanggilan method connected yang ada pada
client yang terkoneksi ke server.
Kode Program 51. Method pada Hub sisi server.

{
}
Sedangkan parameter kedua dari method On mengacu ke kode yang ada pada client ini.
Kode Program 52. Method pada sisi client.

{
}
Cara kedua adalah berfungsi untuk mendaftarkan method dengan cara seperti berikut ini.
Kode Program 53. Register method dan data.

hubProxy.On<string, string>("show", (user, pesan) => MessageBox.Show(user + "
: " + pesan));
Pada baris di atas dapat dilihat pada method On dapat menangani data juga dengan cara
penanganan seperti pada baris di atas. Sama seperti pada cara yang pertama, method On di
sini juga memiliki dua parameter yang mempunyai fungsi sama seperti yang telah dijelaskan
di atas, bedanya hanya pada bagian parameter kedua yang ditulis dengan cara memetakan
data langsung ke suatu method bagian dari framework pada Windows Forms.
Jika cara kedua ini ingin diubah dengan memanfaatkan method yang dibuat sendiri maka
kode di atas dapat diubah menjadi seperti berikut ini.
Kode Program 54. Register method Show.

hubProxy.On<string, string>("show", (user, pesan) => Show(user, pesan));
Dan berikut adalah method Show yang dibuat.
Kode Program 55. Method Show.

private void Show(string user, string pesan)
{
MessageBox.Show(user + " : " + pesan);
}
49
Kode berikut ini merupakan update dari kode sebelumnya dimana pada update ini pesan
akan ditampilkan pada ListBox. Berikut adalah kode yang telah diupdate.
Kode Program 56. ClientWinForms Form1.cs yang telah diupdate.

using
using
using
using
using
using
using
using
using
System;
System.ComponentModel;
System.Data;
System.Drawing;
System.Linq;
System.Text;
System.Windows.Forms;
namespace ClientWinForms
{
public partial class Form1 : Form
{
IHubProxy hubProxy;
public Form1()
{
hubConnection = new
hubProxy.On<string, string>("show", (user, pesan) => Show(user,
pesan));
hubConnection.Start().Wait();
}
{
}
private void Show(string user, string pesan)
{
this.listBoxChat.Invoke(new MethodInvoker(() =>
this.listBoxChat.Items.Add(user + " : " + pesan)));
}
private void buttonSend_Click(object sender, EventArgs e)
{
if (!String.IsNullOrEmpty(textBoxUsername.Text))
{
hubProxy.Invoke("Send", textBoxUsername.Text,
textBoxPesan.Text).Wait();
}
else
{
MessageBox.Show("Username belum diisi.");
}
}
}
}
Maka dapat dilihat hasilnya seperti berikut ini.

50
Gambar 41. Pesan chat ditampilkan pada ListBox.
Referensi
http://www.codeguru.com/columns/experts/how-to-push-data-from-server-to-client-usingsignalr.htm
http://dontcodetired.com/blog/post/Consuming-Server-Side-SignalR-Events-in-UniversalWindows-App-Clients.aspx
51
Client Windows Phone
Pada bagian ini akan akan dijelaskan bagaimana membuat aplikasi real-time dengan
memanfaatkan model komunikasi Hub pada server dan menggunakan platform Windows
Phone sebagai client.
Membuat Project
Untuk menambahkan project dapat dilakukan seperti cara yang sebelumnya telah dilakukan
yaitu klik kanan pada Solution kemudian pilih Add > New Project. Kemudian pilh bahasa
yang digunakan Visual C# > Store Apps > Windows Phone Apps.
Gambar 42. Window Add New Project ClientWinPhone.

Pada template pilih Blank App (Windows Phone Silverlight) kemudian isi ClientWinPhone
pada kolom Name dan selanjutnya klik tombol OK.
Pada window selanjutnya pilih versi OS yang digunakan yaitu Windows Phone 8.1, kemudian
klik tombol OK.
52
Gambar 43. Versi Windows Phone OS yang digunakan.

Dan hasilnya dapat dilihat terdapat project berikut ini pada solution.
Gambar 44. Project ClientWinPhone pada solution.

Langkah selanjutnya adalah menambahkan package Microsoft ASP.NET SignalR .NET Client
pada project ini dengan cara klik kanan pada project ini kemudian pilih Manage NuGet
Packages.
53
Gambar 45. ClientWinPhone - Manage NuGet Packages Microsoft ASP.NET

SignalR .NET Client.
Untuk mendapatkan daftar seperti di atas, ketikkan kata kunci signalr pada kolom pencarian
yang ada pada sebelah kanan atas. Kemudian klik Microsoft ASP.NET SignalR .NET Client
kemudian klik tombol Install. Maka akan dilakukan proses download paket tersebut dan
setelah selesai maka akan dilakukan proses installasi paket tersebut.
Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.
Gambar 46. Namespace Microsoft.AspNet.SignalR.Client pada project

ClientWinPhone.
54

Langkah selanjutnya adalah menulis kode program untuk membuat aplikasi mobile chat realtime. Untuk antarmuka aplikasi ini dibuat seperti pada gambar berikut ini.
Gambar 47. Antarmuka aplikasi mobile chat real-time.

Untuk membuat antarmuka seperti itu digunakan kode berikut ini.
Kode Program 57. MainPage.xaml.

<phone:PhoneApplicationPage
x:Class="ClientWinPhone.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clrnamespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton
x:Name="ApplicationBarIconButton_Send"
55
Click="ApplicationBarIconButton_Send_Click"
IconUri="/Assets2/AppBar/new.png" Text="send"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox x:Name="ListBox_Chat" Grid.Row="0"/>
<TextBox x:Name="TextBox_Message" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Dan berikut ini adalah kode dari MainPage.xaml.cs.
Kode Program 58. MainPage.xaml.cs.

using
using
using
using
using
using
using
using
using
using
System;
System.Linq;
System.Net;
System.Windows;
System.Windows.Controls;
System.Windows.Navigation;
Microsoft.Phone.Controls;
Microsoft.Phone.Shell;
ClientWinPhone.Resources;
using System.Threading.Tasks;
namespace ClientWinPhone
{
public partial class MainPage : PhoneApplicationPage
{
56
IHubProxy hubProxy;
// Constructor
public MainPage()
{
hubConnection = new
InitializeConnection();
}
{
this.Dispatcher.BeginInvoke(() => MessageBox.Show("User baru
bergabung."));
}
private async Task Show(string user, string pesan)
{
this.Dispatcher.BeginInvoke(() => ListBox_Chat.Items.Add(user +
" : " + pesan));
}
private async Task InitializeConnection()
{
hubProxy.On<string, string>("show", (user, pesan) => Show(user,
pesan));
await hubConnection.Start();
}
private void ApplicationBarIconButton_Send_Click(object sender,
EventArgs e)
{
SendMassage("WP User", TextBox_Message.Text);
}
private async Task SendMassage(string user, string pesan)
{
await hubProxy.Invoke("Send", user, pesan);
TextBox_Message.Text = String.Empty;
}
}
}
Uji Coba
Uji coba client ini diuji bersama dengan dua platform client lainnya yaitu web dan Windows
Forms. Dapat dilihat pada gambar di bawah pesan yang dikirimkan salah satu client dapat
ditampilkan pada semua client. Pada uji coba ini terlihat respon pada client Windows Phone
lebih lama waktu tundanya sampai pesan ditampilkan.
57
Gambar 48. Uji coba client Windows Phone.
Penjelasan
Berikut ini adalah penjelasan dari kode yang telah dibuat di atas. Kode program 58 memiliki
kemiripan dengan kode client Windows Forms yang dapat dilihat pada kode program 46.
Untuk melakukan koneksi ke Hub di server dilakukan dengan kode di bawah ini.
Kode Program 59. Koneksi ke Hub sisi server.

hubConnection = new HubConnection("http://localhost:30526/signalr/hubs");
Kemudian untuk mendaftarkan method client yang dapat diakses oleh class Hub server dan
memulai proses koneksi maka dipanggil method InitializeConnection yang berisi kode
berikut.
Kode Program 60. Mendaftarkan method client dan memulai proses koneksi ke
Hub server.
private async Task InitializeConnection()
{
hubProxy.On<string, string>("show", (user, pesan) => Show(user, pesan));
await hubConnection.Start();
}
Pada method di atas dapat dilihat terdapat dua method client yg didaftarkan yaitu Connected
dan Show yang dapat dilihat pada kode berikut ini.
Kode Program 61. Method client Connected.

{
58
this.Dispatcher.BeginInvoke(() => MessageBox.Show("User baru

bergabung."));
}
Method di atas akan dipanggil Hub sisi server saat ada client yang melakukan koneksi. Dan
kode berikut ini akan dipanggil Hub sisi server untuk menampilkan pesan yang dikirim oleh
client.
Kode Program 62. Method client Show.

private async Task Show(string user, string pesan)
{
this.Dispatcher.BeginInvoke(() => ListBox_Chat.Items.Add(user +
" : " + pesan));
}
Pada Windows Phone, aksi yang melibatkan akses ke control oleh proses lain tidak diijinkan,
sebagai contoh eksekusi yang dilakukan oleh proses Hub di sisi server di atas. Oleh karena
itu jika method Connected berisi seperti kode di bawah ini tidak bisa dilakukan.
Kode Program 63. Method client Connected yang salah.

{
}
Agar aksi yang berhubungan dg akses ke kontrol bisa dilakukan maka dilakukan cara
penulisan seperti yang dicontohkan pada kode program 61 dan 62.
Referensi
http://stackoverflow.com/questions/21470866/windows-phone-8-signalr-connection-method
https://code.msdn.microsoft.com/windowsapps/Windows-Phone-8-Chat-1fa5eccf#content
59
Client Windows App

Pada bagian ini akan diberikan contoh membuat aplikasi client pada platform Windows App
dengan menggunakan bahasa pemrograman Javascript. Seperti yang telah diketahui pada
platform ini dapat dibangun aplikasi dengan bahasa C# dan VB.NET selain Javascript.
Membuat Project
Langkah pertama untuk membuat project ini adalah dengan klik kanan pada solution
kemudian pilih Add > New Project. Kemudian pilih bahasa Javascript > Store Apps >
Windows App > Blank App (Windows). Kemudian pada kolom nama isi dengan
ClientWinApp. Selanjutnya klik tombol OK.
Gambar 49. Add New Project Windows Apps

Langkah selanjutnya adalah menambahkan package SignalR client pada project ini dengan
cara klik kanan pada project kemudian klik Manage NuGet Packages. Pada kolom pencarian
di pojok kanan atas masukkan kata kunci signalr maka akan didapat daftar seperti pada
gambar di bawah ini.
Berbeda dengan kedua project sebelumnya yang memilih Microsoft ASP.NET SignalR .NET
Client, pada project ini dipilih package Microsoft ASP.NET SignalR Javascript Client.
Kemudian klik tombol Install.
60
Gambar 50. Manage NuGet Package Microsoft ASP.NET SignalR Javascript

Client.
Setelah proses download dan installasi package tersebut selesai maka dapat dilihat pada
project ini terdapat folder Scripts yang berisi file yang berisi file-file Javascript untuk
implementasi SignalR client.
Gambar 51. Script SignalR client.
61
Langkah selanjutnya adalah membuat project ini menjadi Startup Project dengan cara klik
kanan pada project ini kemudian pilih Set as Startup Project. Hasilnya dapat dilihat pada
bagian tool bar.
Gambar 52. Pilihan untuk menjalankan Windows App.

Sebelum menulis kode program utama ada hal yang harus dilakukan, yaitu melakukan
perubahan pada kode jQuery. Karena pada Windows App jika menggunakan script jQuery
begitu saja akan didapati peringatan seperti berikut ini.
Gambar 53. Peringatan saat menggunakan jQuery.

HTML1701: Unable to add dynamic content ' <link/><table></table><a href='/a'
style='top:1px;float:left;opacity:.55;'>a</a><input
type='checkbox'/>'.
A
script attempted to inject dynamic content, or elements previously modified
dynamically, that might be unsafe. For example, using the innerHTML property
to add script or malformed HTML will generate this exception. Use the
toStaticHTML method to filter dynamic content, or explicitly create elements
and attributes with a method such as createElement. For more information,
see http://go.microsoft.com/fwlink/?LinkID=247104.
Walaupun peringatan tersebut tetap dapat membuat kode program yang berhubungan
dengan SignalR pada client tetap berjalan dengan baik. Tetapi jika ingin menghilangkan
peringatan tersebut maka perlu ada perubahan pada file script jQuery yang digunakan pada
bagian berikut ini.
Kode Program 64. Baris jQuery.support sebelum diubah.

jQuery.support = (function( support ) {
var div = document.createElement( "div" ),
documentElement = document.documentElement,
all,
a,
select,
opt,
input,
marginDiv,
support,
fragment,
62
body,
testElementParent,
testElement,
testElementStyle,
tds,
events,
eventName,
i,
isSupported;
... dan seterusnya ...
return support;
})({});
Maka kode di atas dapat diubah menjadi seperti berikut ini, perubahannya dapat dilihat pada
bagian awal dan akhir baris.
Kode Program 65. Baris jQuery.support setelah diubah.

jQuery.support = MSApp.execUnsafeLocalFunction(function () {
var div = document.createElement( "div" ),
documentElement = document.documentElement,
all,
a,
select,
opt,
input,
marginDiv,
support,
fragment,
body,
testElementParent,
testElement,
testElementStyle,
tds,
events,
eventName,
i,
isSupported;
... dan seterusnya ...
return support;
});
Selanjutnya adalah menulis kode program client SignalR dengan kode Javascript seperti
berikut ini.
Kode Program 66. default.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ClientWinApp</title>

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

63
<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>

<script src="/Scripts/jquery-1.6.4.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.min.js"></script>
var connection =
$.hubConnection('http://localhost:30526/signalr/hubs');
var hubProxy = connection.createHubProxy('helloWorld');
hubProxy.on('connected', function (user, pesan) {
var msg = new Windows.UI.Popups.MessageDialog("User baru
bergabung.", "SignalR");
msg.showAsync();
console.log('User baru bergabung.');
});
hubProxy.on('show', function (user, pesan) {
$('#AddText').append('<strong> ' + user + ' :</strong> ' +
pesan + '<br />');
console.log(user + ' : ' + pesan);
});
connection.start()
.done(function ()
{
hubProxy.invoke('Send', 'Win8 User',
$('#PesanChat').val()).done(function () {
console.log('Send berhasil dieksekusi.');
}).fail(function (error) {
console.log('Send gagal dieksekusi. Error: ' +
error);
});
});
console.log('Terkoneksi, connection ID=' +
connection.id);
})
.fail(function () { console.log('Koneksi tidak dapat
dilakukan'); });
});
</script>
</head>
<body>
</body>
</html>
Uji Coba
Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada
local mechine dengan cara mengklik tombol ini.
64
Gambar 54. Pilihan menjalankan Windows App pada Local Machine.

Tapi pada uji coba ini aplikasi yang dibuat akan menggunakan Simulator maka pilihan untuk
menjalankan Windows App tersebut diganti menjadi seperti berikut.
Gambar 55. Pilihan menjalankan Windows App pada Simulator.

Setelah pilihan diubah, selanjutnya klik tombol berupa segitiga berwarna hijau tersebut.
Makan akan ditampilkan simulator seperti berikut ini.
Gambar 56. Aplikasi client Windows App dijalankan.

Dari gambar dapat dilihat message box yang menyatakan aplikasi terkoneksi pada server.
Setelah tombol Close pada message box diklik maka aplikasi ini siap digunakan untuk
melakukan chat.
Gambar 57. Aplikasi chat pada halaman web chatroom.html.
65
Gambar 58. Aplikasi chat Windows App.
Penjelasan
Pada kode Javascript yang digunakan di atas ada beberapa perbedaan jika dibandingkan
dengan kode Javascript yang digunakan pada bagian Hub sub bahasan tentang Chat Room.
Pada bahasan sebelumnya kode ditulis dengan memanfaatkan kode proxy digenerate
sehingga memudahkan untuk memanfaaatkan pembuatan fungsi hub pada client dan
kemudahan untuk mengakses hub pada server.
Pada kode program 66 di atas dapat dilihat kode untuk melakukan koneksi ke Hub server
tanpa ada bantuan proxy yang digenerate secara otomatis, hal ini bisa diidentifikasi dengan
tidak adanya baris kode berikut ini.
Kode Program 67. Lokasi proxy yang digenerate otomatis.

Karena proxy tidak digenerate secara otomatis maka cara penulisan kode mempunyai
kemiripan dengan yang dibahas pada bagian Client Windows Forms dan Client Windows
Phone.
Untuk melakukan koneksi ke server dilakukan dengan kode berikut ini.
var connection = $.hubConnection('http://localhost:30526/signalr/hubs');
var hubProxy = connection.createHubProxy('helloWorld');
Selanjutnya untuk memulai koneksi dapat dilakukan dengan kode berikut ini.
connection.start()
.done(function ()
{
. . .
console.log('Terkoneksi, connection ID=' + connection.id);
})
.fail(function () { console.log('Koneksi tidak dapat dilakukan'); });
66
Pada kode di atas dapat dilihat kode tambahan yang memanggil fungsi console.log, fungsi itu
bertujuan untuk mengeluarkan output pada Javascript console pada Visual Studio.
Gambar 59. Javascript console.

Selanjutnya untuk mendaftarkan fungsi hub pada client agar bisa dipanggil oleh method hub
pada server dapat dilakukan dengan menulis kode seperti berikut ini.
Kode Program 68. Mendaftarkan fungsi hub client.

hubProxy.on('connected', function (user, pesan) {
var msg = new Windows.UI.Popups.MessageDialog("User baru bergabung.",
"SignalR");
msg.showAsync();
console.log('User baru bergabung.');
});
hubProxy.on('show', function (user, pesan) {
$('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br
/>');
console.log(user + ' : ' + pesan);
});
Sedangkan kode yang digunakan untuk mengirim pesan chat dilakukan dengan
menggunakan kode berikut ini.
Kode Program 69. Fungsi mengirim pesan chat.

connection.start()
.done(function ()
{
hubProxy.invoke('Send', 'Win8 User',
$('#PesanChat').val()).done(function () {
console.log('Send berhasil dieksekusi.');
}).fail(function (error) {
console.log('Send gagal dieksekusi. Error: ' + error);
});
});
console.log('Terkoneksi, connection ID=' + connection.id);
})
.fail(function () { console.log('Koneksi tidak dapat dilakukan'); });
67
Referensi
http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metrojavascript-app-causes-security-error
http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascriptclient#manualproxy
http://www.codeproject.com/Articles/338916/Windows-JavaScript-Metro-ApplicationGetting-Sta
68
Hosting SignalR: Self-Host
Pada bagian ini akan dibahas bagaimana cara hosting aplikasi SignalR pada server. Biasanya
aplikasi SignalR dipasang pada web server IIS, namun anda dapat juga melakukan self-host
pada aplikasi console maupun pada windows services. SignalR memiliki pustaka self-host
yang dibangun diatas platform OWIN. OWIN dapat memisahkan aplikasi web dari server,
yang membuat OWIN ideal untuk melakukan self-hosting aplikasi web diluar IIS.
Beberapa alasan untuk melakukan self-host adalah :
IIS tidak tersedia, misal server yang sudah ada tidak mempunyai IIS.
Performance overhead jika menggunakan IIS dapat dihindari.
SignalR ditambahkan kedalam aplikasi terdahulu yang sudah berjalan pada
Windows Services atau Azure Worker role.
Membuat Server: Console Application

Pada tutorial berikut akan dijelaskan cara membuat server menggunakan aplikasi console.
Selain pada aplikasi console, server juga dapat di-host pada Windows services atau Azure
worker role.
Membuat Project
Pada tutorial berikut akan dijelaskan cara membuat server menggunakan aplikasi console.
Buka Visual Studio 2013 > kemudian pilih Windows Desktop > pilih Console Application.
Gambar 60. Menambah project Consol Application.

Pada VS 2013, pilih Tools > Nuget Package Manager > Package manager console.
69
Gambar 61. NuGet Package Manager

Pada Package manager console tulis perintah berikut untuk menambahkan pustaka untuk
self-host Install-Package Microsoft.AspNet.SignalR.SelfHost.
Gambar 62. Menambahkan library SignalR Self Host.

Tambahkan juga perintah berikut Install-Package Microsoft.Owin.Cors untuk menambahkan
pustaka OWIN. Pustaka ini digunakan untuk kebutuhan cross-domain karena aplikasi server
dan client akan di-host pada port yang berbeda.
Gambar 63. Menambahkan library Owin.

Langkah selanjutnya adalah menulis kode program. Pada file Program.cs, tambahkan kode
berikut:
Kode Program 70. Kode aplikasi server.

using
using
using
using
using
System;
Microsoft.Owin.Hosting;
Owin;
Microsoft.Owin.Cors;
namespace SampleSelfHost
{
class Program
{
70
{
string url = "http://localhost:8080";
using (WebApp.Start(url))
{
Console.WriteLine("Server running on {0}", url);
Console.ReadLine();
}
}
}
class Startup
{
{
app.UseCors(CorsOptions.AllowAll);
app.MapSignalR();
}
}
public class MyHub : Hub
{
public void Send(string name, string message)
{
Clients.All.addMessage(name, message);
}
}
}
Penjelasan
Kode diatas terdiri dari 3 kelas yaitu Program, Startup, dan MyHub. Pada class program
didefinisikan alamat dari server yang akan dibuat yaitu: http://localhost:8080. Class Startup
berisi konfigurasi dari SignalR server dan memanggil method MapSignalR() yang digunakan
untuk membuat route pada setiap Hub objek pada project. Class MyHub adalah class yang
akan menyediakan method yang dapat diakses oleh client.
Uji Coba
Jalankan aplikasi dengan menekan tombol F5. Maka aplikasi console akan dijalankan pada
url berikut.
Gambar 64. . Menjalankan server pada http://localhost:8080.
Membuat Client: Web Application

Pada bagian ini akan dibuat aplikasi client (Web Application) yang akan digunakan untuk
mengakses server (Console Application) yang sudah dibuat pada bagian sebelumnya.
71
Membuat Project
Pada solution explorer tambahkan project Web Application baru dengan nama
SampleSelfHostClient.
Gambar 65. Membuat project untuk aplikasi client

Kemudian pilih Empty template, dan tekan tombol OK.
Gambar 66. Memilih empty template.

Kemudian buka Package manager console untuk melakukan instalasi pustaka ASP.NET
SignalR seperti pada gambar dibawah ini.
72
Gambar 67. Memilih empty template

Pada project tambahkan HTML page dengan nama Default.html.
Gambar 68. Menambahkan HTML Page pada client

Pada halaman Default.html tambahkan kode HTML dan Javascript berikut.
Kode Program 71. Kode aplikasi client.

<!DOCTYPE html>
<html>
<head>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="http://localhost:8080/signalr/hubs"></script>
$(function () {
$.connection.hub.url = "http://localhost:8080/signalr";
var chat = $.connection.myHub;
chat.client.addMessage = function (name, message) {
$('#AddText').append('<strong>' + name + '</strong>: ' +
message + '<br/>');
};
$('#teksnama').val(prompt('Masukan nama:', ''));
$('#PesanChat').focus();
$('#kirimpesan').click(function () {
chat.server.send($('#teksnama').val(),
73
});
});
});
</script>
</head>
<body>
<div class="container">
<input type="button" id="kirimpesan" value="Kirim" />
<input type="hidden" id="teksnama" />
</div>
</body>
</html>
Penjelasan
Kode diatas mirip dengan kode yang sudah anda tulis pada bagian sebelumnya dari buku ini
tentang penggunaan SignalR Hub. Perbedaan dengan kode sebelumnya adalah adanya
tambahan URL yang digunakan untuk koneksi ke server yaitu:
Kode Program 72. Koneksi ke server.

$.connection.hub.url = "http://localhost:8080/signalr";
Uji Coba
Untuk menjalankan kedua project diatas (server dan client) secara bersamaan maka lakukan
langkah berikut. Klik kanan pada solution > pilih Sets Startup Projects > kemudian pilih
multiple startup project > pada project SampleSelfHost dan SampleSelfHostClient ubah action
menjadi Start.
Gambar 69. Tampilan pengaturan Multiple startup project
74
Kemudian jalankan aplikasi anda (tekan F5), maka kedua project akan dijalankan secara
berurutan. Seharusnya project server akan dijalankan terlebih dalulu baru kemudian diikuti
dengan project client. Gambar dibawah menunjukan tampilan dari aplikasi client.
Gambar 70. Tampilan output aplikasi Chat Room.
Referensi
http://www.asp.net/signalr/overview/deployment/tutorial-signalr-self-host
http://www.c-sharpcorner.com/UploadFile/4b0136/introduction-of-Asp-Net-signalr-selfhosting/
75
Hosting SignalR: Azure
Seperti yang sudah anda pelajari pada bagian sebelumnya ASP.NET SignalR dapat digunakan
untuk meningkatkan level interaktifitas antara server dan web atau .NET client. Ketika dihosting pada Microsoft Azure maka SignalR juga akan mendapatkan keuntungan dari Azure
seperti ketersediaan layanan yang dapat diandalkan, skalabilitas, dan performa.
Publish Project
Untuk dapat mempublish aplikasi ASP.NET SignalR kedalam platform Microsoft Azure ada
beberapa persyaratan yang harus dipenuhi terlebih dahulu seperti:
Azure Subscription: anda dapat mendaftar layanan Microsoft Azure versi trial
dengan mengakses url berikut: http://azure.microsoft.com/en-us/pricing/free-trial/
Anda harus menginstall Azure SDK 2.3 untuk Visual Studio 2013 atau Visual Studio
2012.
Penjelasan lengkap tentang hosting aplikasi asp.net di Microsoft Azure juga dapat
dibaca pada tautan berikut.
Setelah semua persyaratan diatas terpenuhi maka buka project yang sebelumnya sudah anda
buat yaitu HelloSignalR.
Gambar 71. Tampilan project HelloSignalR.
76
Kemudian klik kanan pada project tersebut > pilih Publish > pilih Microsoft Azure Website >
kemudian masukan username dan password dari akun Microsoft Azure anda.
Gambar 72. Tampilan window Publish Web

Setelah berhasil login maka akan muncul tampilan jendela Select Existing Websites berikut.
Jika anda belum membuat website di Microsoft Azure pilih tombol New.
Gambar 73. Tampilan window pemilihan website

Pada jendela Create site on Microsoft Azure, tambahkan site name HelloSignalR, dan pilih
region Southeast Asia. Pastikan nama site yang anda gunakan belum dipakai oleh orang lain.
Tekan tombol Create untuk membuat website baru di Azure.
77
Gambar 74. Tampilan window membuat website baru.

Kemudian akan mucul jendela Publish Web yang berisi detail informasi dari website yang
sudah anda buat. Tekan tombol Publish untuk mempublish project. Tunggu beberapa saat
sampai program selesai dipublish kedalam Microsoft Azure.
Gambar 75. Tampilan window publish aplikasi
78
Uji Coba
Untuk mencoba menjalankan aplikasi SignalR yang sudah dipublish pada Azure website,
maka anda dapat masuk kedalam portal Microsoft Azure > kemudian pilih HelloSignalR >
untuk mengetahui alamat url dari aplikasi yang sudah dipublish pilih Dashboard.
Gambar 76. Tampilan portal web Microsoft Azure.

Pada menu sebelah kanan cari informasi tentang Site URL. Pada gambar dibawah dapat
dilihat bahwa alamat dari aplikasi adalah: http://hellosignalr.azurewebsites.net.
Gambar 77. Informasi site URL.
79
Pada menu konfigurasi pastikan bahwa .NET Framework version yang digunakan adalah
.NET Framework 4.5.
Gambar 78. Tampilan output aplikasi Chat Room

Pastikan juga untuk mengaktifkan Web Sockets pada menu konfigurasi.

Klik pada URL tersebut untuk membuka aplikasi pada browser. Untuk mengakses aplikasi
SignalR ChatRoom yang sudah anda buat tambahkan informasi halaman chatroom.html pada
URL.
Gambar 80. Tampilan aplikasi Chat Room pada Azure

Anda juga dapat membuka browser lain dan mengakses URL yang sama untuk memastikan
bahwa aplikasi SignalR sudah berjalan dengan benar.
80
Referensi
http://www.asp.net/signalr/overview/deployment/using-signalr-with-azure-web-sites
http://erickkurniawan.net/2014/07/02/hosting-asp-net-mvc-di-windows-azure-part-1/
81
10
Scaleout dengan Service Bus
Pada umumnya ada dua cara untuk melakukan scale pada aplikasi web yaitu scale up dan scale
out:
Scale up: berarti menggunakan server yang lebih besar (VM yang lebih besar) dengan
CPU dan RAM yang lebih besar.
Scale out: berarti menambah lebih banyak server untuk menangani load.
Masalah yang dihadapi jika menggunakan solusi scale up adalah anda akan menghadapi
keterbatasan besar server (RAM dan CPU). Karena itu anda akan membutuhkan solusi scale
out. Akan tetapi jika anda menggunakan scale out maka ketika client terkoneksi ke satu server
tertentu tidak akan mendapatkan pesan dari server yang lain.
Gambar 82. Arsitektur scale out

Solusi dari masalah tersebut adalah memforward pesan dari satu server ke server yang lain
menggunakan komponen yang bernama backplane.
82
Gambar 83. Arsitektur backplane

Saat ini SignalR mendukung tiga macam backplane yang dapat digunakan yaitu: Microsoft
Azure Service Bus, Redis, dan SQL Server. Pada tutorial kali ini akan dibahas penggunaan
Microsoft Azure Service Bus.
Backplane dengan Azure Service Bus

Pada tutorial kali ini akan dibahas penggunaan Azure Service Bus sebagai backplane. Kita
akan mencoba untuk mendeploy aplikasi SignalR kedalam dua instance (dua VM yang
berbeda), kemudian menggunakan Azure Service Bus sebagai backplane.
Gambar 84. Arsitektur backplane dengan Service Bus.
83
Membuat Azure Cloud Services

Langkah pertama yang harus dilakukan adalah membuat aplikasi Cloud Service pada Azure
Portal. Buat Cloud Service baru dengan nama SignalRSampleBackplane.
Gambar 85. Membuat Azure Cloud Service

Setelah itu buat Service Bus Namespace baru pada Azure Portal. Beri nama samplechatscaleout. Pilih region Southeast Asia. Tipenya adalah Messaging, dan messaging tier-nya
pilih standard.
Gambar 86. Membuat Azure Service Bus
Membuat Project
Setelah membuat Cloud Service pada Azure Portal, langkah selanjutnya adalah membuat
Cloud Project pada Visual Studio 2013. Buat new project > pilih Azure Cloud Service > beri
nama ServiceBusChat.
84
Gambar 87. Membuat Azure Cloud Service.

Kemudian langkah selanjutnya adalah membuat aplikasi SignalR dengan ASP.NET MVC.
Pada jendela New Microsoft Azure Cloud Service pilih ASP.NET Web Role > kemudian beri
nama ChatSampleSR.
Gambar 88. Menambahkan Web Role.

Pada jendela New ASP.NET Project pilih template ASP.NET MVC. Kita akan menambahkan
fungsi-fungsi SignalR pada project ASP.NET MVC.
85
Gambar 89. Memilih template MVC.
Kemudian setelah project ASP.NET MVC selesai dibuat, pilih Tools > Nuget Package Manager
> Package manager console, dan tambahkan pustaka ASP.NET SignalR.
Gambar 90. Menambahkan pustaka SignalR

Pada solution explorer buat folder baru dengan nama Hubs. Kemudian tambahkan file
SignalR Hub Class (v2) dengan nama ChatHub.
Gambar 91. Menambahkan class SignalR Hub.
86
Menambahkan Kode
Setelah itu pada class ChatHub tambahkan kode untuk SignalR server Hub sebagai berikut.
Kode Program 73. Kode server Hub.

namespace ChatSampleSR
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the addNewMessageToPage method to update clients.
Clients.All.addNewMessageToPage(name, message);
}
}
}
Kemudian tambahkan kode berikut pada class Startup. Kode untuk backplane juga akan
ditambahkan pada bagian ini (setelah mengambil Service Bus connection string).
Kode Program 74. Kode pada class Startup.

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(ChatSampleSR.Startup))]
namespace ChatSampleSR
{
{
{
// Any connection or hub wire up and configuration should go
here
app.MapSignalR();
}
}
}
Langkah selanjutnya adalah membuat aplikasi client. Karena kita menggunakan project ASP.NET
MVC maka kita dapat menambahkan kode untuk client pada bagian View. Untuk itu tambahkan
dahulu kode berikut pada Controllers\HomeController untuk memanggil View.
Kode Program 75. Kode pada controller.

public ActionResult Chat()
{
return View();
}
Kemudian tambahkan View baru dengan nama Chat pada folder Views\Home.
87
Gambar 92. Menambahkan View.

Tambahkan kode berikut pada View yang baru saja anda buat.
Kode Program 76. Kode pada view.

@{
ViewBag.Title = "Chat Sample";
}
<h2>Chat</h2>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
@section scripts {
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
$(function () {
var chat = $.connection.chatHub;
chat.client.addNewMessageToPage = function (name, message) {
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
$('#displayname').val(prompt('Enter your name:', ''));
$('#message').focus();
$('#sendmessage').click(function () {
chat.server.send($('#displayname').val(),
$('#message').val());
$('#message').val('').focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
88
</script>
}
Kemudian pada project ChatSampleSR (ASP.NET MVC Project) tambahkan pustaka untuk
SignalR.ServiceBus. Buka Package Manager Console, kemudian tambahkan pustaka berikut.
Gambar 93. Menambahkan pustaka SignalR.ServiceBus.

Setelah pustaka untuk menggunakan Service Bus ditambahkan, langkah selanjutnya adalah
mengambil connection string untuk terkoneksi dengan Azure Service Bus. Buka portal
Microsoft Azure kemudian pilih Service Bus yang sudah kita buat sebelumnya. Kemudian
pilih Connection Information.
Gambar 94. Tampilan Azure Service Bus.

Copy connection string yang ada.
Gambar 95. Tampilan Azure Service Bus.

Setelah mendapatkan connection string pada Service Bus, tambahkan connection string
tersebut pada file Startup.cs tambahkan kode berikut:
Kode Program 77. Menambahkan connection string pada file Startup

{
{
string connectionString = "Endpoint=sb://samplechatscaleout.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessK
ey;SharedAccessKey=6ziOMe1ILkE5Yqucer4k76xxxxxxx";
89
GlobalHost.DependencyResolver.UseServiceBus(connectionString,
"Chat");
app.MapSignalR();
}
}
Publish Aplikasi
Pada tutorial berikut akan dijelaskan bagaimana cara untuk mempublish project Cloud
Service yang sudah kita buat kedalam Microsoft Azure.
Konfigurasi Instance & VM

Langkah yang pertama adalah melakukan konfigurasi pada project Cloud Service, langkah
ini dilakukan untuk menambahkan instance dan VM. Jadi kita akan mempublish aplikasi
ASP.NET SignalR kedalam 2 instance VM pada Microsoft Azure.
Pada project ServiceBusChat pilih ChatSampleSR role. Klik kanan pada ChatSampleSR >
kemudian pilih Properties.
Gambar 96. Tampilan Role ChatSampleSR.

Pilih Configuration > tambahkan instance count menjadi 2 > ubah VM size menjadi
ExtraSmall. Tekan tombol Save.
Gambar 97. Menambahkan Instance count dan VM size.

Pilih kembali project ServiceBusChat > pilih Publish. Maka akan muncul tampilan Publish
Azure Application. Silahkan login menggunakan account Microsoft Azure anda, kemudian
pilih Cloud Service dengan nama SignalRSampleBackplane yang sebelumnya sudah kita
buat.
Kemudian tekan tombol Publish untuk mempublish aplikasi ASP.NET SignalR kedalam
Azure Cloud Service. Tunggu proses publish yang akan memakan waktu bervariasi
tergantung dari kecepatan internet anda.
90
Gambar 98. Mempublish aplikasi kedalam Azure Cloud Service.
Uji Coba
Untuk melakukan uji coba aplikasi yang sudah kita publish, anda dapat mengakses Microsoft
Azure Portal > Cloud Services > kemudian pilih signalrsamplebackplane > pilih Dashboard.
Kemudian klik site url berikut: http://signalrsamplebackplane.cloudapp.net/ untuk
menampilkan aplikasi pada browser. Untuk menjalankan aplikasi SignalR Chat, tambahkan
url Home/Chat.
Gambar 99. Output aplikasi SignalR Chat pada browser Chrome.
91
Untuk memastikan aplikasi yang kita publish berjalan dengan baik, anda dapat membuka
browser baru untuk mencoba berkomunikasi antar aplikasi.
Gambar 100. Output aplikasi SignalR Chat pada browser Firefox.
Referensi
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalrand-mvc
http://www.asp.net/signalr/overview/performance/scaleout-with-windows-azure-servicebus
http://www.asp.net/signalr/overview/performance/scaleout-in-signalr
92
93

SignalR Ver.1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

SignalR Ver.1

Caricato da

Copyright:

Formati disponibili

See

Seri Belajar ASP.NET : Pengenalan ASP.NET

Available from: M Reza Faisal

Yogyakarta, Januari 2015

Banjarmasin, Januari 2015

Chat Room ........................................................................................................ 27

4 Persistent Connection ...............................................................................35

Chat Room ........................................................................................................ 39

5 Client Windows Forms .............................................................................43

6 Client Windows Phone .............................................................................52

7 Client Windows App .................................................................................60

8 Hosting SignalR: Self-Host ......................................................................69

Uji Coba ....................................................................................................................71

Membuat Client: Web Application.............................................................. 71

9 Hosting SignalR: Azure.............................................................................76

10 Scaleout dengan Service Bus ..................................................................82

Publish Aplikasi .............................................................................................. 90

Gambar 33. Window Add New Project ClientWinForms. .......................................................... 43

Gambar 67. Memilih empty template ............................................................................................... 73

Daftar Kode Program

Kode Program 67. Lokasi proxy yang digenerate otomatis. .......................................................... 66

Kode Program 1. Proses sender/client.

static int Main(string[] args)

Kode di bawah ini digunakan untuk proses listener.

Kode Program 2. Proses listener/server.

byte[] bytes = new Byte[1024];

Gambar 1. Program proses listener/server dijalankan pertama kali.

Gambar 2. Program proses sender/client.

Gambar 3. Proses listener/server menerima pesan dari proses sender/client.

Kode Program 3. Multicast listener.

Sedangkan berikut ini adalah kode program proses sender.

Kode Program 4. Multicast sender.

Gambar 4. Uji coba komunikasi multicast.

Gambar 5. Hasil uji coba komunikasi multicast.

Kode Program 5. Penggunaan IP address class D.

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

Gambar 6. Komunikasi pada HTTP.

Gambar 7. Web service.

Kode Program 6. Membuat socket TCP.

Kode Program 7. Membuat komunikasi multicast.

IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222);

Gambar 8. Memanggil method pada client dari server.

Gambar 9. Memanggil method pada server dari client.

SignalR dan WebSocket

Transport dan Fallback

Gambar 10. Diagram arsitektur SignalR.

Windows Server 2012.

IIS 8 atau IIS 8 Express.

Tabel 1. Kebutuhan transport web browser.

Aplikasi Desktop dan Silverlight

Aplikasi dibangun menggunakan .NET Framework 4 pada Windows XP SP3 atau

Tabel 2. Kebutuhan transport pada Windows Dekstop dan Silverlight.

Aplikasi Windows Store dan Windows Phone

Tabel 3. Kebutuhan transport pada Windows Store dan Windows Phone.

Windows 8.1 Pro 64-bit.

Gambar 11. Solution ASP.NET.SignalR.2.

Gambar 12. Window Add New Project.

Gambar 13. Window New ASP.NET Project.

Gambar 14. Project web HelloSignalR.

Gambar 15. Menambah SignalR Hub Class (v2).

Gambar 16. Class HelloHub.cs.

Kode Program 8. SignalR Hub Class (v2) - HelloWorld.cs.

public void Hello()