{"id":1716,"date":"2015-01-06T09:31:00","date_gmt":"2015-01-06T09:31:00","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1716"},"modified":"2015-04-10T09:33:22","modified_gmt":"2015-04-10T09:33:22","slug":"building-client-app-for-asp-net-signalr-with-windows-app-javascript","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1716","title":{"rendered":"Building Client App for ASP.NET SignalR with Windows App (Javascript)"},"content":{"rendered":"

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.<\/p>\n

{Membuat Project<\/em><\/strong>}<\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

 <\/p>\n

{Menulis Kode Program<\/em><\/strong>}<\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

\n
 1<\/span> jQuery.support <\/span>=<\/span> MSApp.execUnsafeLocalFunction(<\/span>function<\/span> () {\n<\/span> 2<\/span>     <\/span>var<\/span> div <\/span>=<\/span> document.createElement( <\/span>"<\/span>div<\/span>"<\/span> ),\n<\/span> 3<\/span>         documentElement <\/span>=<\/span> document.documentElement,\n<\/span> 4<\/span>         all,\n<\/span> 5<\/span>         a,\n<\/span> 6<\/span>         select,\n<\/span> 7<\/span>         opt,\n<\/span> 8<\/span>         input,\n<\/span> 9<\/span>         marginDiv,\n<\/span>10<\/span>         support,\n<\/span>11<\/span>         fragment,\n<\/span>12<\/span>         body,\n<\/span>13<\/span>         testElementParent,\n<\/span>14<\/span>         testElement,\n<\/span>15<\/span>         testElementStyle,\n<\/span>16<\/span>         tds,\n<\/span>17<\/span>         events,\n<\/span>18<\/span>         eventName,\n<\/span>19<\/span>         i,\n<\/span>20<\/span>         isSupported;\n<\/span>21<\/span> \n<\/span>22<\/span>     ... dan seterusnya ...\n<\/span>23<\/span> \n<\/span>24<\/span>     <\/span>return<\/span> support;\n<\/span>25<\/span> });\n<\/span>26<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
Selanjutnya adalah menulis kode program client SignalR dengan kode Javascript seperti berikut ini.<\/p>\n
\n
 1<\/span> <!<\/span>DOCTYPE html<\/span>><\/span>\n<\/span> 2<\/span> <\/span><<\/span>html<\/span>><\/span>\n<\/span> 3<\/span> <\/span><<\/span>head<\/span>><\/span>\n<\/span> 4<\/span>     <\/span><<\/span>meta <\/span>charset<\/span>="utf-8"<\/span> <\/span>\/><\/span>\n<\/span> 5<\/span>     <\/span><<\/span>title<\/span>><\/span>ClientWinApp<\/span><\/<\/span>title<\/span>><\/span>\n<\/span> 6<\/span> \n<\/span> 7<\/span>     <\/span><!--<\/span> WinJS references <\/span>--><\/span>\n<\/span> 8<\/span>     <\/span><<\/span>link <\/span>href<\/span>="\/\/Microsoft.WinJS.2.0\/css\/ui-dark.css"<\/span> rel<\/span>="stylesheet"<\/span> <\/span>\/><\/span>\n<\/span> 9<\/span>     <\/span><<\/span>script <\/span>src<\/span>="\/\/Microsoft.WinJS.2.0\/js\/base.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span>10<\/span>     <\/span><<\/span>script <\/span>src<\/span>="\/\/Microsoft.WinJS.2.0\/js\/ui.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span>11<\/span> \n<\/span>12<\/span>     <\/span><!--<\/span> ClientWinApp references <\/span>--><\/span>\n<\/span>13<\/span>     <\/span><<\/span>link <\/span>href<\/span>="\/css\/default.css"<\/span> rel<\/span>="stylesheet"<\/span> <\/span>\/><\/span>\n<\/span>14<\/span>     <\/span><<\/span>script <\/span>src<\/span>="\/js\/default.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span>15<\/span> \n<\/span>16<\/span>     <\/span><!--<\/span> SignalR references <\/span>--><\/span>\n<\/span>17<\/span>     <\/span><<\/span>script <\/span>src<\/span>="\/Scripts\/jquery-1.6.4.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span>18<\/span>     <\/span><<\/span>script <\/span>src<\/span>="\/Scripts\/jquery.signalR-2.1.2.min.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span>19<\/span>     <\/span><<\/span>script <\/span>type<\/span>="text\/javascript"<\/span>><\/span>\n<\/span>20<\/span>         $(document).ready(<\/span>function<\/span> () {\n<\/span>21<\/span>             <\/span>var<\/span> connection <\/span>=<\/span> $.hubConnection(<\/span>'<\/span>http:\/\/localhost:30526\/signalr\/hubs<\/span>'<\/span>);\n<\/span>22<\/span>             <\/span>var<\/span> hubProxy <\/span>=<\/span> connection.createHubProxy(<\/span>'<\/span>helloWorld<\/span>'<\/span>);\n<\/span>23<\/span> \n<\/span>24<\/span>             hubProxy.on(<\/span>'<\/span>connected<\/span>'<\/span>, <\/span>function<\/span> (user, pesan) {\n<\/span>25<\/span>                 <\/span>var<\/span> msg <\/span>=<\/span> <\/span>new<\/span> Windows.UI.Popups.MessageDialog(<\/span>"<\/span>User baru bergabung.<\/span>"<\/span>, <\/span>"<\/span>SignalR<\/span>"<\/span>);\n<\/span>26<\/span>                 msg.showAsync();\n<\/span>27<\/span>                 console.log(<\/span>'<\/span>User baru bergabung.<\/span>'<\/span>);\n<\/span>28<\/span>             });\n<\/span>29<\/span> \n<\/span>30<\/span>             hubProxy.on(<\/span>'<\/span>show<\/span>'<\/span>, <\/span>function<\/span> (user, pesan) {\n<\/span>31<\/span>                 $(<\/span>'<\/span>#AddText<\/span>'<\/span>).append(<\/span>'<\/span><strong> <\/span>'<\/span> <\/span>+<\/span> user <\/span>+<\/span> <\/span>'<\/span> :<\/strong> <\/span>'<\/span> <\/span>+<\/span> pesan <\/span>+<\/span> <\/span>'<\/span><br \/><\/span>'<\/span>);\n<\/span>32<\/span>                 console.log(user <\/span>+<\/span> <\/span>'<\/span> : <\/span>'<\/span> <\/span>+<\/span> pesan);\n<\/span>33<\/span>             });\n<\/span>34<\/span> \n<\/span>35<\/span>             connection.start()\n<\/span>36<\/span>                 .done(<\/span>function<\/span> ()\n<\/span>37<\/span>                 {\n<\/span>38<\/span>                     $(<\/span>'<\/span>#SubmitButton<\/span>'<\/span>).click(<\/span>function<\/span> () {\n<\/span>39<\/span>                         hubProxy.invoke(<\/span>'<\/span>Send<\/span>'<\/span>, <\/span>'<\/span>Win8 User<\/span>'<\/span>, $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val()).done(<\/span>function<\/span> () {\n<\/span>40<\/span>                             console.log(<\/span>'<\/span>Send berhasil dieksekusi.<\/span>'<\/span>);\n<\/span>41<\/span>                         }).fail(<\/span>function<\/span> (error) {\n<\/span>42<\/span>                             console.log(<\/span>'<\/span>Send gagal dieksekusi. Error: <\/span>'<\/span> <\/span>+<\/span> error);\n<\/span>43<\/span>                         });\n<\/span>44<\/span> \n<\/span>45<\/span>                         $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val(<\/span>''<\/span>).focus();\n<\/span>46<\/span>                     });\n<\/span>47<\/span> \n<\/span>48<\/span>                     console.log(<\/span>'<\/span>Terkoneksi, connection ID=<\/span>'<\/span> <\/span>+<\/span> connection.id);\n<\/span>49<\/span>                 })\n<\/span>50<\/span>                 .fail(<\/span>function<\/span> () { console.log(<\/span>'<\/span>Koneksi tidak dapat dilakukan<\/span>'<\/span>); });\n<\/span>51<\/span>         });\n<\/span>52<\/span>     <\/span><\/<\/span>script<\/span>><\/span>\n<\/span>53<\/span> <\/span><\/<\/span>head<\/span>><\/span>\n<\/span>54<\/span> <\/span><<\/span>body<\/span>><\/span>\n<\/span>55<\/span>     <\/span><<\/span>input <\/span>type<\/span>="text"<\/span> id<\/span>="PesanChat"<\/span> <\/span>\/><\/span>\n<\/span>56<\/span>     <\/span><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="SubmitButton"<\/span> value<\/span>="Send"<\/span> <\/span>\/><\/span>\n<\/span>57<\/span>     <\/span><<\/span>div <\/span>id<\/span>="AddText"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>58<\/span> <\/span><\/<\/span>body<\/span>><\/span>\n<\/span>59<\/span> <\/span><\/<\/span>html<\/span>><\/span>\n<\/span>60<\/span> <\/span><\/div><\/pre>\n
<\/div>\n<\/p>\n
{Uji Coba<\/em><\/strong>}<\/p>\n
Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada local mechine dengan cara mengklik tombol ini.<\/p>\n
\"image\"<\/a><\/p>\n
Tapi pada uji coba ini aplikasi yang dibuat akan menggunakan Simulator maka pilihan untuk menjalankan Windows App tersebut diganti menjadi seperti berikut.<\/p>\n
\"image\"<\/a><\/p>\n
Setelah pilihan diubah, selanjutnya klik tombol berupa segitiga berwarna hijau tersebut. Makan akan ditampilkan simulator seperti berikut ini.<\/p>\n
\"image\"<\/a><\/p>\n
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.<\/p>\n
\"image\"<\/a><\/p>\n
\"image\"<\/a><\/p>\n
Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,132,22,21],"class_list":["post-1716","post","type-post","status-publish","format-standard","hentry","category-softwaredev","tag-asp-net","tag-signalr","tag-windows-8","tag-windows-store-app"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-rG","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1716"}],"version-history":[{"count":1,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1716\/revisions"}],"predecessor-version":[{"id":1717,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1716\/revisions\/1717"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}