Building Client App for ASP.NET SignalR with Windows App (Javascript) | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

Building Client App for ASP.NET SignalR with Windows App (Javascript)

Jan 6, 2015 by     No Comments    Posted under: I am Software Developer

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.

image

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.

image

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.

image

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.

image

 

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

image

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.

1 jQuery.support = MSApp.execUnsafeLocalFunction(function () { 2 var div = document.createElement( "div" ), 3 documentElement = document.documentElement, 4 all, 5 a, 6 select, 7 opt, 8 input, 9 marginDiv, 10 support, 11 fragment, 12 body, 13 testElementParent, 14 testElement, 15 testElementStyle, 16 tds, 17 events, 18 eventName, 19 i, 20 isSupported; 21 22 ... dan seterusnya ... 23 24 return support; 25 }); 26

Selanjutnya adalah menulis kode program client SignalR dengan kode Javascript seperti berikut ini.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ClientWinApp</title> 6 7 <!-- WinJS references --> 8 <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /> 9 <script src="//Microsoft.WinJS.2.0/js/base.js"></script> 10 <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> 11 12 <!-- ClientWinApp references --> 13 <link href="/css/default.css" rel="stylesheet" /> 14 <script src="/js/default.js"></script> 15 16 <!-- SignalR references --> 17 <script src="/Scripts/jquery-1.6.4.js"></script> 18 <script src="/Scripts/jquery.signalR-2.1.2.min.js"></script> 19 <script type="text/javascript"> 20 $(document).ready(function () { 21 var connection = $.hubConnection('http://localhost:30526/signalr/hubs'); 22 var hubProxy = connection.createHubProxy('helloWorld'); 23 24 hubProxy.on('connected', function (user, pesan) { 25 var msg = new Windows.UI.Popups.MessageDialog("User baru bergabung.", "SignalR"); 26 msg.showAsync(); 27 console.log('User baru bergabung.'); 28 }); 29 30 hubProxy.on('show', function (user, pesan) { 31 $('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br />'); 32 console.log(user + ' : ' + pesan); 33 }); 34 35 connection.start() 36 .done(function () 37 { 38 $('#SubmitButton').click(function () { 39 hubProxy.invoke('Send', 'Win8 User', $('#PesanChat').val()).done(function () { 40 console.log('Send berhasil dieksekusi.'); 41 }).fail(function (error) { 42 console.log('Send gagal dieksekusi. Error: ' + error); 43 }); 44 45 $('#PesanChat').val('').focus(); 46 }); 47 48 console.log('Terkoneksi, connection ID=' + connection.id); 49 }) 50 .fail(function () { console.log('Koneksi tidak dapat dilakukan'); }); 51 }); 52 </script> 53 </head> 54 <body> 55 <input type="text" id="PesanChat" /> 56 <input type="button" id="SubmitButton" value="Send" /> 57 <div id="AddText"></div> 58 </body> 59 </html> 60

{Uji Coba}

Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada local mechine dengan cara mengklik tombol ini.

image

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

image

Setelah pilihan diubah, selanjutnya klik tombol berupa segitiga berwarna hijau tersebut. Makan akan ditampilkan simulator seperti berikut ini.

image

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.

image

image

Selamat mencoba :)

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: