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

reza

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

ASP.NET SignalR : Persistent Connection Example Part 2

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

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 Kode Program}

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.

Berikut ini adalah kode class Persistent Connection untuk keperluan pembuatan chat room 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 ChatRoom : PersistentConnection 11 { 12 protected override Task OnConnected(IRequest request, string connectionId) 13 { 14 return Connection.Send(connectionId, "Selamat datang di chat room."); 15 } 16 17 protected override Task OnReceived(IRequest request, string connectionId, string data) 18 { 19 return Connection.Broadcast(data); 20 } 21 } 22 } 23

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.

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 app.MapSignalR<ChatRoom>("/chat"); 16 } 17 } 18 }

Sedangkan di kode program untuk sisi client dapat dilihat di bawah ini.

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>ChatRoom</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 src="./signalr/hubs" type="text/javascript"></script> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 $('#UserChat').val(prompt('Enter your name:', '')); 11 12 var persistent = $.connection('/chat'); 13 14 persistent.received(function (data) { 15 $('#AddText').append(data + '<br/>'); 16 }); 17 18 persistent.start().done(function () { 19 $('#SubmitButton').click(function () { 20 persistent.send($('#UserChat').val() + ' : ' + $('#PesanChat').val()); 21 $('#PesanChat').val('').focus(); 22 }); 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <div id="ChatUser"></div> 29 <input type="text" id="PesanChat" /> 30 <input type="button" id="SubmitButton" value="Send" /> 31 <div id="AddText"></div> 32 <input type="hidden" id="UserChat" /> 33 </body> 34 </html> 35

{Uji Coba}

Hasil dari kode di atas dapat dilihat pada gambar di bawah ini. Di awal perlu diisikan nama yang akan digunakan pada chat room.

image

Selanjutnya dapat dilihat halaman dapat digunakan untuk melakukan chat.

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: