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.
Selamat mencoba :)
