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

Pada bagian berikut ini akan dipaparkan tahap-tahap implementasi ASP.NET SignalR 2 pada aplikasi web dengan menggunakan model komunikasi Persistent.<\/p>\n

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

Untuk mencoba model komunikasi ini dibuat project dengan nama HelloPersistent dengan cara yang sama seperti yang telah dilakukan pada bagian sebelumnya yang dapat dilihat pada posting ASP.NET SignalR : Hub Communication Model Examples Part 1<\/a>.  Langkah selanjutnya adalah membuat SignalR Persistent Connection Class (v2) dengan nama HelloWorld. Berikut adalah kode dari class 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> HelloWorld : 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>Hello World! on <\/span>"<\/span> <\/span>+<\/span> DateTime.Now.ToString() <\/span>+<\/span> <\/span>"<\/span><br\/><\/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 <\/span>+<\/span> DateTime.Now.ToString() <\/span>+<\/span> <\/span>"<\/span><br\/><\/span>"<\/span>);\n<\/span>20<\/span>         }\n<\/span>21<\/span>     }\n<\/span>22<\/span> }<\/span><\/div><\/pre>\n
<\/div>\n<\/p>\n
Selanjutnya membuat OWIN Startup Class dengan nama Startup.cs dengan isi yang telah dimodifikasi menjadi 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>         }\n<\/span>16<\/span>     }\n<\/span>17<\/span> }\n<\/span>18<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
{Menulis Kode Program<\/em><\/strong>}<\/p>\n
Berikut ini adalah kode untuk implementasi Persistent Connection pada client yang dibuat pada file index.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>Hello World! with SignalR<\/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>type<\/span>="text\/javascript"<\/span>><\/span>\n<\/span> 8<\/span>         $(document).ready(<\/span>function<\/span> () {\n<\/span> 9<\/span>             <\/span>var<\/span> persistent <\/span>=<\/span> $.connection(<\/span>'<\/span>\/echo<\/span>'<\/span>);\n<\/span>10<\/span> \n<\/span>11<\/span>             persistent.received(<\/span>function<\/span> (data) {\n<\/span>12<\/span>                 $(<\/span>'<\/span>#AddText<\/span>'<\/span>).append(data);\n<\/span>13<\/span>             });\n<\/span>14<\/span> \n<\/span>15<\/span>             persistent.start().done(<\/span>function<\/span> () {\n<\/span>16<\/span>                 $(<\/span>'<\/span>#SubmitButton<\/span>'<\/span>).click(<\/span>function<\/span> () {\n<\/span>17<\/span>                     persistent.send(<\/span>"<\/span>Hello World Clicked<\/span>"<\/span>);\n<\/span>18<\/span>                 });\n<\/span>19<\/span>             });\n<\/span>20<\/span>         });\n<\/span>21<\/span>     <\/span><\/<\/span>script<\/span>><\/span>\n<\/span>22<\/span> <\/span><\/<\/span>head<\/span>><\/span>\n<\/span>23<\/span> <\/span><<\/span>body<\/span>><\/span>\n<\/span>24<\/span>     <\/span><<\/span>div <\/span>id<\/span>="AddText"<\/span>><\/<\/span>div<\/span>><\/span>\n<\/span>25<\/span>     <\/span><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="SubmitButton"<\/span> value<\/span>="Say Hello"<\/span> <\/span>\/><\/span>\n<\/span>26<\/span> <\/span><\/<\/span>body<\/span>><\/span>\n<\/span>27<\/span> <\/span><\/<\/span>html<\/span>><\/span>\n<\/span>28<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
{Uji Coba<\/em><\/strong>}<\/p>\n
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.<\/p>\n
\"image\"<\/a><\/p>\n
Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
Pada bagian berikut ini akan dipaparkan tahap-tahap implementasi ASP.NET SignalR 2 pada aplikasi web dengan menggunakan model komunikasi Persistent. {Membuat Project} Untuk mencoba model komunikasi ini dibuat project dengan nama HelloPersistent dengan cara yang sama seperti yang telah dilakukan pada…<\/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-1672","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-qY","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1672","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=1672"}],"version-history":[{"count":1,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1672\/revisions"}],"predecessor-version":[{"id":1673,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1672\/revisions\/1673"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}