ASP.net SignalR Ver.1ASP.NET

i

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

Erick Kurniawan

([email protected])

Banjarmasin, Januari 2015

M Reza Faisal

(reza.faisal@gmail)

mailto:[email protected]

mailto:reza.faisal@gmail

ii

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

iii

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

iv

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

v

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

vi

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

vii

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

viii

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

ix

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

x

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

xi

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

1

1

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 System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Net;

2

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) {

3

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 System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Net; using 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.

4

byte[] bytes = new Byte[1024]; // menentukan lokal endpoint untuk socket. IPHostEntry ipHostInfo = Dns.Resolve(Dns.GetHostName()); IPAddress ipAddress = ipHostInfo.AddressList[0]; 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) {

5

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.

6

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 System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks; namespace MulticastListener { class Program { static void Main(string[] args)

7

{ 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 System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks; namespace MulticastSender { class Program { static void Main(string[] args) { UdpClient udpclient = new UdpClient(); IPAddress multicastaddress = IPAddress.Parse("239.0.0.222"); udpclient.JoinMulticastGroup(multicastaddress); IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222); Byte[] buffer = null; Console.WriteLine("Press ENTER to start sending messages"); Console.ReadLine(); for (int i = 0; i <= 8000; i++) { buffer = Encoding.Unicode.GetBytes(i.ToString()); udpclient.Send(buffer, buffer.Length, remoteep); Console.WriteLine("Sent " + i);

8

} 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.

UdpClient udpclient = new UdpClient();

9

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

IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222);

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.

10

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.

IPHostEntry ipHostInfo = Dns.Resolve(Dns.GetHostName()); IPAddress ipAddress = ipHostInfo.AddressList[0]; IPEndPoint localEndPoint = new IPEndPoint(ipAddress, 11000); Socket listener = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);

Atau untuk membuat komunikasi multicast cukup dengan cara berikut ini.

Kode Program 7. Membuat komunikasi multicast.

UdpClient udpclient = new UdpClient(); IPAddress multicastaddress = IPAddress.Parse("239.0.0.222"); udpclient.JoinMulticastGroup(multicastaddress);

11

IPEndPoint remoteep = new IPEndPoint(multicastaddress, 2222);

Kemudahan penulisan kode di atas dikarenakan hal itu sudah ditangani oleh .NET

Framework dengan cara memanfaatkan namespace System.Net dan System.Net.Socket.

Sehingga developer yang menggunakan namespace tersebut dapat langsung menggunakan

class-class untuk komunikasi menggunakan socket.

ASP.NET SignalR atau dapat disingkat menjadi SignalR adalah library seperti halnya

namespace di atas yang bertujuan untuk mempermudahkan kerja developer. SignalR adalah

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.

http://shootr.signalr.net/

12

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. 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.

2. Transport Coment.

https://github.com/signalr

13

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. Persistent Connection.

Persistent Connection API memungkinkan developer untuk mengakses secara

langsung protokol komunikasi low level.

2. 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. Windows Server 2012.

2. Windows Server 2008 r2.

14

3. Windows 8.

4. Windows 7.

5. Windows Azure.

Versi .NET Framework yang mendukung SignalR 2 adalah .NET Framework 4.5.

Web server yang dapat digunakan adalah :

1. IIS 8 atau IIS 8 Express.

2. IIS 7 dan 7.5

3. IIS harus dijalankan pada mode integrated. Mode classic tidak didukung.

4. 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. Microsoft Internet Explorer versi 8, 9, 10 dan 11. Mendukung versi modern, desktop,

dan mobile.

2. Mozilla Firefox: versi sekarang - 1, versi Windows dan Mac.

3. Google Chrome: versi sekarang - 1, versi Windows dan Mac.

4. Safari: versi sekarang - 1, versi Mac dan iOS.

5. Opera: versi sekarang - 1, hanya untuk versi Windows.

6. 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. Aplikasi dibangun menggunakan .NET Framework 4 pada Windows XP SP3 atau

diatasnya.

2. Aplikasi dibangun menggunakan .NET Framework 4.5 pada Windows Vista atau

diatasnya.

15

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

http://www.asp.net/signalr/overview/getting-started/introduction-to-signalr

http://www.asp.net/signalr/overview/getting-started/supported-platforms

16

2

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. Windows 8.1 Pro 64-bit.

2. .NET Framework 4.5.1.

3. Visual Studio 2013 SP 4.

4. SQL Server 2012 Express Edition.

17

3

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.

18

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.

19

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 System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; namespace HelloSignalR { public class HelloWorld : Hub {

20

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 :

21

1. Microsoft.AspNet.SignalR.Core.

2. Microsoft.AspNet.SignalR.SystemWeb.

3. Microsoft.Owin.

4. Microsoft.Owin.Host.SystemWeb.

5. Microsoft.Owin.Security.

6. 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 System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(HelloSignalR.Startup))] namespace HelloSignalR { 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 } } }

22

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 System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(HelloSignalR.Startup))] namespace HelloSignalR { public class Startup { public void Configuration(IAppBuilder app) { 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.

23

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>

24

</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.

25

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.

26

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() { Clients.All.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.

<script src="./Scripts/jquery-1.10.2.min.js"></script>

<script src="./Scripts/jquery.signalR-2.1.2.min.js"></script>

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.

<script src="./signalr/hubs" type="text/javascript"></script>

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.

var hub = $.connection.helloWorld;

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.

$.connection.hub.start().done(function () {

27

$('#SubmitButton').click(function () { 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. OnConnected, dieksekusi jika client terkoneksi ke server.

2. OnDisconnected, dieksekusi jika client terputus koneksinya.

28

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 System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; using System.Threading.Tasks; namespace HelloSignalR { public class HelloWorld : Hub { public void Hello() { Clients.All.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> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ChatRoom</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 () { $('#UserChat').val(prompt('Enter your name:', '')); var hub = $.connection.helloWorld; hub.client.connected = function () { alert('User baru bergabung.'); } hub.client.show = function (user, pesan) { $('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br />'); } $.connection.hub.start().done(function () {

29

$('#SubmitButton').click(function () { 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" /> <div id="AddText"></div> <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.

$('#UserChat').val(prompt('Enter your name:', ''));

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.

<input type="hidden" id="UserChat" />

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.

30

Kode Program 21. Koneksi ke Hub di server.

var hub = $.connection.helloWorld;

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.

public override Task OnConnected() { return Clients.All.connected();

}

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.

31

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.

$.connection.hub.start().done(function () { $('#SubmitButton').click(function () { hub.server.send($('#UserChat').val(), $('#PesanChat').val()); $('#PesanChat').val('').focus(); });

});

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

32

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 System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; using System.Threading; namespace HelloSignalR { 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> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Timer</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">

33

$(document).ready(function () { var hub = $.connection.timerHub; hub.client.doknock = function (waktu) { $('#AddText').append(waktu + ' knock knock <br />'); } $.connection.hub.start().done(function () { hub.server.knock(); }); }); </script> </head> <body> <div id="AddText"></div> </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 :

34

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

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

35

4

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 System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Web; using Microsoft.AspNet.SignalR; 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 System; using System.Threading.Tasks; using Microsoft.Owin; using Owin;

36

[assembly: OwinStartup(typeof(HelloPersistent.Startup))] namespace HelloPersistent { public class Startup { public void Configuration(IAppBuilder app) { 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> <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 type="text/javascript"> $(document).ready(function () { var persistent = $.connection('/echo'); persistent.received(function (data) { $('#AddText').append(data); }); persistent.start().done(function () { $('#SubmitButton').click(function () { persistent.send("Hello World Clicked"); }); }); }); </script> </head> <body> <div id="AddText"></div> <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.

37

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.

app.MapSignalR<HelloWorld>("/echo");

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');

38

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.

persistent.received(function (data) { $('#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.start().done(function () { $('#SubmitButton').click(function () { 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

39

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 System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Web; using Microsoft.AspNet.SignalR; namespace HelloPersistent { 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");

40

Sehingga secara lengkap isi OWIN Startup class project ini menjadi seperti berikut :

Kode Program 44. OWIN Startup class pada persistent – Startup.cs.

using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(HelloPersistent.Startup))] namespace HelloPersistent { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR<HelloWorld>("/echo"); app.MapSignalR<ChatRoom>("/chat"); } } }

Sedangkan di kode program untuk sisi client dapat dilihat di bawah ini.

Kode Program 45. Persistent – chatroom.html.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ChatRoom</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 () { $('#UserChat').val(prompt('Enter your name:', '')); var persistent = $.connection('/chat'); persistent.received(function (data) { $('#AddText').append(data + '<br/>'); }); persistent.start().done(function () { $('#SubmitButton').click(function () { persistent.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" /> <div id="AddText"></div> <input type="hidden" id="UserChat" /> </body>

</html>

41

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 :

app.MapSignalR<ChatRoom>("/chat");

Sehingga jika kode client akan melakukan koneksi ke server akan digunakan baris kode

berikut ini :

var persistent = $.connection('/chat');

42

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/

https://github.com/SignalR/SignalR/wiki/QuickStart-Persistent-Connections

http://pepitosolis.wordpress.com/2013/11/27/signalr-2-0-persistentconnection-example/

43

5

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.

44

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.

45

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 real-

time 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.

46

Kemudian akan ditambahkan beberapa kode pada form ini dan kode untuk menangani aksi

ketika tombol Send diklik.

Kode Program 46. ClientWinForms – Form1.cs.

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using 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.

47

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.

48

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.

using 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.

HubConnection hubConnection;

IHubProxy hubProxy;

Penjelasan sederhana dari kedua class tersebut adalah :

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

komunikasi ke server.

2. 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.

49

Kode Program 49. Koneksi ke Hub server.

hubConnection = new HubConnection("http://localhost:30526/signalr/hubs");

hubProxy = hubConnection.CreateHubProxy("HelloWorld");

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.

hubProxy.On("connected", Connected);

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.

public override Task OnConnected() { return Clients.All.connected();

}

Sedangkan parameter kedua dari method On mengacu ke kode yang ada pada client ini.

Kode Program 52. Method pada sisi client.

private void Connected() { MessageBox.Show("User baru bergabung.");

}

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);

}

50

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 System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using 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) => Show(user, pesan)); hubConnection.Start().Wait(); } private void Connected() { MessageBox.Show("User baru bergabung."); } 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.

51

Gambar 41. Pesan chat ditampilkan pada ListBox.

Referensi

http://www.codeguru.com/columns/experts/how-to-push-data-from-server-to-client-using-

signalr.htm

http://dontcodetired.com/blog/post/Consuming-Server-Side-SignalR-Events-in-Universal-

Windows-App-Clients.aspx

http://www.codeguru.com/columns/experts/how-to-push-data-from-server-to-client-using-signalr.htm

http://www.codeguru.com/columns/experts/how-to-push-data-from-server-to-client-using-signalr.htm

http://dontcodetired.com/blog/post/Consuming-Server-Side-SignalR-Events-in-Universal-Windows-App-Clients.aspx

http://dontcodetired.com/blog/post/Consuming-Server-Side-SignalR-Events-in-Universal-Windows-App-Clients.aspx

52

6

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.

53

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.

54

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.

55


Langkah selanjutnya adalah menulis kode program untuk membuat aplikasi mobile chat real-

time. 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="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace: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"

56

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>  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="SignalR" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="chat room" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>  <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 System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Navigation; using Microsoft.Phone.Controls; using Microsoft.Phone.Shell; using ClientWinPhone.Resources; using Microsoft.AspNet.SignalR.Client; using System.Threading.Tasks; namespace ClientWinPhone { public partial class MainPage : PhoneApplicationPage { HubConnection hubConnection;

57

IHubProxy hubProxy; // Constructor public MainPage() { InitializeComponent(); hubConnection = new HubConnection("http://localhost:30526/signalr/hubs"); hubProxy = hubConnection.CreateHubProxy("HelloWorld"); InitializeConnection(); } private void Connected() { 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("connected", Connected); 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.

58

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");

hubProxy = hubConnection.CreateHubProxy("HelloWorld");

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("connected", Connected); 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.

private void Connected() {

59

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.

private void Connected() { MessageBox.Show("User baru bergabung.");

}

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

http://stackoverflow.com/questions/21470866/windows-phone-8-signalr-connection-method

https://code.msdn.microsoft.com/windowsapps/Windows-Phone-8-Chat-1fa5eccf#content

60

7

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.

61

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.

62

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,

63

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>

64

<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> <script type="text/javascript"> $(document).ready(function () { 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 () { $('#SubmitButton').click(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); }); $('#PesanChat').val('').focus(); }); console.log('Terkoneksi, connection ID=' + connection.id); }) .fail(function () { console.log('Koneksi tidak dapat dilakukan'); }); }); </script> </head> <body> <input type="text" id="PesanChat" /> <input type="button" id="SubmitButton" value="Send" /> <div id="AddText"></div> </body> </html>

Uji Coba

Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada

local mechine dengan cara mengklik tombol ini.

65

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.

66

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.

<script src="./signalr/hubs" type="text/javascript"></script>

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'); });

67

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 () { $('#SubmitButton').click(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); }); $('#PesanChat').val('').focus(); }); console.log('Terkoneksi, connection ID=' + connection.id); })

.fail(function () { console.log('Koneksi tidak dapat dilakukan'); });

68

Referensi

http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-

javascript-app-causes-security-error

http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-

client#manualproxy

http://www.codeproject.com/Articles/338916/Windows-JavaScript-Metro-Application-

Getting-Sta

http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-javascript-app-causes-security-error

http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-javascript-app-causes-security-error

http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#manualproxy

http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#manualproxy

http://www.codeproject.com/Articles/338916/Windows-JavaScript-Metro-Application-Getting-Sta

http://www.codeproject.com/Articles/338916/Windows-JavaScript-Metro-Application-Getting-Sta

69

8

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.

70

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 System; using Microsoft.AspNet.SignalR; using Microsoft.Owin.Hosting; using Owin; using Microsoft.Owin.Cors; namespace SampleSelfHost { class Program { static void Main(string[] args)

71

{ string url = "http://localhost:8080"; using (WebApp.Start(url)) { Console.WriteLine("Server running on {0}", url); Console.ReadLine(); } } } class Startup { public void Configuration(IAppBuilder app) { 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.

http://localhost:8080/

http://localhost:8080/

72

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.

73

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> <title>ChatRoom</title> <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> <script type="text/javascript"> $(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(); $.connection.hub.start().done(function () { $('#kirimpesan').click(function () { chat.server.send($('#teksnama').val(), $('#PesanChat').val());

74

$('#PesanChat').val('').focus(); }); }); }); </script> </head> <body> <div class="container"> <input type="text" id="PesanChat" /> <input type="button" id="kirimpesan" value="Kirim" /> <input type="hidden" id="teksnama" /> <div id="AddText"></div> </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

75

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-self-

hosting/

http://www.asp.net/signalr/overview/deployment/tutorial-signalr-self-host

http://www.c-sharpcorner.com/UploadFile/4b0136/introduction-of-Asp-Net-signalr-self-hosting/

http://www.c-sharpcorner.com/UploadFile/4b0136/introduction-of-Asp-Net-signalr-self-hosting/

76

9

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 di-

hosting 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.

http://azure.microsoft.com/en-us/pricing/free-trial/

http://erickkurniawan.net/2014/07/02/hosting-asp-net-mvc-di-windows-azure-part-1/

77

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.

78

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

79

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.

http://hellosignalr.azurewebsites.net/

80

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.


81

Referensi

http://www.asp.net/signalr/overview/deployment/using-signalr-with-azure-web-sites


http://www.asp.net/signalr/overview/deployment/using-signalr-with-azure-web-sites


82

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.

83

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.

84

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 samplechat-

scaleout. 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.

85

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.

86

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.

87

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 { public class Startup { public void Configuration(IAppBuilder app) { // 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.

88

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(); $.connection.hub.start().done(function () { $('#sendmessage').click(function () { chat.server.send($('#displayname').val(), $('#message').val()); $('#message').val('').focus(); }); }); }); function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; }

89

</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

public class Startup { public void Configuration(IAppBuilder app) { string connectionString = "Endpoint=sb://samplechat-scaleout.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=6ziOMe1ILkE5Yqucer4k76xxxxxxx";

90

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.

91

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.

http://signalrsamplebackplane.cloudapp.net/

92

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-signalr-

and-mvc

http://www.asp.net/signalr/overview/performance/scaleout-with-windows-azure-service-

bus

http://www.asp.net/signalr/overview/performance/scaleout-in-signalr

http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc

http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc

http://www.asp.net/signalr/overview/performance/scaleout-with-windows-azure-service-bus

http://www.asp.net/signalr/overview/performance/scaleout-with-windows-azure-service-bus

http://www.asp.net/signalr/overview/performance/scaleout-in-signalr

ASP.net SignalR Ver.1ASP.NET

Documents

Transcript of ASP.net SignalR Ver.1ASP.NET