ASP.NET SignalR : Persistent Connection Example Part 1 | M Reza Faisal

reza

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

ASP.NET SignalR : Persistent Connection Example Part 1

Dec 25, 2014 by     No Comments    Posted under: I am Software Developer

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 bagian sebelumnya yang dapat dilihat pada posting ASP.NET SignalR : Hub Communication Model Examples Part 1.  Langkah selanjutnya adalah membuat SignalR Persistent Connection Class (v2) dengan nama HelloWorld. Berikut adalah kode dari class ini.

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Threading.Tasks; 5 using System.Web; 6 using Microsoft.AspNet.SignalR; 7 8 namespace HelloPersistent 9 { 10 public class HelloWorld : PersistentConnection 11 { 12 protected override Task OnConnected(IRequest request, string connectionId) 13 { 14 return Connection.Send(connectionId, "Hello World! on " + DateTime.Now.ToString() + "<br/>"); 15 } 16 17 protected override Task OnReceived(IRequest request, string connectionId, string data) 18 { 19 return Connection.Broadcast(data + DateTime.Now.ToString() + "<br/>"); 20 } 21 } 22 }

Selanjutnya membuat OWIN Startup Class dengan nama Startup.cs dengan isi yang telah dimodifikasi menjadi seperti berikut ini.

1 using System; 2 using System.Threading.Tasks; 3 using Microsoft.Owin; 4 using Owin; 5 6 [assembly: OwinStartup(typeof(HelloPersistent.Startup))] 7 8 namespace HelloPersistent 9 { 10 public class Startup 11 { 12 public void Configuration(IAppBuilder app) 13 { 14 app.MapSignalR<HelloWorld>("/echo"); 15 } 16 } 17 } 18

{Menulis Kode Program}

Berikut ini adalah kode untuk implementasi Persistent Connection pada client yang dibuat pada file index.html.

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Hello World! with SignalR</title> 5 <script src="./Scripts/jquery-1.10.2.min.js"></script> 6 <script src="./Scripts/jquery.signalR-2.1.2.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function () { 9 var persistent = $.connection('/echo'); 10 11 persistent.received(function (data) { 12 $('#AddText').append(data); 13 }); 14 15 persistent.start().done(function () { 16 $('#SubmitButton').click(function () { 17 persistent.send("Hello World Clicked"); 18 }); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 <div id="AddText"></div> 25 <input type="button" id="SubmitButton" value="Say Hello" /> 26 </body> 27 </html> 28

{Uji Coba}

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.

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: