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

reza

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

ASP.NET SignalR : Hub Communication Model Examples Part 1

Dec 11, 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 Hub.

Contoh yang akan diberikan pada posting ini adalah “Hello World” dengan menggunakan ASP.NET SignalR dengan metode komunikasi Hub.

 

{Membuat Project}

Langkah pertama yang dilakukan adalah membuat solution. Pada ebook ini dibuat solution dengan nama ASP.NET.SignalR.2.

image

Langkah selanjutnya menambahkan project web pada solution tersebut dengan cara klik kanan pada solution tersebut kemudian pilih Add > New Project. Pada windows Add New Project pilih Visual C# > Web > ASP.NET Web Application seperti pada gambar berikut.

image

Nama project ini adalah HelloSignalR yang dapat ditulis pada kolom Name, kemudian klik tombol OK. Pada window New ASP.NET Project pilih Empty kemudian klik tombol OK.

image

Maka dapat dilihat tambahan project pada solution seperti yang dilihat pada gambar berikut ini.

image

Selanjutnya klik kanan pada project HelloSignalR dan pilih Add > New Item. Pada window Add New Item pilih Web > SignalR Hub Class (v2). Pada kolom name isi nilai HelloWorld.cs sebagai nama class. Kemudian klik tombol Add.

image

Maka pada project HelloSignalR pada area Solution tambahan file class HelloHub.cs seperti berikut ini.

image

Berikut ini adalah isi dari file HelloHub.cs.

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using Microsoft.AspNet.SignalR; 6 7 namespace HelloSignalR 8 { 9 public class HelloWorld : Hub 10 { 11 public void Hello() 12 { 13 Clients.All.hello(); 14 } 15 } 16 } 17

Selain menambahkan file class tersebut juga ditambahkan folder Scripts yang berisi file-file kode Javascript yang dapat dilihat pada gambar di bawah ini.

image

File-file Javascript tersebut ditambahkan karena dibutuhkan untuk mendukung implementasi ASP.NET SignalR 2 pada aplikasi. Selain tambahan file-file Javascript tersebut, pada project juga ditambahkan beberapa namespace yang dapat dilihat pada gambar berikut ini.

image

Dari gambar di atas dapat dilihat beberapa namespace penting seperti :

  • Microsoft.AspNet.SignalR.Core.
  • Microsoft.AspNet.SignalR.SystemWeb.
  • Microsoft.Owin.
  • Microsoft.Owin.Host.SystemWeb.
  • Microsoft.Owin.Security.
  • Owin.

Selanjutnya adalah menambahkan class OWIN Startup dengan cara klik kanan pada project kemudian pilih Add > New Item. Kemudian pilih Web dan pilih OWIN Startup class. Pada kolom Name isi dengan nilai Startup.cs. Kemudian klik tombol Add.

image

Berikut ini adalah isi dari file Startup.cs.

1 using System; 2 using System.Threading.Tasks; 3 using Microsoft.Owin; 4 using Owin; 5 6 [assembly: OwinStartup(typeof(HelloSignalR.Startup))] 7 8 namespace HelloSignalR 9 { 10 public class Startup 11 { 12 public void Configuration(IAppBuilder app) 13 { 14 // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888 15 } 16 } 17 }

{Menulis Kode}

Setelah persiapan project di atas telah selesai dilakukan maka selanjutnya dilakukan modifikasi kode class-class yang telah ada.

Berikutnya adalah melakukan modifikasi class Startup.cs.

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

Pada kode di atas ditambahkan kode app.MapSignalR() ke dalam method Configuration.

Selanjutnya ditambahkan file index.html yang akan menjadi aplikasi web dan sebagai halaman client yang akan digunakan user. Aplikasi yang dibuat ini berfungsi mengirimkan pesan berupa tulisan “Hello World!” kepada seluaruh client yang terkoneksi ke server.

image

Untuk menambahkan file index.html ini dengan cara klik kanan pada project kemudian pilih Add > New Item. Kemudian pilih Web > HTML Page dan berikan nama file index.html pada kolom Name. Dan klik tombol Add. Setelah file index.html dibuat, klik kanan pada file tersebut dan pilih Set as Start Page.

image

Kemudian ubah isi file index.html menjadi seperti berikut ini.

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 src="./signalr/hubs" type="text/javascript"></script> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 var hub = $.connection.helloWorld; 11 12 hub.client.hello = function () { 13 $('#AddText').append('Hello World!<br />'); 14 } 15 16 $.connection.hub.start().done(function () { 17 $('#SubmitButton').click(function () { 18 hub.server.hello(); 19 }); 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <div id="AddText"></div> 26 <input type="button" id="SubmitButton" value="Say Hello" /> 27 </body> 28 </html> 29

{Uji Coba}

Setelah melakukan pembuatan kode di atas maka selanjutnya aplikasi web yang telah ditulis di atas diuji coba. Untuk menguji aplikasi di atas akan digunakan beberapa window web browser yang akan dijalan sekaligus. Pada uji coba ini akan digunakan dua jenis web browser yaitu Internet Explorer dan Mozilla Firefox.

Langkah pertama yang dilakukan untuk uji coba ini adalah mengeksekusi project ini dengan cara klik kanan pada project kemudian pilih Debug > Start new instance. Maka akan dapat dilihat web browser Internet Explorer seperti berikut ini.

image

Dengan alamat yang didapat dari address bar di atas maka bisa digunakan untuk dijalankan pada window web browser lainnya.

image

Pada gambar di atas dapat dilihat digunakan 4 window web browser, 2 window pada sisi sebelah kiri adalah Internet Explorer, sedangkan 2 window di sisi kanan adalah Mozilla Firefox.

Selanjutnya adalah mencoba untuk mengklik tombol Say Hello pada salah satu window yang ada untuk membuktikan bahwa pesan “Hello World!” akan dikirimkan ke seluruh window.

image

Dari hasil uji coba tersebut jika tombol pada salah satu window diklik maka tulisan “Hallo World!” akan ditampilkan pada seluruh web browser.

Souce 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: