ASP.NET SignalR : Aplikasi Real-Time Windows Phone | M Reza Faisal

reza

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

ASP.NET SignalR : Aplikasi Real-Time Windows Phone

Jan 5, 2015 by     No Comments    Posted under: I am Software Developer

Pada bagian ini akan akan dijelaskan bagaimana membuat aplikasi real-time dengan memanfaatkan model komunikasi Hub pada server dan menggunakan platform Windows Phone sebagai client.

{Membuat Project}

Untuk menambahkan project dapat dilakukan seperti cara yang sebelumnya telah dilakukan yaitu klik kanan pada Solution kemudian pilih Add > New Project. Kemudian pilh bahasa yang digunakan Visual C# > Store Apps > Windows Phone Apps.

image

Pada template pilih Blank App (Windows Phone Silverlight) kemudian isi ClientWinPhone pada kolom Name dan selanjutnya klik tombol OK.

Pada window selanjutnya pilih versi OS yang digunakan yaitu Windows Phone 8.1, kemudian klik tombol OK.

image

Dan hasilnya dapat dilihat terdapat project berikut ini pada solution.

image

Langkah selanjutnya adalah menambahkan package Microsoft ASP.NET SignalR .NET Client pada project ini dengan cara klik kanan pada project ini kemudian pilih Manage NuGet Packages.

image

Untuk mendapatkan daftar seperti di atas, ketikkan kata kunci signalr pada kolom pencarian yang ada pada sebelah kanan atas. Kemudian klik Microsoft ASP.NET SignalR .NET Client kemudian klik tombol Install. Maka akan dilakukan proses download paket tersebut dan setelah selesai maka akan dilakukan proses installasi paket tersebut.

Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.

image

 

{Menulis Kode}

Langkah selanjutnya adalah menulis kode program untuk membuat aplikasi mobile chat real-time. Untuk antarmuka aplikasi ini dibuat seperti pada gambar berikut ini.

image

Untuk membuat antarmuka seperti itu digunakan kode berikut ini.

1 <phone:PhoneApplicationPage 2 x:Class="ClientWinPhone.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 6 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 7 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 8 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 9 mc:Ignorable="d" 10 FontFamily="{StaticResource PhoneFontFamilyNormal}" 11 FontSize="{StaticResource PhoneFontSizeNormal}" 12 Foreground="{StaticResource PhoneForegroundBrush}" 13 SupportedOrientations="Portrait" Orientation="Portrait" 14 shell:SystemTray.IsVisible="True"> 15 <phone:PhoneApplicationPage.ApplicationBar> 16 <shell:ApplicationBar> 17 <shell:ApplicationBarIconButton x:Name="ApplicationBarIconButton_Send" Click="ApplicationBarIconButton_Send_Click" IconUri="/Assets2/AppBar/new.png" Text="send"/> 18 </shell:ApplicationBar> 19 </phone:PhoneApplicationPage.ApplicationBar> 20 21 <!--LayoutRoot is the root grid where all page content is placed--> 22 <Grid x:Name="LayoutRoot" Background="Transparent"> 23 <Grid.RowDefinitions> 24 <RowDefinition Height="Auto"/> 25 <RowDefinition Height="*"/> 26 </Grid.RowDefinitions> 27 28 <!--TitlePanel contains the name of the application and page title--> 29 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 30 <TextBlock Text="SignalR" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> 31 <TextBlock Text="chat room" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 32 </StackPanel> 33 34 <!--ContentPanel - place additional content here--> 35 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 36 <Grid> 37 <Grid.RowDefinitions> 38 <RowDefinition Height="*"/> 39 <RowDefinition Height="Auto"/> 40 </Grid.RowDefinitions> 41 42 <ListBox x:Name="ListBox_Chat" Grid.Row="0"/> 43 44 <TextBox x:Name="TextBox_Message" Grid.Row="1" /> 45 </Grid> 46 </Grid> 47 48 </Grid> 49 50 </phone:PhoneApplicationPage>

Dan berikut ini adalah kode dari MainPage.xaml.cs.

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Navigation; 8 using Microsoft.Phone.Controls; 9 using Microsoft.Phone.Shell; 10 using ClientWinPhone.Resources; 11 12 using Microsoft.AspNet.SignalR.Client; 13 using System.Threading.Tasks; 14 15 namespace ClientWinPhone 16 { 17 public partial class MainPage : PhoneApplicationPage 18 { 19 HubConnection hubConnection; 20 IHubProxy hubProxy; 21 22 // Constructor 23 public MainPage() 24 { 25 InitializeComponent(); 26 27 hubConnection = new HubConnection("http://localhost:30526/signalr/hubs"); 28 hubProxy = hubConnection.CreateHubProxy("HelloWorld"); 29 30 InitializeConnection(); 31 } 32 33 private void Connected() 34 { 35 this.Dispatcher.BeginInvoke(() => MessageBox.Show("User baru bergabung.")); 36 } 37 38 private async Task Show(string user, string pesan) 39 { 40 this.Dispatcher.BeginInvoke(() => ListBox_Chat.Items.Add(user + " : " + pesan)); 41 } 42 43 private async Task InitializeConnection() 44 { 45 hubProxy.On("connected", Connected); 46 hubProxy.On<string, string>("show", (user, pesan) => Show(user, pesan)); 47 await hubConnection.Start(); 48 } 49 50 private void ApplicationBarIconButton_Send_Click(object sender, EventArgs e) 51 { 52 SendMassage("WP User", TextBox_Message.Text); 53 } 54 55 private async Task SendMassage(string user, string pesan) 56 { 57 await hubProxy.Invoke("Send", user, pesan); 58 TextBox_Message.Text = String.Empty; 59 } 60 } 61 } 62

{Uji Coba}

Uji coba client ini diuji bersama dengan dua platform client lainnya yaitu web dan Windows Forms. Dapat dilihat pada gambar di bawah pesan yang dikirimkan salah satu client dapat ditampilkan pada semua client. Pada uji coba ini terlihat respon pada client Windows Phone lebih lama waktu tundanya sampai pesan ditampilkan.

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: