{"id":1678,"date":"2014-12-26T09:08:00","date_gmt":"2014-12-26T09:08:00","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1678"},"modified":"2015-04-10T09:14:16","modified_gmt":"2015-04-10T09:14:16","slug":"asp-net-signalr-persistent-connection-example-part-2","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1678","title":{"rendered":"ASP.NET SignalR : Persistent Connection Example Part 2"},"content":{"rendered":"

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 yang dapat dilihat pada posting ASP.NET SignalR : Hub Communication Model Examples Part 2<\/a>.<\/p>\n

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

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

Berikut ini adalah kode class Persistent Connection untuk keperluan pembuatan chat room ini.<\/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.Threading.Tasks;\n<\/span> 5<\/span> <\/span>using<\/span> System.Web;\n<\/span> 6<\/span> <\/span>using<\/span> Microsoft.AspNet.SignalR;\n<\/span> 7<\/span> \n<\/span> 8<\/span> <\/span>namespace<\/span> HelloPersistent\n<\/span> 9<\/span> {\n<\/span>10<\/span>     <\/span>public<\/span> <\/span>class<\/span> ChatRoom : PersistentConnection\n<\/span>11<\/span>     {\n<\/span>12<\/span>         <\/span>protected<\/span> <\/span>override<\/span> Task OnConnected(IRequest request, <\/span>string<\/span> connectionId)\n<\/span>13<\/span>         {\n<\/span>14<\/span>             <\/span>return<\/span> Connection.Send(connectionId, <\/span>"<\/span>Selamat datang di chat room.<\/span>"<\/span>);\n<\/span>15<\/span>         }\n<\/span>16<\/span> \n<\/span>17<\/span>         <\/span>protected<\/span> <\/span>override<\/span> Task OnReceived(IRequest request, <\/span>string<\/span> connectionId, <\/span>string<\/span> data)\n<\/span>18<\/span>         {\n<\/span>19<\/span>             <\/span>return<\/span> Connection.Broadcast(data);\n<\/span>20<\/span>         }\n<\/span>21<\/span>     }\n<\/span>22<\/span> }\n<\/span>23<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
Agar class tersebut dapat digunakan oleh kode program pada client maka perlu ditambahkan baris berikut ini pada file Startup.cs sehingga menghasilkan kode lengkap seperti berikut ini.<\/p>\n
\n
 1<\/span> using<\/span> System;\n<\/span> 2<\/span> <\/span>using<\/span> System.Threading.Tasks;\n<\/span> 3<\/span> <\/span>using<\/span> Microsoft.Owin;\n<\/span> 4<\/span> <\/span>using<\/span> Owin;\n<\/span> 5<\/span> \n<\/span> 6<\/span> [assembly: OwinStartup(<\/span>typeof<\/span>(HelloPersistent.Startup))]\n<\/span> 7<\/span> \n<\/span> 8<\/span> <\/span>namespace<\/span> HelloPersistent\n<\/span> 9<\/span> {\n<\/span>10<\/span>     <\/span>public<\/span> <\/span>class<\/span> Startup\n<\/span>11<\/span>     {\n<\/span>12<\/span>         <\/span>public<\/span> <\/span>void<\/span> Configuration(IAppBuilder app)\n<\/span>13<\/span>         {\n<\/span>14<\/span>             app.MapSignalR<\/span><<\/span>HelloWorld<\/span>><\/span>(<\/span>"<\/span>\/echo<\/span>"<\/span>);\n<\/span>15<\/span>             app.MapSignalR<\/span><<\/span>ChatRoom<\/span>><\/span>(<\/span>"<\/span>\/chat<\/span>"<\/span>);\n<\/span>16<\/span>         }\n<\/span>17<\/span>     }\n<\/span>18<\/span> }<\/span><\/div><\/pre>\n
<\/div>\n
Sedangkan di kode program untuk sisi client dapat dilihat di bawah ini.<\/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> persistent <\/span>=<\/span> $.connection(<\/span>'<\/span>\/chat<\/span>'<\/span>);\n<\/span>13<\/span> \n<\/span>14<\/span>             persistent.received(<\/span>function<\/span> (data) {\n<\/span>15<\/span>                 $(<\/span>'<\/span>#AddText<\/span>'<\/span>).append(data <\/span>+<\/span> <\/span>'<\/span><br\/><\/span>'<\/span>);\n<\/span>16<\/span>             });\n<\/span>17<\/span> \n<\/span>18<\/span>             persistent.start().done(<\/span>function<\/span> () {\n<\/span>19<\/span>                 $(<\/span>'<\/span>#SubmitButton<\/span>'<\/span>).click(<\/span>function<\/span> () {\n<\/span>20<\/span>                     persistent.send($(<\/span>'<\/span>#UserChat<\/span>'<\/span>).val() <\/span>+<\/span> <\/span>'<\/span> : <\/span>'<\/span> <\/span>+<\/span> $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val());\n<\/span>21<\/span>                     $(<\/span>'<\/span>#PesanChat<\/span>'<\/span>).val(<\/span>''<\/span>).focus();\n<\/span>22<\/span>                 });\n<\/span>23<\/span>             });\n<\/span>24<\/span>         });\n<\/span>25<\/span>     <\/span><\/<\/span>script<\/span>><\/span>\n<\/span>26<\/span> <\/span><\/<\/span>head<\/span>><\/span>\n<\/span>27<\/span> <\/span><<\/span>body<\/span>><\/span>\n<\/span>28<\/span>     <\/span><<\/span>div <\/span>id<\/span>="ChatUser"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>29<\/span>     <\/span><<\/span>input <\/span>type<\/span>="text"<\/span> id<\/span>="PesanChat"<\/span> <\/span>\/><\/span>\n<\/span>30<\/span>     <\/span><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="SubmitButton"<\/span> value<\/span>="Send"<\/span> <\/span>\/><\/span>\n<\/span>31<\/span>     <\/span><<\/span>div <\/span>id<\/span>="AddText"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>32<\/span>     <\/span><<\/span>input <\/span>type<\/span>="hidden"<\/span> id<\/span>="UserChat"<\/span> <\/span>\/><\/span>\n<\/span>33<\/span> <\/span><\/<\/span>body<\/span>><\/span>\n<\/span>34<\/span> <\/span><\/<\/span>html<\/span>><\/span>\n<\/span>35<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
{Uji Coba<\/em><\/strong>}<\/p>\n
Hasil dari kode di atas dapat dilihat pada gambar di bawah ini. Di awal perlu diisikan nama yang akan digunakan pada chat room.<\/p>\n
\"image\"<\/a><\/p>\n
Selanjutnya dapat dilihat halaman dapat digunakan untuk melakukan chat.<\/p>\n
\"image\"<\/a><\/p>\n
Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
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 yang dapat dilihat pada posting ASP.NET SignalR : Hub Communication Model Examples Part 2. {Menulis…<\/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],"class_list":["post-1678","post","type-post","status-publish","format-standard","hentry","category-softwaredev","tag-asp-net","tag-signalr"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-r4","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1678","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=1678"}],"version-history":[{"count":1,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1678\/revisions"}],"predecessor-version":[{"id":1679,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1678\/revisions\/1679"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}