{"id":1664,"date":"2014-12-12T08:42:00","date_gmt":"2014-12-12T08:42:00","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1664"},"modified":"2015-04-11T01:23:56","modified_gmt":"2015-04-11T01:23:56","slug":"asp-net-signalr-hub-communication-model-examples-part-2","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1664","title":{"rendered":"ASP.NET SignalR : Hub Communication Model Examples Part 2"},"content":{"rendered":"

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

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

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

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

Dari daftar di atas dapat dilihat ada method yang berfungsi sebagai event handler seperti :<\/p>\n

    \n
  1. OnConnected, dieksekusi jika client terkoneksi ke server. <\/li>\n
  2. OnDisconnected, dieksekusi jika client terputus koneksinya. <\/li>\n
  3. OnReconnected, dieksekusi jika client melakan koneksi ulang <\/li>\n<\/ol>\n

    Pada class Hub HelloWorld ini akan ditambahkan override method OnConnected dan menambahkan method Send sebagai salah satu fungsi pada aplikasi ChatRoom ini.<\/p>\n

    Berikut ini adalah isi file class Hub HelloWorld yang telah dimodifikasi.<\/p>\n

    \n
     1<\/span> using<\/span> System;\n<\/span> 2<\/span> <\/span>using<\/span> System.Collections.Generic;\n<\/span> 3<\/span> <\/span>using<\/span> System.Linq;\n<\/span> 4<\/span> <\/span>using<\/span> System.Web;\n<\/span> 5<\/span> <\/span>using<\/span> Microsoft.AspNet.SignalR;\n<\/span> 6<\/span> <\/span>using<\/span> System.Threading.Tasks;\n<\/span> 7<\/span> \n<\/span> 8<\/span> <\/span>namespace<\/span> HelloSignalR\n<\/span> 9<\/span> {\n<\/span>10<\/span>     <\/span>public<\/span> <\/span>class<\/span> HelloWorld : Hub\n<\/span>11<\/span>     {\n<\/span>12<\/span>         <\/span>public<\/span> <\/span>void<\/span> Hello()\n<\/span>13<\/span>         {\n<\/span>14<\/span>             Clients.All.hello();\n<\/span>15<\/span>         }\n<\/span>16<\/span> \n<\/span>17<\/span>         <\/span>public<\/span> <\/span>void<\/span> Send(<\/span>string<\/span> user, <\/span>string<\/span> pesan)\n<\/span>18<\/span>         {\n<\/span>19<\/span>             Clients.All.show(user, pesan);\n<\/span>20<\/span>         }\n<\/span>21<\/span> \n<\/span>22<\/span>         <\/span>public<\/span> <\/span>override<\/span> Task OnConnected()\n<\/span>23<\/span>         {\n<\/span>24<\/span>             <\/span>return<\/span> Clients.All.connected();\n<\/span>25<\/span>         }\n<\/span>26<\/span>     }\n<\/span>27<\/span> }\n<\/span>28<\/span> <\/span><\/div><\/pre>\n
    <\/div>\n
    Selanjutnya akan ditambahkan halaman baru dengan nama chatroom.html.<\/p>\n
    \n
     1<\/span> <!<\/span>DOCTYPE html<\/span>><\/span>\n<\/span> 2<\/span> <\/span><<\/span>html <\/span>xmlns<\/span>="http:\/\/www.w3.org\/1999\/xhtml"<\/span>><\/span>\n<\/span> 3<\/span> <\/span><<\/span>head<\/span>><\/span>\n<\/span> 4<\/span>     <\/span><<\/span>title<\/span>><\/span>ChatRoom<\/span><\/<\/span>title<\/span>><\/span>\n<\/span> 5<\/span>     <\/span><<\/span>script <\/span>src<\/span>=".\/Scripts\/jquery-1.10.2.min.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span> 6<\/span>     <\/span><<\/span>script <\/span>src<\/span>=".\/Scripts\/jquery.signalR-2.1.2.min.js"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span> 7<\/span>     <\/span><<\/span>script <\/span>src<\/span>=".\/signalr\/hubs"<\/span> type<\/span>="text\/javascript"<\/span>><\/<\/span>script<\/span>><\/span>\n<\/span> 8<\/span>     <\/span><<\/span>script <\/span>type<\/span>="text\/javascript"<\/span>><\/span>\n<\/span> 9<\/span>         $(document).ready(<\/span>function<\/span> () {\n<\/span>10<\/span>             $(<\/span>'<\/span>#UserChat<\/span>'<\/span>).val(prompt(<\/span>'<\/span>Enter your name:<\/span>'<\/span>, <\/span>''<\/span>));\n<\/span>11<\/span> \n<\/span>12<\/span>             <\/span>var<\/span> hub <\/span>=<\/span> $.connection.helloWorld;\n<\/span>13<\/span> \n<\/span>14<\/span>             hub.client.connected <\/span>=<\/span> <\/span>function<\/span> () {\n<\/span>15<\/span>                 alert(<\/span>'<\/span>User baru bergabung.<\/span>'<\/span>);\n<\/span>16<\/span>             }\n<\/span>17<\/span> \n<\/span>18<\/span>             hub.client.show <\/span>=<\/span> <\/span>function<\/span> (user, pesan) {\n<\/span>19<\/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>20<\/span>             }\n<\/span>21<\/span> \n<\/span>22<\/span>             $.connection.hub.start().done(<\/span>function<\/span> () {\n<\/span>23<\/span>                 $(<\/span>'<\/span>#SubmitButton<\/span>'<\/span>).click(<\/span>function<\/span> () {\n<\/span>24<\/span>                     hub.server.send($(<\/span>'<\/span>#UserChat<\/span>'<\/span>).val(), $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val());\n<\/span>25<\/span>                     $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val(<\/span>''<\/span>).focus();\n<\/span>26<\/span>                 });\n<\/span>27<\/span>             });\n<\/span>28<\/span>         });\n<\/span>29<\/span>     <\/span><\/<\/span>script<\/span>><\/span>\n<\/span>30<\/span> <\/span><\/<\/span>head<\/span>><\/span>\n<\/span>31<\/span> <\/span><<\/span>body<\/span>><\/span>\n<\/span>32<\/span>     <\/span><<\/span>div <\/span>id<\/span>="ChatUser"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>33<\/span>     <\/span><<\/span>input <\/span>type<\/span>="text"<\/span> id<\/span>="PesanChat"<\/span> <\/span>\/><\/span>\n<\/span>34<\/span>     <\/span><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="SubmitButton"<\/span> value<\/span>="Send"<\/span> <\/span>\/><\/span>\n<\/span>35<\/span>     <\/span><<\/span>div <\/span>id<\/span>="AddText"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>36<\/span> <\/span><<\/span>input <\/span>type<\/span>="hidden"<\/span> id<\/span>="UserChat"<\/span> <\/span>\/><\/span>\n<\/span>37<\/span> <\/span><\/<\/span>body<\/span>><\/span>\n<\/span>38<\/span> <\/span><\/<\/span>html<\/span>><\/span>\n<\/span>39<\/span> <\/span><\/div><\/pre>\n
    <\/div>\n
    {Uji Coba<\/em><\/strong>}<\/p>\n
    Setelah halaman chatroom.html dieksekusi dapat dilihat tampilan seperti berikut ini.<\/p>\n
    \"image\"<\/a><\/p>\n
    Dan setelah itu akan dapat dilihat respon seperti pada gambar di bawah ini.<\/p>\n
    \"image\"<\/a><\/p>\n
    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.<\/p>\n
    \"image\"<\/a><\/p>\n
    Source code dari contoh di atas dapat dilihat secara lengkap di link berikut ini : https:\/\/github.com\/rezafaisal\/ASPNETSignalR<\/a>.<\/p>\n
    Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":1,"featured_media":1718,"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],"class_list":["post-1664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-signalr"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/12\/signalr.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-qQ","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1664","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=1664"}],"version-history":[{"count":4,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1664\/revisions"}],"predecessor-version":[{"id":1725,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1664\/revisions\/1725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1718"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}