ASP.NET SignalR : Hub Communication Model Examples Part 2 | M Reza Faisal

reza

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

ASP.NET SignalR : Hub Communication Model Examples Part 2

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

Pada bagian ini akan dibuat aplikasi chat room sederhana dengan memanfaatkan SignalR Hub Class (v2) yang telah dibuat sebelumnya. Untuk membuat hal tersebut maka perlu ditambahkan sebuah method pada tersebut. Selain itu juga akan diterangkan beberapa hal yang dimiliki oleh class SignalR Hub Class (v2).

{Menulis Kode Program}

Seperti yang dilihat dari kode program 8 dapat dilihat bahwa class HelloWorld merupakan turunan dari class Hub, hal itu memungkinkan class anak memiliki kemampuan dari induknya seperti method atau property. Selain itu juga memungkinkan class anak ini memodifikasi kemampuan yang dimiliki induknya seperti melakukan override method yang dimiliki induknya. Jika diperhatikan pada class induk terdapat method yang dapat dilakukan override seperti yang terlihat pada gambar di bawah ini, method yang berfungsi untuk menangani event yang terjadi.

image

Dari daftar di atas dapat dilihat ada method yang berfungsi sebagai event handler seperti :

  1. OnConnected, dieksekusi jika client terkoneksi ke server.
  2. OnDisconnected, dieksekusi jika client terputus koneksinya.
  3. OnReconnected, dieksekusi jika client melakan koneksi ulang

Pada class Hub HelloWorld ini akan ditambahkan override method OnConnected dan menambahkan method Send sebagai salah satu fungsi pada aplikasi ChatRoom ini.

Berikut ini adalah isi file class Hub HelloWorld yang telah dimodifikasi.

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Microsoft.AspNet.SignalR; 6 using System.Threading.Tasks; 7 8 namespace HelloSignalR 9 { 10 public class HelloWorld : Hub 11 { 12 public void Hello() 13 { 14 Clients.All.hello(); 15 } 16 17 public void Send(string user, string pesan) 18 { 19 Clients.All.show(user, pesan); 20 } 21 22 public override Task OnConnected() 23 { 24 return Clients.All.connected(); 25 } 26 } 27 } 28

Selanjutnya akan ditambahkan halaman baru dengan nama chatroom.html.

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 hub = $.connection.helloWorld; 13 14 hub.client.connected = function () { 15 alert('User baru bergabung.'); 16 } 17 18 hub.client.show = function (user, pesan) { 19 $('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br />'); 20 } 21 22 $.connection.hub.start().done(function () { 23 $('#SubmitButton').click(function () { 24 hub.server.send($('#UserChat').val(), $('#PesanChat').val()); 25 $('#PesanChat').val('').focus(); 26 }); 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <div id="ChatUser"></div> 33 <input type="text" id="PesanChat" /> 34 <input type="button" id="SubmitButton" value="Send" /> 35 <div id="AddText"></div> 36 <input type="hidden" id="UserChat" /> 37 </body> 38 </html> 39

{Uji Coba}

Setelah halaman chatroom.html dieksekusi dapat dilihat tampilan seperti berikut ini.

image

Dan setelah itu akan dapat dilihat respon seperti pada gambar di bawah ini.

image

Selanjutnya user dapat mengetikkan pesan dan klik tombol Send untuk mengirim pesan pada chatroom. Untuk menguji halaman ini digunakan 3 window web browser yaitu 2 window menggunakan Internet Explorer dan sisanya menggunakan Mozilla Firefox. Setiap window akan mengetikkan nama user yang berbeda. Maka dapat dilihat seperti pada gambar di bawah ini hasil pembicaraan 3 orang user pada chat room.

image

Source code dari contoh di atas dapat dilihat secara lengkap di link berikut ini : https://github.com/rezafaisal/ASPNETSignalR.

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: