1 2 Kata Pengantar Puji dan syukur diucapkan kepada Allah SWT atas selesainya ebook sederhana yang berjudul Pengenalan ASP.NET SignalR. Pada ebook ini...
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.
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
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 Menulis Kode Program ..........................................................................................27 Uji Coba & Penjelasan ............................................................................................29
TimerHub ......................................................................................................... 32 Menulis Kode Program ..........................................................................................32 Uji Coba ....................................................................................................................33 Penjelasan .................................................................................................................33
Referensi ........................................................................................................... 34 ii
4 Persistent Connection ...............................................................................35 Hello World ...................................................................................................... 35 Membuat Project .....................................................................................................35 Menulis Kode Program ..........................................................................................36 Uji Coba ....................................................................................................................36 Penjelasan .................................................................................................................37
Chat Room ........................................................................................................ 39 Menulis Kode Program ..........................................................................................39 Uji Coba & Penjelasan ............................................................................................41
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 Menulis Kode Program .................................................................................. 55 Uji Coba ............................................................................................................ 57 Penjelasan ......................................................................................................... 58 Referensi ........................................................................................................... 59
7 Client Windows App .................................................................................60 Membuat Project ............................................................................................. 60 Menulis Kode Program .................................................................................. 62 Uji Coba ............................................................................................................ 64 Penjelasan ......................................................................................................... 66 Referensi ........................................................................................................... 68
8 Hosting SignalR: Self-Host ......................................................................69 Membuat Server: Console Application....................................................... 69 Membuat Project .....................................................................................................69 Menulis Kode Program ..........................................................................................70 Penjelasan .................................................................................................................71 iii
Membuat Client: Web Application.............................................................. 71 Membuat Project .....................................................................................................72 Menulis Kode Program ..........................................................................................73 Penjelasan .................................................................................................................74 Uji Coba ....................................................................................................................74 Referensi ...................................................................................................................75
10 Scaleout dengan Service Bus ..................................................................82 Backplane dengan Azure Service Bus ......................................................... 83 Membuat Azure Cloud Services ...........................................................................84 Membuat Project .....................................................................................................84 Menambahkan Kode ..............................................................................................87
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
v
Gambar 33. Window Add New Project – ClientWinForms. .......................................................... 43 Gambar 34. ClientWinForms - Manage NuGet Packages – Microsoft ASP.NET SignalR .NET Client. ............................................................................................................................................ 44 Gambar 35. Daftar reference project ClientWinForms. .................................................................. 44 Gambar 36. Windows Forms – Chat Room. ..................................................................................... 45 Gambar 37. Form Chat Room. ........................................................................................................... 45 Gambar 38. Uji coba aplikasi Windows Forms................................................................................ 47 Gambar 39. Pesan dikirim dari aplikasi Windows Forms. ............................................................ 47 Gambar 40. Pesan dikirim dari halaman web. ................................................................................ 48 Gambar 41. Pesan chat ditampilkan pada ListBox. ........................................................................ 51 Gambar 42. Window Add New Project – ClientWinPhone. .......................................................... 52 Gambar 43. Versi Windows Phone OS yang digunakan. .............................................................. 53 Gambar 44. Project ClientWinPhone pada solution. ...................................................................... 53 Gambar 45. ClientWinPhone - Manage NuGet Packages – Microsoft ASP.NET SignalR .NET Client. ............................................................................................................................................ 54 Gambar 46. Namespace Microsoft.AspNet.SignalR.Client pada project ClientWinPhone. ...... 54 Gambar 47. Antarmuka aplikasi mobile chat real-time. ................................................................ 55 Gambar 48. Uji coba client Windows Phone. ................................................................................... 58 Gambar 49. Add New Project – Windows Apps ............................................................................. 60 Gambar 50. Manage NuGet Package – Microsoft ASP.NET SignalR Javascript Client. ............ 61 Gambar 51. Script SignalR client. ...................................................................................................... 61 Gambar 52. Pilihan untuk menjalankan Windows App. ............................................................... 62 Gambar 53. Peringatan saat menggunakan jQuery. ....................................................................... 62 Gambar 54. Pilihan menjalankan Windows App pada Local Machine. ...................................... 65 Gambar 55. Pilihan menjalankan Windows App pada Simulator. ............................................... 65 Gambar 56. Aplikasi client Windows App dijalankan. .................................................................. 65 Gambar 57. Aplikasi chat pada halaman web chatroom.html. ..................................................... 65 Gambar 58. Aplikasi chat Windows App. ........................................................................................ 66 Gambar 59. Javascript console. .......................................................................................................... 67 Gambar 60. Menambah project Consol Application....................................................................... 69 Gambar 61. NuGet Package Manager............................................................................................... 70 Gambar 62. Menambahkan library SignalR Self Host. ................................................................... 70 Gambar 63. Menambahkan library Owin. ....................................................................................... 70 Gambar 64. . Menjalankan server pada http://localhost:8080. ....................................................... 71 Gambar 65. Membuat project untuk aplikasi client ........................................................................ 72 Gambar 66. Memilih empty template. .............................................................................................. 72 vi
Gambar 67. Memilih empty template ............................................................................................... 73 Gambar 68. Menambahkan HTML Page pada client ..................................................................... 73 Gambar 69. Tampilan pengaturan Multiple startup project .......................................................... 74 Gambar 70. Tampilan output aplikasi Chat Room. ........................................................................ 75 Gambar 71. Tampilan project HelloSignalR. ................................................................................... 76 Gambar 72. Tampilan window Publish Web ................................................................................... 77 Gambar 73. Tampilan window pemilihan website ......................................................................... 77 Gambar 74. Tampilan window membuat website baru. ................................................................ 78 Gambar 75. Tampilan window publish aplikasi ............................................................................. 78 Gambar 76. Tampilan portal web Microsoft Azure. ....................................................................... 79 Gambar 77. Informasi site URL. ........................................................................................................ 79 Gambar 78. Tampilan output aplikasi Chat Room ......................................................................... 80 Gambar 79. Tampilan output aplikasi Chat Room ......................................................................... 80 Gambar 80. Tampilan aplikasi Chat Room pada Azure ................................................................ 80 Gambar 81. Tampilan output aplikasi Chat Room ......................................................................... 80 Gambar 82. Arsitektur scale out ........................................................................................................ 82 Gambar 83. Arsitektur backplane ...................................................................................................... 83 Gambar 84. Arsitektur backplane dengan Service Bus. ................................................................. 83 Gambar 85. Membuat Azure Cloud Service .................................................................................... 84 Gambar 86. Membuat Azure Service Bus ......................................................................................... 84 Gambar 87. Membuat Azure Cloud Service. ................................................................................... 85 Gambar 88. Menambahkan Web Role. ............................................................................................. 85 Gambar 89. Memilih template MVC. ................................................................................................ 86 Gambar 90. Menambahkan pustaka SignalR ................................................................................... 86 Gambar 91. Menambahkan class SignalR Hub. .............................................................................. 86 Gambar 92. Menambahkan View. ..................................................................................................... 88 Gambar 93. Menambahkan pustaka SignalR.ServiceBus. .............................................................. 89 Gambar 94. Tampilan Azure Service Bus. ........................................................................................ 89 Gambar 95. Tampilan Azure Service Bus. ........................................................................................ 89 Gambar 96. Tampilan Role ChatSampleSR. ..................................................................................... 90 Gambar 97. Menambahkan Instance count dan VM size. .............................................................. 90 Gambar 98. Mempublish aplikasi kedalam Azure Cloud Service. ............................................... 91 Gambar 99. Output aplikasi SignalR Chat pada browser Chrome. .............................................. 91 Gambar 100. Output aplikasi SignalR Chat pada browser Firefox. .............................................. 92
vii
Daftar Kode Program Kode Program 1. Proses sender/client. ............................................................................................... 1 Kode Program 2. Proses listener/server. ............................................................................................. 3 Kode Program 3. Multicast listener. .................................................................................................... 6 Kode Program 4. Multicast sender. ..................................................................................................... 7 Kode Program 5. Penggunaan IP address class D. ........................................................................... 8 Kode Program 6. Membuat socket TCP. .......................................................................................... 10 Kode Program 7. Membuat komunikasi multicast. ........................................................................ 10 Kode Program 8. SignalR Hub Class (v2) - HelloWorld.cs. ........................................................... 19 Kode Program 9. Class OWIN Startup pada Hub – Startup.cs. .................................................... 21 Kode Program 10. Class OWIN Startup pada Hub – Startup.cs - modifikasi. ............................ 22 Kode Program 11. Hub - index.html. ................................................................................................ 23 Kode Program 12. SignalR Hub Class (v2) – HelloWorld – Method Hello. ................................ 26 Kode Program 13. Library Javascript SignalR. ................................................................................ 26 Kode Program 14. Libray Javascript dinamik SignalR. .................................................................. 26 Kode Program 15. Koneksi ke Hub server. ...................................................................................... 26 Kode Program 16. Fungsi saat tombol diklik. ................................................................................. 26 Kode Program 17. SignalR Hub Class (v2) - HelloWorld.cs – ChatRoom. .................................. 28 Kode Program 18. Hub – chatroom.html ......................................................................................... 28 Kode Program 19. Prompt nama user. ............................................................................................. 29 Kode Program 20. Input untuk menyimpan nama user. ............................................................... 29 Kode Program 21. Koneksi ke Hub di server. ................................................................................. 30 Kode Program 22. Event handler ketika ada client yang melakukan koneksi ke server. .......... 30 Kode Program 23. Fungsi connect di sisi client. .............................................................................. 30 Kode Program 24. Fungsi ketika tombol Send diklik. .................................................................... 31 Kode Program 25. Eksekusi method Send di sisi server. ............................................................... 31 Kode Program 26. Method Send di sisi server. ............................................................................... 31 Kode Program 27. Fungsi show di sisi client. .................................................................................. 32 Kode Program 28. SignalR Hub Class (v2) – TimerHub.cs ............................................................ 32 Kode Program 29. Hub – timer.html................................................................................................. 32 Kode Program 30. Penulisan koneksi ke class Hub HelloWorld. ................................................. 34 Kode Program 31. Penulisan koneksi ke class Hub TimerHub. .................................................... 34 Kode Program 32. SignalR Persistent Connection Class (v2) – HelloWorld.cs. .......................... 35
viii
Kode Program 33. Class OWIN Startup pada Persistent – Startup.cs. ......................................... 35 Kode Program 34. Persistent – index.html. ...................................................................................... 36 Kode Program 35. Konfigurasi Hub pada OWIN Startup class. ................................................... 37 Kode Program 36. Konfigurasi Persistent Connection pada OWIN Startup class. .................... 37 Kode Program 37. Koneksi client ke server. .................................................................................... 37 Kode Program 38. Persistent Connection – Server – OnConnected. ............................................ 38 Kode Program 39. Persistent Connection – Client – received. ...................................................... 38 Kode Program 40. Persistent Connection – Client – tombol diklik. ............................................. 38 Kode Program 41. Persistent Connection – Server – OnReceived. ............................................... 38 Kode Program 42. Persistent Connection Class (v2) – ChatRoom.cs. .......................................... 39 Kode Program 43. Path koneksi untuk class ChatRoom. ............................................................... 39 Kode Program 44. OWIN Startup class pada persistent – Startup.cs. .......................................... 40 Kode Program 45. Persistent – chatroom.html. ............................................................................... 40 Kode Program 46. ClientWinForms – Form1.cs. ............................................................................. 46 Kode Program 47. Namespace Microsoft.AspNet.SignalR.Client. ............................................... 48 Kode Program 48. Instansiasi class dan interface. .......................................................................... 48 Kode Program 49. Koneksi ke Hub server. ...................................................................................... 49 Kode Program 50. Register method. ................................................................................................. 49 Kode Program 51. Method pada Hub sisi server. ........................................................................... 49 Kode Program 52. Method pada sisi client. ..................................................................................... 49 Kode Program 53. Register method dan data. ................................................................................. 49 Kode Program 54. Register method Show. ...................................................................................... 49 Kode Program 55. Method Show. ..................................................................................................... 49 Kode Program 56. ClientWinForms – Form1.cs yang telah diupdate. ......................................... 50 Kode Program 57. MainPage.xaml. ................................................................................................... 55 Kode Program 58. MainPage.xaml.cs. .............................................................................................. 56 Kode Program 59. Koneksi ke Hub sisi server. ............................................................................... 58 Kode Program 60. Mendaftarkan method client dan memulai proses koneksi ke Hub server. ........................................................................................................................................................ 58 Kode Program 61. Method client – Connected. ............................................................................... 58 Kode Program 62. Method client – Show. ........................................................................................ 59 Kode Program 63. Method client – Connected yang salah. ........................................................... 59 Kode Program 64. Baris jQuery.support sebelum diubah. ............................................................ 62 Kode Program 65. Baris jQuery.support setelah diubah. ............................................................... 63 Kode Program 66. default.html ......................................................................................................... 63
ix
Kode Program 67. Lokasi proxy yang digenerate otomatis. .......................................................... 66 Kode Program 68. Mendaftarkan fungsi hub client........................................................................ 67 Kode Program 69. Fungsi mengirim pesan chat. ............................................................................ 67 Kode Program 70. Kode aplikasi server. .......................................................................................... 70 Kode Program 71. Kode aplikasi client. ........................................................................................... 73 Kode Program 72. Koneksi ke server. ............................................................................................... 74 Kode Program 73. Kode server Hub. ................................................................................................ 87 Kode Program 74. Kode pada class Startup. .................................................................................... 87 Kode Program 75. Kode pada controller. ......................................................................................... 87 Kode Program 76. Kode pada view. ................................................................................................. 88 Kode Program 77. Menambahkan connection string pada file Startup ....................................... 89
x
Daftar Tabel Tabel 1. Kebutuhan transport web browser..................................................................................... 14 Tabel 2. Kebutuhan transport pada Windows Dekstop dan Silverlight. ..................................... 15 Tabel 3. Kebutuhan transport pada Windows Store dan Windows Phone. ................................ 15
xi
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 using using using using using
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) {
namespace SynchronousServer { class Program { // data masuk dari client. public static string data = null; public static void StartListening() { // data buffer untuk data masuk.
3
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) {
4
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.
5
Pada gambar 2 dapat dilihat pesan dikirimkan dan mendapat respon dari proses listener. Sedangkan pada proses listener dapat dilihat bagaimana pesan diterima, seperti pada gambar di bawah ini.
Gambar 3. Proses listener/server menerima pesan dari proses sender/client. Dari contoh di atas maka dapat dilihat bahwa komunikasi via socket memungkinkan pesan atau data dikirimkan antar proses yang terkoneksi pada jaringan. Berdasarkan skenario sederhana seperti pada contoh di atas maka dapat dikembangkan untuk banyak hal, sebagai contoh untuk aplikasi chatting, pengiriman notifikasi atau data penting secara real-time dan lain-lain. Pengiriman perubahan data secara real-time sering digunakan pada aplikasi penting seperti pada bursa saham, dimana data tidak diminta oleh client ke server, tapi justru sebaliknya yaitu server mengirimkan data kepada client jika terjadi perubahan pada data. Implementasi yang lain adalah pada game online, dimana antar pemain terkoneksi pada server game agar bisa saling berinterasi dengan pemain lain secara real-time, hal ini tentunya dapat memanfaatkan komunikasi dengan memanfaatkan socket.
Multicast Komunikasi multicast memungkinkan sebuah pesan dikirimkan dari sebuah proses dikirimkan kepada setiap anggota dari sebuah kelompok proses. Atau mengirimkan sebuah informasi kepada banyak penerima secara sekaligus dan sering dikenal dengan istilah broadcast. Sebagai contoh adalah mengirimkan pesan dari 1 komputer ke seluruh komputer yang berada dalam 1 jaringan. Untuk melihat cara kerja komunikasi multicast dapat dengan mencoba kode program berikut ini. Seperti halnya pembahasan komunikasi socket di atas, komunikasi ini juga masih memanfaatkan socket dan contoh ini terdiri atas dua program yaitu listener dan sender. Berikut ini adalah kode program listener.
Kode Program 3. Multicast listener. using using using using using using using
namespace MulticastListener { class Program { static void Main(string[] args)
6
{ UdpClient client = new UdpClient(); client.ExclusiveAddressUse = false; IPEndPoint localEp = new IPEndPoint(IPAddress.Any, 2222); client.Client.SetSocketOption(SocketOptionLevel.Socket, SocketOptionName.ReuseAddress, true); client.ExclusiveAddressUse = false; client.Client.Bind(localEp); IPAddress multicastaddress = IPAddress.Parse("239.0.0.222"); client.JoinMulticastGroup(multicastaddress); Console.WriteLine("Listening this will never quit so you will need to ctrl-c it"); while (true) { Byte[] data = client.Receive(ref localEp); string strData = Encoding.Unicode.GetString(data); Console.WriteLine(strData); } } } }
Sedangkan berikut ini adalah kode program proses sender.
Kode Program 4. Multicast sender. using using using using using using using
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);
7
} 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();
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.
9
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);
10
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.
11
Gambar 9. Memanggil method pada server dari client. SignalR menangani pengelolaan koneksi secara otomatis dan terdapat kemampuan untuk melakukan broadcast pesan secara simultan ke seluruh client yang telah terkoneksi ke server. SignalR membuat koneksi antara client dan server terjadi secara persitent tidak seperti yang terjadi pada koneksi HTTP pada umumnya. Aplikasi yang menggunakan SignalR dapat menangani ribuan client menggunakan Service Bus, SQL Server atau Redis. Dan bagi SignalR adalah open-source, jadi bagi yang memiliki waktu untuk melihat kodenya dapat diakses alamat ini https://github.com/signalr.
SignalR dan WebSocket SignalR berkomunikasi dengan memanfaatkan transport WebSocket jika tersedia, tetapi jika transport tersebut belum tersedia maka komunikasi masih bisa dilakukan dengan transport lainnya yang tersedia. Artinya developer yang menggunakan SignalR tidak perlu khawatir akan transport yang digunakan untuk membuat fungsi web real-time. Developer juga tidak perlu khawatir akan perubahan karena perkembangan teknologi WebSocket dan transport lainnya karena SignalR akan dikembangkan secara berkesinambungan mengikuti perkembangan teknologi yang ada. WebSocket adalah transport ideal untuk SignalR karena efisien dalam penggunaan memory server dan latency terendah. Implementasi SignalR membutuhkan lingkungan server yang menggunakan Windows Sever 2012 atau Windows 8 dan .NET Framework 4.5. Jika kebutuhan ini tidak bisa dipenuhi maka SignalR akan menggunakan transport lain untuk melakukan koneksi.
Transport dan Fallback Transport yang digunakan oleh SignalR adalah : 1.
2.
Transport HTML 5. Pada jenis transport ini terdapat dua transport yang dapat digunakan yaitu : - WebSocket, transport ini telah didukung oleh versi terbaru dari Internet Explorer, Google Chrome, Mozilla Firefox dan pada web browser Safari dan Opera hanya sebagian implementasi saja yang dilakukan. Artinya tidak seluruh kemampuan dari transport WebSocket didukung pada Safar dan Operai. - Server Sent Events juga dikenal dengan istilah EventSource telah didukung oleh seluruh web browser kecuali Internet Explorer. Transport Coment. 12
Berikut ini aalah transport yang digunakan pada jenis ini, yaitu : - Forever Frame, transport ini hanya dapat digunakan pada Internet Explorer. - Ajax long polling.
Model Komunikasi Model komunikasi yang digunakan pada SignalR API adalah : 1.
2.
Persistent Connection. Persistent Connection API memungkinkan developer untuk mengakses secara langsung protokol komunikasi low level. Hub. Model ini adalah high-level pipeline. Cara kerja model ini, ketika kode server-side memamnggil method pada client, sebuah paket dikirim lewat tranport yang aktif. Paket ini berisi nama dan parameter method tersebut dengan format JSON. Ketika client berhasil mencocokkan nama method tersebut dengan yang ada di client maka client akan mengeksekusi method tersebut dengan menggunakan nilai parameter yang telah dideselisasi.
Gambar 10. Diagram arsitektur SignalR. Pada diagram arsitektur di atas dapat dilihat penjelasan secara terstruktur dari SignalR API.
Platform Pada bagian ini akan diinformasikan platform yang mendukung ASP.NET SignalR.
Kebutuhan Server Sistem operasi server yang dapat digunakan adalah : 1. 2.
Windows Server 2012. Windows Server 2008 r2. 13
3. 4. 5.
Windows 8. Windows 7. Windows Azure.
Versi .NET Framework yang mendukung SignalR 2 adalah .NET Framework 4.5. Web server yang dapat digunakan adalah : 1. 2. 3. 4.
IIS 8 atau IIS 8 Express. IIS 7 dan 7.5 IIS harus dijalankan pada mode integrated. Mode classic tidak didukung. Aplikasi hosting harus berjalan pada mode full trust.
Kebutuhan Client Web browser yang menggunakan SignalR setidaknya dapat menggunakan jQuery 1.6.4 atau versi major diatasnya seperti versi 1.7.2, versi 1.8.2 atau versi 1.9.1. Web browser yang dapat digunakan adalah : 1. 2. 3. 4. 5. 6.
Microsoft Internet Explorer versi 8, 9, 10 dan 11. Mendukung versi modern, desktop, dan mobile. Mozilla Firefox: versi sekarang - 1, versi Windows dan Mac. Google Chrome: versi sekarang - 1, versi Windows dan Mac. Safari: versi sekarang - 1, versi Mac dan iOS. Opera: versi sekarang - 1, hanya untuk versi Windows. Android browser.
Tabel 1. Kebutuhan transport web browser.
Aplikasi Desktop dan Silverlight SignalR juga dapat ditanamkan pada aplikasi standalone Window client atau Silverlight dengan kebutuhan sistem sebagai berikut : 1. 2.
Aplikasi dibangun menggunakan .NET Framework 4 pada Windows XP SP3 atau diatasnya. Aplikasi dibangun menggunakan .NET Framework 4.5 pada Windows Vista atau diatasnya.
14
Tabel 2. Kebutuhan transport pada Windows Dekstop dan Silverlight.
Aplikasi Windows Store dan Windows Phone SignalR dapat digunakan pada aplikasi Windows Store dan Windows Phone 8. Berikut ini adalah transport yang didukung pada platform ini.
Tabel 3. Kebutuhan transport pada Windows Store dan Windows Phone.
Lingkungan Pengembangan Seperti yang telah disebutkan pada bagian sebelumnya bahwa lingkungan pengembangan ASP.NET SignalR yang diajurkan adalah menggunakan Windows 2012 atau Windows 8 dan .NET Framework 4.5. Berikut ini adalah lingkungan pengembangan yang digunakan untuk menulis ebook ini : 1. 2. 3. 4.
Windows 8.1 Pro 64-bit. .NET Framework 4.5.1. Visual Studio 2013 SP 4. SQL Server 2012 Express Edition.
16
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.
17
Nama project ini adalah HelloSignalR yang dapat ditulis pada kolom Name, kemudian klik tombol OK. Pada window New ASP.NET Project pilih Empty kemudian klik tombol OK.
Gambar 13. Window New ASP.NET Project. Maka dapat dilihat tambahan project pada solution seperti yang dilihat pada gambar berikut ini.
Gambar 14. Project web HelloSignalR. Selanjutnya klik kanan pada project HelloSignalR dan pilih Add > New Item. Pada window Add New Item pilih Web > SignalR Hub Class (v2). Pada kolom name isi nilai HelloWorld.cs sebagai nama class. Kemudian klik tombol Add.
18
Gambar 15. Menambah SignalR Hub Class (v2). Maka pada project HelloSignalR pada area Solution tambahan file class HelloHub.cs seperti berikut ini.
Gambar 16. Class HelloHub.cs. Berikut ini adalah isi dari file HelloHub.cs.
Kode Program 8. SignalR Hub Class (v2) - HelloWorld.cs. using using using using using
namespace HelloSignalR { public class HelloWorld : Hub {
19
public void Hello() { Clients.All.hello(); } } }
Selain menambahkan file class tersebut juga ditambahkan folder Scripts yang berisi file-file kode Javascript yang dapat dilihat pada gambar di bawah ini.
Gambar 17. File-file Javascript. File-file Javascript tersebut ditambahkan karena dibutuhkan untuk mendukung implementasi ASP.NET SignalR 2 pada aplikasi. Selain tambahan file-file Javascript tersebut, pada project juga ditambahkan beberapa namespace yang dapat dilihat pada gambar berikut ini.
Gambar 18. Namespace untuk mendukung implementasi SignalR.
Dari gambar di atas dapat dilihat beberapa namespace penting seperti :
Selanjutnya adalah menambahkan class OWIN Startup dengan cara klik kanan pada project kemudian pilih Add > New Item. Kemudian pilih Web dan pilih OWIN Startup class. Pada kolom Name isi dengan nilai Startup.cs. Kemudian klik tombol Add.
Gambar 19. Menambahkan class OWIN Startup. Berikut ini adalah isi dari file Startup.cs.
Kode Program 9. Class OWIN Startup pada Hub – Startup.cs. using using using using
[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 } } }
21
Menulis Kode Program Setelah persiapan project di atas telah selesai dilakukan maka selanjutnya dilakukan modifikasi kode class-class yang telah ada. Berikutnya adalah melakukan modifikasi class Startup.cs.
Kode Program 10. Class OWIN Startup pada Hub – Startup.cs - modifikasi. using using using using
[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.
22
Gambar 21. Membuat file index.html sebagai start page. Kemudian ubah isi file index.html menjadi seperti berikut ini.
Kode Program 11. Hub - index.html. Hello World! with SignalR <script src="./Scripts/jquery-1.10.2.min.js"> <script src="./Scripts/jquery.signalR-2.1.2.min.js"> <script src="./signalr/hubs" type="text/javascript"> <script type="text/javascript"> $(document).ready(function () { var hub = $.connection.helloWorld; hub.client.hello = function () { $('#AddText').append('Hello World! '); } $.connection.hub.start().done(function () { $('#SubmitButton').click(function () { hub.server.hello(); }); }); });
23
Uji Coba Setelah melakukan pembuatan kode di atas maka selanjutnya aplikasi web yang telah ditulis di atas diuji coba. Untuk menguji aplikasi di atas akan digunakan beberapa window web browser yang akan dijalan sekaligus. Pada uji coba ini akan digunakan dua jenis web browser yaitu Internet Explorer dan Mozilla Firefox. Langkah pertama yang dilakukan untuk uji coba ini adalah mengeksekusi project ini dengan cara klik kanan pada project kemudian pilih Debug > Start new instance. Maka akan dapat dilihat web browser Internet Explorer seperti berikut ini.
Gambar 22. HelloWorld di Internet Explorer. Dengan alamat yang didapat dari address bar di atas maka bisa digunakan untuk dijalankan pada window web browser lainnya.
24
Gambar 23. Uji coba dengan 4 window web browser. Pada gambar di atas dapat dilihat digunakan 4 window web browser, 2 window pada sisi sebelah kiri adalah Internet Explorer, sedangkan 2 window di sisi kanan adalah Mozilla Firefox. Selanjutnya adalah mencoba untuk mengklik tombol Say Hello pada salah satu window yang ada untuk membuktikan bahwa pesan “Hello World!” akan dikirimkan ke seluruh window.
Gambar 24. Pengujian pengiriman pesan ke seluruh client. Dari hasil uji coba tersebut jika tombol pada salah satu window diklik maka tulisan “Hallo World!” akan ditampilkan pada seluruh web browser.
25
Penjelasan Pada contoh di atas digunakan model komunikasi Hub. Oleh sebab itu pada project ditambahkan class Hub dengan nama HelloWorld. Karakteristik high level dari Hub membuat developer sangat dimudahkan. Terbukti pada pada contoh di atas tidak perlu menulis baris kode yang rumit. Seperti halnya penjelasan pada komunikasi socket di bagian sebelumnya dimana komunikasi bisa terjadi dikarenakan pada proses listener dan proses sender terdapat “sesuatu” yang dapat membuat kedua proses tersebut berkomunikasi secara aktif. “Sesuatu” yang dimaksud itu adalah socket. Pada contoh di atas dapat dilihat ada “sesuatu” yang ditambahkan pada sisi server dan sisi client. “Sesuatu” yang ditambahkan pada sisi server adalah dengan menambahkan class Hub dengan nama file HelloWorld.cs yang diikuti dengan penambahan beberapa namespace yang berfungsi untuk mendukung Hub. Sedangkan pada sisi client dapat dilihat penambahan file-file pada folder Scripts yang berisi file Javascript yang merupakan library jQuery dan SignalR yang berfungsi untuk membuat “sesuatu” pada sisi client. Ada beberapa hal yang perlu diperhatikan pada kode-kode program yang telah ditulis diatas agar mengerti bagaimana cara kerja baris kode yang telah ditulis. Pada kode program 8 di atas dapat dilihat kode dari class Hub dengan nama HelloWorld yang didalamnya terdapat method dengan nama Hello dengan isi sebagai berikut :
Kode Program 12. SignalR Hub Class (v2) – HelloWorld – Method Hello. public void Hello() { 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 src="./Scripts/jquery.signalR-2.1.2.min.js">
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">
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 () {
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! '); }
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).
Menulis Kode Program Seperti yang dilihat dari kode program 8 dapat dilihat bahwa class HelloWorld merupakan turunan dari class Hub, hal itu memungkinkan class anak memiliki kemampuan dari induknya seperti method atau property. Selain itu juga memungkinkan class anak ini memodifikasi kemampuan yang dimiliki induknya seperti melakukan override method yang dimiliki induknya. Jika diperhatikan pada class induk terdapat method yang dapat dilakukan override seperti yang terlihat pada gambar di bawah ini, method yang berfungsi untuk menangani event yang terjadi.
Gambar 25. Daftar method event handler.
Dari daftar di atas dapat dilihat ada method yang berfungsi sebagai event handler seperti : 1. 2.
OnConnected, dieksekusi jika client terkoneksi ke server. OnDisconnected, dieksekusi jika client terputus koneksinya. 27
3.
OnReconnected, dieksekusi jika client melakan koneksi ulang.
Pada class Hub HelloWorld ini akan ditambahkan override method OnConnected dan menambahkan method Send sebagai salah satu fungsi pada aplikasi ChatRoom ini. Berikut ini adalah isi file class Hub HelloWorld yang telah dimodifikasi.
Kode Program 17. SignalR Hub Class (v2) - HelloWorld.cs – ChatRoom. using using using using using using
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.
Selanjutnya akan dilakukan konesi ke hub di server, dan jika koneksi berhasil dilakukan maka server akan mengirimkan pesan ke seluruh client untuk memberikan informasi bahwa ada user baru yang bergabung ke chatroom. Berikut ini adalah kode untuk melakukan koneksi ke hub di server. 29
Kode Program 21. Koneksi ke Hub di server. 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.
30
Gambar 28. Uji coba chatroom. Cara kerja dari tombol Send di atas adalah ketika tombol Send diklik maka akan dieksekusi baris kode berikut ini.
Kode Program 24. Fungsi ketika tombol Send diklik. $.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 31
client akan dipanggil dan dieksekusi. Berikut ini adalah isi dari fungsi show yang ada di kode di sisi client.
Kode Program 27. Fungsi show di sisi client. hub.client.show = function (user, pesan) { $('#AddText').append('<strong> ' + user + ' : ' + pesan + ' '); }
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.
Menulis Kode Program Oleh karena itu pada bagian ini akan dibuat sebuah class Hub yang sangat sederhana seperti berikut ini.
Kode Program 28. SignalR Hub Class (v2) – TimerHub.cs using using using using using using
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. Timer <script src="./Scripts/jquery-1.10.2.min.js"> <script src="./Scripts/jquery.signalR-2.1.2.min.js"> <script src="./signalr/hubs" type="text/javascript"> <script type="text/javascript">
Dari kode di atas dapat dilihat begitu koneksi berhasil maka client akan memanggil method Knock di server, kemudian di dalam method Knock di server terlihat ada pemanggilan fungsi doknock yang ada pada client.
Uji Coba Di bawah ini dapat dilihat hasil dari halaman timer.html, terlihat pada halaman tersebut pesan ditampilkan setiap 5 detik.
Gambar 29. Uji coba timer.html.
Penjelasan Dari uji coba di atas dapat dilihat untuk menambahkan SignalR Hub Class (v2) dapat dilakukan begitu saja, tanpa harus melakukan penambahan kode apapun di class OWIN Startup Class. Hal ini nanti akan bisa dibandingkan pada pembahasan saat menggunakan SignalR Persistent Class (v2) pada bagian selanjutnya. Hal lain yang perlu diperhatikan adalah cara penulisan class Hub pada client untuk melakukan koneksi. Pada bagian Hello World dan Chat Room digunakan class Hub dengan nama HelloWorld sehingga cara penulisan di sisi client adalah sebagai berikut :
33
Kode Program 30. Penulisan koneksi ke class Hub HelloWorld. $.connection.helloWorld;
Sedangkan pada bagian ini digunakan class Hub dengan nama TimerHub maka dapat dilihat cara penulisan pada client seperti berikut :
Kode Program 31. Penulisan koneksi ke class Hub TimerHub. $.connection.timerHub;
Dari kedua contoh tersebut dapat dilihat polanya bahwa huruf awal dari class Hub mesti ditulis menjadi huruf kecil ketika ditulis pada kode client, selebihnya besar kecil huruf yang ditulis mengikuti yang ditulis pada class Hub server.
Pada bagian berikut ini akan dipaparkan tahap-tahap implementasi ASP.NET SignalR 2 pada aplikasi web dengan menggunakan model komunikasi Persistent.
Hello World Membuat Project Untuk mencoba model komunikasi ini dibuat project dengan nama HelloPersistent dengan cara yang sama seperti yang telah dilakukan pada bagian sebelumnya. langkah selanjutnya adalah membuat SignalR Persistent Connection Class (v2) dengan nama HelloWorld. Berikut adalah kode dari class ini.
Kode Program 32. SignalR Persistent Connection Class (v2) – HelloWorld.cs. using using using using using using
[assembly: OwinStartup(typeof(HelloPersistent.Startup))] namespace HelloPersistent { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR("/echo"); } } }
Menulis Kode Program Berikut ini adalah kode untuk implementasi Persistent Connection pada client yang dibuat pada file index.html.
Kode Program 34. Persistent – index.html. Hello World! with SignalR <script src="./Scripts/jquery-1.10.2.min.js"> <script src="./Scripts/jquery.signalR-2.1.2.min.js"> <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"); }); }); });
Uji Coba Seperti halnya uji coba yang dilakukan pada bahasan Hello World pada bagian Hub Connection, hasil yang didapat pada kode di atas tidak berbeda jauh. Secara tampilan dapat dilihat pada gambar di bawah ini.
36
Gambar 30. Uji coba implementasi Persistent Connection.
Penjelasan Jika diperhatikan terdapat beberapa perbedaan jika dibandingkan dengan implmentasi Hub. Perbedaan pertama adalah pada isi SignalR Persistent Connection Class (v2) dengan nama HelloWorld. Jika diperhatikan pada class ini semua method yang ditulis adalah hasil dari override method yang dimiliki oleh class induk. Tidak ada method baru yang dapat ditulis oleh developer. Berbeda dengan SignalR Hub Class (v2) yang didalamnya dapat ditambahkan method baru untuk digunakan melakukan komunikasi dengan client. Selain itu tidak dimungkinkan untuk memanggil method baru tersebut di kode client karena tidak tersedianya method tersebut, hal ini dikarenakan tidak ada script dinamik berisi method tersebut yang digenerate oleh server seperti pada implementasi Hub. Konfigurasi yang dilakukan pada OWIN Startup class juga mengalami perbedaan. Pada implementasi Hub, konfigurasi yang dilakukan adalah seperti berikut :
Kode Program 35. Konfigurasi Hub pada OWIN Startup class. app.MapSignalR();
Sedangkan pada untuk implementasi Persistent Connection, konfigurasi yang dilakukan pada OWIN Startup class adalah seperti berikut ini :
Kode Program 36. Konfigurasi Persistent Connection pada OWIN Startup class. app.MapSignalR("/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');
37
Setelah client melakukan koneksi ke server maka akan sisi server dapat mengetahui ada client yang melakuan koneksi dan akan mengeksekusi method event handler berikut ini.
Kode Program 38. Persistent Connection – Server – OnConnected. protected override Task OnConnected(IRequest request, string connectionId) { return Connection.Send(connectionId, "Hello World! on " + DateTime.Now.ToString() + " "); }
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() + " "); }
Pada kode di atas dapat dilihat akan dijalankan method Broadcast untuk mengirimkan pesan ke seluruh client yang terkoneksi dan pesan yang diterima client akan ditangani oleh fungsi pada kode program 39. Dari penjelasan ini dapat dilhat baik pada client dan server hanya digunakan fungsi atau method yang telah disediakan oleh SignalR, tidak ada method tambahan dari developer yang digunakan pada kode di atas. Seperti yang telah disebutkan pada bagian Model Komunikasi tentang perbedaan Hub dan Persistent Connection yang menyatakan bahwa Hub merupakan model komunikasi high level sedangkan Persistent Connection adalah model komunikasi low
38
level. Sehingga pada Persistent Connection tidak terdapat kemudahan seperti yang tersedia pada Hub.
Chat Room Pada akan dibuat halaman chat room dengan memanfaatkan Persistent Connection. Terdapat fitur-fitur yang sedikit berbeda dengan chat room yang telah dibuat sebelumnya pada bagian Hub.
Menulis Kode Program Berbeda dengan Hub yang dapat menambahkan method pada class Hub sehingga sebuah class Hub dapat digunakan untuk berbagai keperluan, maka karena pada class Persistent Connection hanya memanfaatkan method dan fungsi yang telah disediakan menyebabnya jika ada kebutuhan yang berbeda perlu dilakukan penambahan class Persistent Connection yang baru. Berikut ini adalah kode class Persistent Connection untuk keperluan pembuatan chat room ini.
Kode Program 42. Persistent Connection Class (v2) – ChatRoom.cs. using using using using using using
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("/chat");
Sehingga jika kode client akan melakukan koneksi ke server akan digunakan baris kode berikut ini : var persistent = $.connection('/chat');
41
Jika dibandingkan dengan yang pernah dikerjakan pada bagian Hub, dapat dilihat ada perbedaan dalam menangani pengelolaan class koneksi di sisi server pada OWIN Startup class. Begitu juga untuk melakukan koneksi dari sisi client ke server terlihat ada perbedaan.
Pada bagian ini akan akan dijelaskan bagaimana membuat aplikasi real-time dengan memanfaatkan model komunikasi Hub pada server dan menggunakan platform Windows Form sebagai client.
Membuat Project Tahap pertama yang dilakukan adalah membuat project. Untuk itu klik kanan pada solution kemudian pilih Add > New Project. Kemudian pilih bahasa yang digunakan C# > Windows Desktop > Windows Forms Application.
Gambar 33. Window Add New Project – ClientWinForms. Isi ClientWinForms pada kolom Name kemudian klik tombol OK. Selanjutnya adalah menambahkan package Microsoft ASP.NET SignalR .NET Client pada project ini dengan cara klik kanan pada project kemudian pilih Manage Nuget Packages.
43
Gambar 34. ClientWinForms - Manage NuGet Packages – Microsoft ASP.NET SignalR .NET Client. Untuk mendapatkan daftar seperti di atas, ketikkan kata kunci signalr pada kolom pencarian yang ada pada sebelah kanan atas. Kemudian klik Microsoft ASP.NET SignalR .NET Client kemudian klik tombol Install. Maka akan dilakukan proses download paket tersebut dan setelah selesai maka akan dilakukan proses installasi paket tersebut. Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.
Gambar 35. Daftar reference project ClientWinForms.
44
Pada gambar di atas dapat dilihat terdapat namespace Microsoft.AspNet.SignalR.Client yang didalamnya terdapat class-class yang dapat dipergunakan untuk melakukan koneksi ke server.
Menulis Kode Program Langkah selanjutnya adalah menulis kode program untuk membuat client aplikasi chat realtime pada Windows Forms. Aplikasi client ini akan melakukan koneksi ke class Hub pada sisi server yang telah dibuat sebelumnya.
Gambar 36. Windows Forms – Chat Room. Pada form di atas hanya dilakukan perubahan pada Size menjadi 600x400 dan perubahan pada property Text menjadi Chat Room. Selanjutnya akan dibuat antarmuka form menjadi seperti berikut ini.
Gambar 37. Form Chat Room.
45
Kemudian akan ditambahkan beberapa kode pada form ini dan kode untuk menangani aksi ketika tombol Send diklik.
Kode Program 46. ClientWinForms – Form1.cs. using using using using using using using using using
using Microsoft.AspNet.SignalR.Client; namespace ClientWinForms { public partial class Form1 : Form { HubConnection hubConnection; IHubProxy hubProxy; public Form1() { InitializeComponent(); hubConnection = new HubConnection("http://localhost:30526/signalr/hubs"); hubProxy = hubConnection.CreateHubProxy("HelloWorld"); hubProxy.On("connected", Connected); hubProxy.On<string, string>("show", (user, pesan) => MessageBox.Show(user + " : " + pesan)); hubConnection.Start().Wait(); } private void Connected() { MessageBox.Show("User baru bergabung."); } private void buttonSend_Click(object sender, EventArgs e) { hubProxy.Invoke("Send", "winform user", textBox1.Text).Wait(); } } }
Uji Coba Untuk uji coba dilakukan dengan menjalankan server terlebih dahulu. Kemudian menjalankan client halaman chatroom.html. Kemudian menjalankan aplikasi client Windows Forms ini.
46
Gambar 38. Uji coba aplikasi Windows Forms. Pada gambar di atas dapat dilihat halaman chatroom.html saat pertama kali dijalankan, dimana ditampilkan window alert dengan pesan “User baru bergabung”. Begitu juga pada aplikasi Windows Form saat pertama kali dijalankan ditampilkan window dengan pesan yang sama, yang menandakan aplikasi ini telah terkoneksi ke Hub di server. Selanjutnya akan dikirimkan pesan dari client Windows Forms maka akan dapat dilihat hasilnya seperti berikut ini.
Gambar 39. Pesan dikirim dari aplikasi Windows Forms. Dapat dilihat pesan yang dikirimkan dari aplikasi Windows Forms berhasil mengirimkan pesan secara broadcast. 47
Begitu pula jika pesan dikirimkan oleh client halaman web, dapat dilihat pesan juga diterima oleh aplikasi ini.
Gambar 40. Pesan dikirim dari halaman web. Pesan yang diterima pada aplikasi Windows Forms dengan menggunakan kode di atas masih menggunakan MessageBox sehingga pesan belum ditampilkan seperti pada halaman web.
Penjelasan Berikut ini adalah penjelasan dari kode program 46. Langkah pertama adalah mendaftarkan namespace berikut ini.
Kode Program 47. Namespace Microsoft.AspNet.SignalR.Client. 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. 2.
Class HubConnection berisi fungsi-fungsi yang dapat digunakan untuk melakukan komunikasi ke server. Interface IhubProxy berfungsi untuk menangani sisi client, sebagai contoh untuk menangani pendaftaran method pada sisi client yang dapat dipanggil oleh server.
Selanjutnya adalah kode berikut ini. Kedua baris di bawah ini berfungsi untuk melakukan koneksi ke Hub pada sisi server.
48
Kode Program 49. Koneksi ke Hub server. hubConnection = new HubConnection("http://localhost:30526/signalr/hubs"); 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); }
49
Kode berikut ini merupakan update dari kode sebelumnya dimana pada update ini pesan akan ditampilkan pada ListBox. Berikut adalah kode yang telah diupdate.
Kode Program 56. ClientWinForms – Form1.cs yang telah diupdate. using using using using using using using using using
Pada bagian ini akan akan dijelaskan bagaimana membuat aplikasi real-time dengan memanfaatkan model komunikasi Hub pada server dan menggunakan platform Windows Phone sebagai client.
Membuat Project Untuk menambahkan project dapat dilakukan seperti cara yang sebelumnya telah dilakukan yaitu klik kanan pada Solution kemudian pilih Add > New Project. Kemudian pilh bahasa yang digunakan Visual C# > Store Apps > Windows Phone Apps.
Gambar 42. Window Add New Project – ClientWinPhone. Pada template pilih Blank App (Windows Phone Silverlight) kemudian isi ClientWinPhone pada kolom Name dan selanjutnya klik tombol OK. Pada window selanjutnya pilih versi OS yang digunakan yaitu Windows Phone 8.1, kemudian klik tombol OK.
52
Gambar 43. Versi Windows Phone OS yang digunakan. Dan hasilnya dapat dilihat terdapat project berikut ini pada solution.
Gambar 44. Project ClientWinPhone pada solution. Langkah selanjutnya adalah menambahkan package Microsoft ASP.NET SignalR .NET Client pada project ini dengan cara klik kanan pada project ini kemudian pilih Manage NuGet Packages.
53
Gambar 45. ClientWinPhone - Manage NuGet Packages – Microsoft ASP.NET SignalR .NET Client. Untuk mendapatkan daftar seperti di atas, ketikkan kata kunci signalr pada kolom pencarian yang ada pada sebelah kanan atas. Kemudian klik Microsoft ASP.NET SignalR .NET Client kemudian klik tombol Install. Maka akan dilakukan proses download paket tersebut dan setelah selesai maka akan dilakukan proses installasi paket tersebut. Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.
Gambar 46. Namespace Microsoft.AspNet.SignalR.Client pada project ClientWinPhone.
54
Menulis Kode Program Langkah selanjutnya adalah menulis kode program untuk membuat aplikasi mobile chat realtime. Untuk antarmuka aplikasi ini dibuat seperti pada gambar berikut ini.
Gambar 47. Antarmuka aplikasi mobile chat real-time. Untuk membuat antarmuka seperti itu digunakan kode berikut ini.
Kode Program 57. MainPage.xaml. <shell:ApplicationBar> <shell:ApplicationBarIconButton x:Name="ApplicationBarIconButton_Send"
using Microsoft.AspNet.SignalR.Client; using System.Threading.Tasks; namespace ClientWinPhone { public partial class MainPage : PhoneApplicationPage { HubConnection hubConnection;
Uji Coba Uji coba client ini diuji bersama dengan dua platform client lainnya yaitu web dan Windows Forms. Dapat dilihat pada gambar di bawah pesan yang dikirimkan salah satu client dapat ditampilkan pada semua client. Pada uji coba ini terlihat respon pada client Windows Phone lebih lama waktu tundanya sampai pesan ditampilkan.
57
Gambar 48. Uji coba client Windows Phone.
Penjelasan Berikut ini adalah penjelasan dari kode yang telah dibuat di atas. Kode program 58 memiliki kemiripan dengan kode client Windows Forms yang dapat dilihat pada kode program 46. Untuk melakukan koneksi ke Hub di server dilakukan dengan kode di bawah ini.
Kode Program 59. Koneksi ke Hub sisi server. hubConnection = new HubConnection("http://localhost:30526/signalr/hubs"); 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() {
58
this.Dispatcher.BeginInvoke(() => MessageBox.Show("User baru bergabung.")); }
Method di atas akan dipanggil Hub sisi server saat ada client yang melakukan koneksi. Dan kode berikut ini akan dipanggil Hub sisi server untuk menampilkan pesan yang dikirim oleh client.
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.
Client Windows App Pada bagian ini akan diberikan contoh membuat aplikasi client pada platform Windows App dengan menggunakan bahasa pemrograman Javascript. Seperti yang telah diketahui pada platform ini dapat dibangun aplikasi dengan bahasa C# dan VB.NET selain Javascript.
Membuat Project Langkah pertama untuk membuat project ini adalah dengan klik kanan pada solution kemudian pilih Add > New Project. Kemudian pilih bahasa Javascript > Store Apps > Windows App > Blank App (Windows). Kemudian pada kolom nama isi dengan ClientWinApp. Selanjutnya klik tombol OK.
Gambar 49. Add New Project – Windows Apps Langkah selanjutnya adalah menambahkan package SignalR client pada project ini dengan cara klik kanan pada project kemudian klik Manage NuGet Packages. Pada kolom pencarian di pojok kanan atas masukkan kata kunci signalr maka akan didapat daftar seperti pada gambar di bawah ini. Berbeda dengan kedua project sebelumnya yang memilih Microsoft ASP.NET SignalR .NET Client, pada project ini dipilih package Microsoft ASP.NET SignalR Javascript Client. Kemudian klik tombol Install.
60
Gambar 50. Manage NuGet Package – Microsoft ASP.NET SignalR Javascript Client.
Setelah proses download dan installasi package tersebut selesai maka dapat dilihat pada project ini terdapat folder Scripts yang berisi file yang berisi file-file Javascript untuk implementasi SignalR client.
Gambar 51. Script SignalR client.
61
Langkah selanjutnya adalah membuat project ini menjadi Startup Project dengan cara klik kanan pada project ini kemudian pilih Set as Startup Project. Hasilnya dapat dilihat pada bagian tool bar.
Gambar 52. Pilihan untuk menjalankan Windows App.
Menulis Kode Program 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 '
a'. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
Walaupun peringatan tersebut tetap dapat membuat kode program yang berhubungan dengan SignalR pada client tetap berjalan dengan baik. Tetapi jika ingin menghilangkan peringatan tersebut maka perlu ada perubahan pada file script jQuery yang digunakan pada bagian berikut ini.
Kode Program 64. Baris jQuery.support sebelum diubah. jQuery.support = (function( support ) { var div = document.createElement( "div" ), documentElement = document.documentElement, all, a, select, opt, input, marginDiv, support, fragment,
62
body, testElementParent, testElement, testElementStyle, tds, events, eventName, i, isSupported; ... dan seterusnya ... return support; })({});
Maka kode di atas dapat diubah menjadi seperti berikut ini, perubahannya dapat dilihat pada bagian awal dan akhir baris.
Kode Program 65. Baris jQuery.support setelah diubah. jQuery.support = MSApp.execUnsafeLocalFunction(function () { var div = document.createElement( "div" ), documentElement = document.documentElement, all, a, select, opt, input, marginDiv, support, fragment, body, testElementParent, testElement, testElementStyle, tds, events, eventName, i, isSupported; ... dan seterusnya ... return support; });
Selanjutnya adalah menulis kode program client SignalR dengan kode Javascript seperti berikut ini.
Kode Program 66. default.html <meta charset="utf-8" /> ClientWinApp <script src="//Microsoft.WinJS.2.0/js/base.js"> <script src="//Microsoft.WinJS.2.0/js/ui.js">
63
<script src="/js/default.js"> <script src="/Scripts/jquery-1.6.4.js"> <script src="/Scripts/jquery.signalR-2.1.2.min.js"> <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 + ' : ' + pesan + ' '); 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'); }); });
Uji Coba Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada local mechine dengan cara mengklik tombol ini. 64
Gambar 54. Pilihan menjalankan Windows App pada Local Machine. Tapi pada uji coba ini aplikasi yang dibuat akan menggunakan Simulator maka pilihan untuk menjalankan Windows App tersebut diganti menjadi seperti berikut.
Gambar 55. Pilihan menjalankan Windows App pada Simulator. Setelah pilihan diubah, selanjutnya klik tombol berupa segitiga berwarna hijau tersebut. Makan akan ditampilkan simulator seperti berikut ini.
Gambar 56. Aplikasi client Windows App dijalankan. Dari gambar dapat dilihat message box yang menyatakan aplikasi terkoneksi pada server. Setelah tombol Close pada message box diklik maka aplikasi ini siap digunakan untuk melakukan chat.
Gambar 57. Aplikasi chat pada halaman web chatroom.html.
65
Gambar 58. Aplikasi chat Windows App.
Penjelasan Pada kode Javascript yang digunakan di atas ada beberapa perbedaan jika dibandingkan dengan kode Javascript yang digunakan pada bagian Hub sub bahasan tentang Chat Room. Pada bahasan sebelumnya kode ditulis dengan memanfaatkan kode proxy digenerate sehingga memudahkan untuk memanfaaatkan pembuatan fungsi hub pada client dan kemudahan untuk mengakses hub pada server. Pada kode program 66 di atas dapat dilihat kode untuk melakukan koneksi ke Hub server tanpa ada bantuan proxy yang digenerate secara otomatis, hal ini bisa diidentifikasi dengan tidak adanya baris kode berikut ini.
Kode Program 67. Lokasi proxy yang digenerate otomatis. <script src="./signalr/hubs" type="text/javascript">
Karena proxy tidak digenerate secara otomatis maka cara penulisan kode mempunyai kemiripan dengan yang dibahas pada bagian Client Windows Forms dan Client Windows Phone. Untuk melakukan koneksi ke server dilakukan dengan kode berikut ini. var connection = $.hubConnection('http://localhost:30526/signalr/hubs'); var hubProxy = connection.createHubProxy('helloWorld');
Selanjutnya untuk memulai koneksi dapat dilakukan dengan kode berikut ini. connection.start() .done(function () { . . . console.log('Terkoneksi, connection ID=' + connection.id); }) .fail(function () { console.log('Koneksi tidak dapat dilakukan'); });
66
Pada kode di atas dapat dilihat kode tambahan yang memanggil fungsi console.log, fungsi itu bertujuan untuk mengeluarkan output pada Javascript console pada Visual Studio.
Gambar 59. Javascript console. Selanjutnya untuk mendaftarkan fungsi hub pada client agar bisa dipanggil oleh method hub pada server dapat dilakukan dengan menulis kode seperti berikut ini.
Kode Program 68. Mendaftarkan fungsi hub client. hubProxy.on('connected', function (user, pesan) { var msg = new Windows.UI.Popups.MessageDialog("User baru bergabung.", "SignalR"); msg.showAsync(); console.log('User baru bergabung.'); }); hubProxy.on('show', function (user, pesan) { $('#AddText').append('<strong> ' + user + ' : ' + pesan + ' '); 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'); });
Pada bagian ini akan dibahas bagaimana cara hosting aplikasi SignalR pada server. Biasanya aplikasi SignalR dipasang pada web server IIS, namun anda dapat juga melakukan self-host pada aplikasi console maupun pada windows services. SignalR memiliki pustaka self-host yang dibangun diatas platform OWIN. OWIN dapat memisahkan aplikasi web dari server, yang membuat OWIN ideal untuk melakukan self-hosting aplikasi web diluar IIS. Beberapa alasan untuk melakukan self-host adalah :
IIS tidak tersedia, misal server yang sudah ada tidak mempunyai IIS. Performance overhead jika menggunakan IIS dapat dihindari. SignalR ditambahkan kedalam aplikasi terdahulu yang sudah berjalan pada Windows Services atau Azure Worker role.
Membuat Server: Console Application Pada tutorial berikut akan dijelaskan cara membuat server menggunakan aplikasi console. Selain pada aplikasi console, server juga dapat di-host pada Windows services atau Azure worker role.
Membuat Project Pada tutorial berikut akan dijelaskan cara membuat server menggunakan aplikasi console. Buka Visual Studio 2013 > kemudian pilih Windows Desktop > pilih Console Application.
Gambar 60. Menambah project Consol Application. Pada VS 2013, pilih Tools > Nuget Package Manager > Package manager console.
69
Gambar 61. NuGet Package Manager Pada Package manager console tulis perintah berikut untuk menambahkan pustaka untuk self-host Install-Package Microsoft.AspNet.SignalR.SelfHost.
Gambar 62. Menambahkan library SignalR Self Host. Tambahkan juga perintah berikut Install-Package Microsoft.Owin.Cors untuk menambahkan pustaka OWIN. Pustaka ini digunakan untuk kebutuhan cross-domain karena aplikasi server dan client akan di-host pada port yang berbeda.
Gambar 63. Menambahkan library Owin.
Menulis Kode Program Langkah selanjutnya adalah menulis kode program. Pada file Program.cs, tambahkan kode berikut:
Kode Program 70. Kode aplikasi server. using using using using using
namespace SampleSelfHost { class Program { static void Main(string[] args)
70
{ 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.
71
Membuat Project Pada solution explorer tambahkan project Web Application baru dengan nama SampleSelfHostClient.
Gambar 65. Membuat project untuk aplikasi client Kemudian pilih Empty template, dan tekan tombol OK.
Gambar 66. Memilih empty template. Kemudian buka Package manager console untuk melakukan instalasi pustaka ASP.NET SignalR seperti pada gambar dibawah ini.
72
Gambar 67. Memilih empty template Pada project tambahkan HTML page dengan nama Default.html.
Gambar 68. Menambahkan HTML Page pada client
Menulis Kode Program Pada halaman Default.html tambahkan kode HTML dan Javascript berikut.
Kode Program 71. Kode aplikasi client. ChatRoom <script src="Scripts/jquery-1.6.4.min.js"> <script src="Scripts/jquery.signalR-2.1.2.min.js"> <script src="http://localhost:8080/signalr/hubs"> <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 + ': ' + message + ' '); }; $('#teksnama').val(prompt('Masukan nama:', '')); $('#PesanChat').focus(); $.connection.hub.start().done(function () { $('#kirimpesan').click(function () { chat.server.send($('#teksnama').val(), $('#PesanChat').val());
73
$('#PesanChat').val('').focus(); }); }); });
Penjelasan Kode diatas mirip dengan kode yang sudah anda tulis pada bagian sebelumnya dari buku ini tentang penggunaan SignalR Hub. Perbedaan dengan kode sebelumnya adalah adanya tambahan URL yang digunakan untuk koneksi ke server yaitu:
Kode Program 72. Koneksi ke server. $.connection.hub.url = "http://localhost:8080/signalr";
Uji Coba Untuk menjalankan kedua project diatas (server dan client) secara bersamaan maka lakukan langkah berikut. Klik kanan pada solution > pilih Sets Startup Projects > kemudian pilih multiple startup project > pada project SampleSelfHost dan SampleSelfHostClient ubah action menjadi Start.
Gambar 69. Tampilan pengaturan Multiple startup project
74
Kemudian jalankan aplikasi anda (tekan F5), maka kedua project akan dijalankan secara berurutan. Seharusnya project server akan dijalankan terlebih dalulu baru kemudian diikuti dengan project client. Gambar dibawah menunjukan tampilan dari aplikasi client.
Seperti yang sudah anda pelajari pada bagian sebelumnya ASP.NET SignalR dapat digunakan untuk meningkatkan level interaktifitas antara server dan web atau .NET client. Ketika dihosting pada Microsoft Azure maka SignalR juga akan mendapatkan keuntungan dari Azure seperti ketersediaan layanan yang dapat diandalkan, skalabilitas, dan performa.
Publish Project Untuk dapat mempublish aplikasi ASP.NET SignalR kedalam platform Microsoft Azure ada beberapa persyaratan yang harus dipenuhi terlebih dahulu seperti:
Azure Subscription: anda dapat mendaftar layanan Microsoft Azure versi trial dengan mengakses url berikut: http://azure.microsoft.com/en-us/pricing/free-trial/ Anda harus menginstall Azure SDK 2.3 untuk Visual Studio 2013 atau Visual Studio 2012. Penjelasan lengkap tentang hosting aplikasi asp.net di Microsoft Azure juga dapat dibaca pada tautan berikut.
Setelah semua persyaratan diatas terpenuhi maka buka project yang sebelumnya sudah anda buat yaitu HelloSignalR.
Gambar 71. Tampilan project HelloSignalR.
76
Kemudian klik kanan pada project tersebut > pilih Publish > pilih Microsoft Azure Website > kemudian masukan username dan password dari akun Microsoft Azure anda.
Gambar 72. Tampilan window Publish Web Setelah berhasil login maka akan muncul tampilan jendela Select Existing Websites berikut. Jika anda belum membuat website di Microsoft Azure pilih tombol New.
Gambar 73. Tampilan window pemilihan website Pada jendela Create site on Microsoft Azure, tambahkan site name HelloSignalR, dan pilih region Southeast Asia. Pastikan nama site yang anda gunakan belum dipakai oleh orang lain. Tekan tombol Create untuk membuat website baru di Azure. 77
Gambar 74. Tampilan window membuat website baru. Kemudian akan mucul jendela Publish Web yang berisi detail informasi dari website yang sudah anda buat. Tekan tombol Publish untuk mempublish project. Tunggu beberapa saat sampai program selesai dipublish kedalam Microsoft Azure.
Gambar 75. Tampilan window publish aplikasi
78
Uji Coba Untuk mencoba menjalankan aplikasi SignalR yang sudah dipublish pada Azure website, maka anda dapat masuk kedalam portal Microsoft Azure > kemudian pilih HelloSignalR > untuk mengetahui alamat url dari aplikasi yang sudah dipublish pilih Dashboard.
Gambar 76. Tampilan portal web Microsoft Azure. Pada menu sebelah kanan cari informasi tentang Site URL. Pada gambar dibawah dapat dilihat bahwa alamat dari aplikasi adalah: http://hellosignalr.azurewebsites.net.
Gambar 77. Informasi site URL.
79
Pada menu konfigurasi pastikan bahwa .NET Framework version yang digunakan adalah .NET Framework 4.5.
Gambar 78. Tampilan output aplikasi Chat Room Pastikan juga untuk mengaktifkan Web Sockets pada menu konfigurasi.
Gambar 79. Tampilan output aplikasi Chat Room 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.
Pada umumnya ada dua cara untuk melakukan scale pada aplikasi web yaitu scale up dan scale out:
Scale up: berarti menggunakan server yang lebih besar (VM yang lebih besar) dengan CPU dan RAM yang lebih besar. Scale out: berarti menambah lebih banyak server untuk menangani load.
Masalah yang dihadapi jika menggunakan solusi scale up adalah anda akan menghadapi keterbatasan besar server (RAM dan CPU). Karena itu anda akan membutuhkan solusi scale out. Akan tetapi jika anda menggunakan scale out maka ketika client terkoneksi ke satu server tertentu tidak akan mendapatkan pesan dari server yang lain.
Gambar 82. Arsitektur scale out Solusi dari masalah tersebut adalah memforward pesan dari satu server ke server yang lain menggunakan komponen yang bernama backplane.
82
Gambar 83. Arsitektur backplane Saat ini SignalR mendukung tiga macam backplane yang dapat digunakan yaitu: Microsoft Azure Service Bus, Redis, dan SQL Server. Pada tutorial kali ini akan dibahas penggunaan Microsoft Azure Service Bus.
Backplane dengan Azure Service Bus Pada tutorial kali ini akan dibahas penggunaan Azure Service Bus sebagai backplane. Kita akan mencoba untuk mendeploy aplikasi SignalR kedalam dua instance (dua VM yang berbeda), kemudian menggunakan Azure Service Bus sebagai backplane.
Gambar 84. Arsitektur backplane dengan Service Bus.
83
Membuat Azure Cloud Services Langkah pertama yang harus dilakukan adalah membuat aplikasi Cloud Service pada Azure Portal. Buat Cloud Service baru dengan nama SignalRSampleBackplane.
Gambar 85. Membuat Azure Cloud Service Setelah itu buat Service Bus Namespace baru pada Azure Portal. Beri nama samplechatscaleout. Pilih region Southeast Asia. Tipenya adalah Messaging, dan messaging tier-nya pilih standard.
Gambar 86. Membuat Azure Service Bus
Membuat Project Setelah membuat Cloud Service pada Azure Portal, langkah selanjutnya adalah membuat Cloud Project pada Visual Studio 2013. Buat new project > pilih Azure Cloud Service > beri nama ServiceBusChat. 84
Gambar 87. Membuat Azure Cloud Service. Kemudian langkah selanjutnya adalah membuat aplikasi SignalR dengan ASP.NET MVC. Pada jendela New Microsoft Azure Cloud Service pilih ASP.NET Web Role > kemudian beri nama ChatSampleSR.
Gambar 88. Menambahkan Web Role. Pada jendela New ASP.NET Project pilih template ASP.NET MVC. Kita akan menambahkan fungsi-fungsi SignalR pada project ASP.NET MVC.
85
Gambar 89. Memilih template MVC.
Kemudian setelah project ASP.NET MVC selesai dibuat, pilih Tools > Nuget Package Manager > Package manager console, dan tambahkan pustaka ASP.NET SignalR.
Gambar 90. Menambahkan pustaka SignalR Pada solution explorer buat folder baru dengan nama Hubs. Kemudian tambahkan file SignalR Hub Class (v2) dengan nama ChatHub.
Gambar 91. Menambahkan class SignalR Hub.
86
Menambahkan Kode Setelah itu pada class ChatHub tambahkan kode untuk SignalR server Hub sebagai berikut.
Kode Program 73. Kode server Hub. namespace ChatSampleSR { public class ChatHub : Hub { public void Send(string name, string message) { // Call the addNewMessageToPage method to update clients. Clients.All.addNewMessageToPage(name, message); } } }
Kemudian tambahkan kode berikut pada class Startup. Kode untuk backplane juga akan ditambahkan pada bagian ini (setelah mengambil Service Bus connection string).
Kode Program 74. Kode pada class Startup. using Owin; using Microsoft.Owin; [assembly: OwinStartup(typeof(ChatSampleSR.Startup))] namespace ChatSampleSR { 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.
87
Gambar 92. Menambahkan View. Tambahkan kode berikut pada View yang baru saja anda buat.
Kode Program 76. Kode pada view. @{ ViewBag.Title = "Chat Sample"; }
'); }; $('#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 = $('').text(value).html(); return encodedValue; }
88
}
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://samplechatscaleout.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessK ey;SharedAccessKey=6ziOMe1ILkE5Yqucer4k76xxxxxxx";
Publish Aplikasi Pada tutorial berikut akan dijelaskan bagaimana cara untuk mempublish project Cloud Service yang sudah kita buat kedalam Microsoft Azure.
Konfigurasi Instance & VM Langkah yang pertama adalah melakukan konfigurasi pada project Cloud Service, langkah ini dilakukan untuk menambahkan instance dan VM. Jadi kita akan mempublish aplikasi ASP.NET SignalR kedalam 2 instance VM pada Microsoft Azure. Pada project ServiceBusChat pilih ChatSampleSR role. Klik kanan pada ChatSampleSR > kemudian pilih Properties.
Gambar 96. Tampilan Role ChatSampleSR. Pilih Configuration > tambahkan instance count menjadi 2 > ubah VM size menjadi ExtraSmall. Tekan tombol Save.
Gambar 97. Menambahkan Instance count dan VM size. Pilih kembali project ServiceBusChat > pilih Publish. Maka akan muncul tampilan Publish Azure Application. Silahkan login menggunakan account Microsoft Azure anda, kemudian pilih Cloud Service dengan nama SignalRSampleBackplane yang sebelumnya sudah kita buat. Kemudian tekan tombol Publish untuk mempublish aplikasi ASP.NET SignalR kedalam Azure Cloud Service. Tunggu proses publish yang akan memakan waktu bervariasi tergantung dari kecepatan internet anda.
90
Gambar 98. Mempublish aplikasi kedalam Azure Cloud Service.
Uji Coba Untuk melakukan uji coba aplikasi yang sudah kita publish, anda dapat mengakses Microsoft Azure Portal > Cloud Services > kemudian pilih signalrsamplebackplane > pilih Dashboard. Kemudian klik site url berikut: http://signalrsamplebackplane.cloudapp.net/ untuk menampilkan aplikasi pada browser. Untuk menjalankan aplikasi SignalR Chat, tambahkan url Home/Chat.
Gambar 99. Output aplikasi SignalR Chat pada browser Chrome.
91
Untuk memastikan aplikasi yang kita publish berjalan dengan baik, anda dapat membuka browser baru untuk mencoba berkomunikasi antar aplikasi.
Gambar 100. Output aplikasi SignalR Chat pada browser Firefox.
