{"id":1694,"date":"2015-01-05T09:17:00","date_gmt":"2015-01-05T09:17:00","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1694"},"modified":"2015-04-10T09:23:23","modified_gmt":"2015-04-10T09:23:23","slug":"asp-net-signalr-aplikasi-real-time-windows-phone","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=1694","title":{"rendered":"ASP.NET SignalR : Aplikasi Real-Time Windows Phone"},"content":{"rendered":"

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.<\/p>\n

{Membuat Project<\/em><\/strong>}<\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

Pada template pilih Blank App (Windows Phone Silverlight) kemudian isi ClientWinPhone pada kolom Name dan selanjutnya klik tombol OK.<\/p>\n

Pada window selanjutnya pilih versi OS yang digunakan yaitu Windows Phone 8.1, kemudian klik tombol OK.<\/p>\n

\"image\"<\/a><\/p>\n

Dan hasilnya dapat dilihat terdapat project berikut ini pada solution.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

\"image\"<\/a><\/p>\n

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.<\/p>\n

Hasilnya dapat dilihat pada bagian Reference yang ada pada project ini.<\/p>\n

\"image\"<\/a><\/p>\n

 <\/p>\n

{Menulis Kode<\/em><\/strong>}<\/p>\n

Langkah selanjutnya adalah menulis kode program untuk membuat aplikasi mobile chat real-time. Untuk antarmuka aplikasi ini dibuat seperti pada gambar berikut ini.<\/p>\n

\"image\"<\/a><\/p>\n

Untuk membuat antarmuka seperti itu digunakan kode berikut ini.<\/p>\n

\n
 1<\/span> <<\/span>phone:PhoneApplicationPage\n<\/span> 2<\/span>     <\/span>x:Class<\/span>="ClientWinPhone.MainPage"<\/span>\n<\/span> 3<\/span>     xmlns<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation"<\/span>\n<\/span> 4<\/span>     xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml"<\/span>\n<\/span> 5<\/span>     xmlns:phone<\/span>="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"<\/span>\n<\/span> 6<\/span>     xmlns:shell<\/span>="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"<\/span>\n<\/span> 7<\/span>     xmlns:d<\/span>="http:\/\/schemas.microsoft.com\/expression\/blend\/2008"<\/span>\n<\/span> 8<\/span>     xmlns:mc<\/span>="http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006"<\/span>\n<\/span> 9<\/span>     mc:Ignorable<\/span>="d"<\/span>\n<\/span>10<\/span>     FontFamily<\/span>="{StaticResource PhoneFontFamilyNormal}"<\/span>\n<\/span>11<\/span>     FontSize<\/span>="{StaticResource PhoneFontSizeNormal}"<\/span>\n<\/span>12<\/span>     Foreground<\/span>="{StaticResource PhoneForegroundBrush}"<\/span>\n<\/span>13<\/span>     SupportedOrientations<\/span>="Portrait"<\/span> Orientation<\/span>="Portrait"<\/span>\n<\/span>14<\/span>     shell:SystemTray.IsVisible<\/span>="True"<\/span>><\/span>\n<\/span>15<\/span>     <\/span><<\/span>phone:PhoneApplicationPage<\/span>.ApplicationBar<\/span>><\/span>\n<\/span>16<\/span>         <\/span><<\/span>shell:ApplicationBar<\/span>><\/span>\n<\/span>17<\/span>             <\/span><<\/span>shell:ApplicationBarIconButton <\/span>x:Name<\/span>="ApplicationBarIconButton_Send"<\/span> Click<\/span>="ApplicationBarIconButton_Send_Click"<\/span> IconUri<\/span>="\/Assets2\/AppBar\/new.png"<\/span> Text<\/span>="send"<\/span>\/><\/span>\n<\/span>18<\/span>         <\/span><\/<\/span>shell:ApplicationBar<\/span>><\/span>\n<\/span>19<\/span>     <\/span><\/<\/span>phone:PhoneApplicationPage.ApplicationBar<\/span>><\/span>\n<\/span>20<\/span> \n<\/span>21<\/span>     <\/span><!--<\/span>LayoutRoot is the root grid where all page content is placed<\/span>--><\/span>\n<\/span>22<\/span>     <\/span><<\/span>Grid <\/span>x:Name<\/span>="LayoutRoot"<\/span> Background<\/span>="Transparent"<\/span>><\/span>\n<\/span>23<\/span>         <\/span><<\/span>Grid<\/span>.RowDefinitions<\/span>><\/span>\n<\/span>24<\/span>             <\/span><<\/span>RowDefinition <\/span>Height<\/span>="Auto"<\/span>\/><\/span>\n<\/span>25<\/span>             <\/span><<\/span>RowDefinition <\/span>Height<\/span>="*"<\/span>\/><\/span>\n<\/span>26<\/span>         <\/span><\/<\/span>Grid.RowDefinitions<\/span>><\/span>\n<\/span>27<\/span> \n<\/span>28<\/span>         <\/span><!--<\/span>TitlePanel contains the name of the application and page title<\/span>--><\/span>\n<\/span>29<\/span>         <\/span><<\/span>StackPanel <\/span>x:Name<\/span>="TitlePanel"<\/span> Grid.Row<\/span>="0"<\/span> Margin<\/span>="12,17,0,28"<\/span>><\/span>\n<\/span>30<\/span>             <\/span><<\/span>TextBlock <\/span>Text<\/span>="SignalR"<\/span> Style<\/span>="{StaticResource PhoneTextNormalStyle}"<\/span> Margin<\/span>="12,0"<\/span>\/><\/span>\n<\/span>31<\/span>             <\/span><<\/span>TextBlock <\/span>Text<\/span>="chat room"<\/span> Margin<\/span>="9,-7,0,0"<\/span> Style<\/span>="{StaticResource PhoneTextTitle1Style}"<\/span>\/><\/span>\n<\/span>32<\/span>         <\/span><\/<\/span>StackPanel<\/span>><\/span>\n<\/span>33<\/span> \n<\/span>34<\/span>         <\/span><!--<\/span>ContentPanel - place additional content here<\/span>--><\/span>\n<\/span>35<\/span>         <\/span><<\/span>Grid <\/span>x:Name<\/span>="ContentPanel"<\/span> Grid.Row<\/span>="1"<\/span> Margin<\/span>="12,0,12,0"<\/span>><\/span>\n<\/span>36<\/span>             <\/span><<\/span>Grid<\/span>><\/span>\n<\/span>37<\/span>                 <\/span><<\/span>Grid<\/span>.RowDefinitions<\/span>><\/span>\n<\/span>38<\/span>                     <\/span><<\/span>RowDefinition <\/span>Height<\/span>="*"<\/span>\/><\/span>\n<\/span>39<\/span>                     <\/span><<\/span>RowDefinition <\/span>Height<\/span>="Auto"<\/span>\/><\/span>\n<\/span>40<\/span>                 <\/span><\/<\/span>Grid.RowDefinitions<\/span>><\/span>\n<\/span>41<\/span>                 \n<\/span>42<\/span>                 <\/span><<\/span>ListBox <\/span>x:Name<\/span>="ListBox_Chat"<\/span> Grid.Row<\/span>="0"<\/span>\/><\/span>\n<\/span>43<\/span> \n<\/span>44<\/span>                 <\/span><<\/span>TextBox <\/span>x:Name<\/span>="TextBox_Message"<\/span> Grid.Row<\/span>="1"<\/span> <\/span>\/><\/span>\n<\/span>45<\/span>             <\/span><\/<\/span>Grid<\/span>><\/span>\n<\/span>46<\/span>         <\/span><\/<\/span>Grid<\/span>><\/span>\n<\/span>47<\/span> \n<\/span>48<\/span>     <\/span><\/<\/span>Grid<\/span>><\/span>\n<\/span>49<\/span> \n<\/span>50<\/span> <\/span><\/<\/span>phone:PhoneApplicationPage<\/span>><\/span><\/div><\/pre>\n
<\/div>\n
Dan berikut ini adalah kode dari MainPage.xaml.cs.<\/p>\n
\n
 1<\/span> using<\/span> System;\n<\/span> 2<\/span> <\/span>using<\/span> System.Collections.Generic;\n<\/span> 3<\/span> <\/span>using<\/span> System.Linq;\n<\/span> 4<\/span> <\/span>using<\/span> System.Net;\n<\/span> 5<\/span> <\/span>using<\/span> System.Windows;\n<\/span> 6<\/span> <\/span>using<\/span> System.Windows.Controls;\n<\/span> 7<\/span> <\/span>using<\/span> System.Windows.Navigation;\n<\/span> 8<\/span> <\/span>using<\/span> Microsoft.Phone.Controls;\n<\/span> 9<\/span> <\/span>using<\/span> Microsoft.Phone.Shell;\n<\/span>10<\/span> <\/span>using<\/span> ClientWinPhone.Resources;\n<\/span>11<\/span> \n<\/span>12<\/span> <\/span>using<\/span> Microsoft.AspNet.SignalR.Client;\n<\/span>13<\/span> <\/span>using<\/span> System.Threading.Tasks;\n<\/span>14<\/span> \n<\/span>15<\/span> <\/span>namespace<\/span> ClientWinPhone\n<\/span>16<\/span> {\n<\/span>17<\/span>     <\/span>public<\/span> <\/span>partial<\/span> <\/span>class<\/span> MainPage : PhoneApplicationPage\n<\/span>18<\/span>     {\n<\/span>19<\/span>         HubConnection hubConnection;\n<\/span>20<\/span>         IHubProxy hubProxy;\n<\/span>21<\/span> \n<\/span>22<\/span>         <\/span>\/\/<\/span> Constructor<\/span>\n<\/span>23<\/span> <\/span>        <\/span>public<\/span> MainPage()\n<\/span>24<\/span>         {\n<\/span>25<\/span>             InitializeComponent();\n<\/span>26<\/span> \n<\/span>27<\/span>             hubConnection <\/span>=<\/span> <\/span>new<\/span> HubConnection(<\/span>"<\/span>http:\/\/localhost:30526\/signalr\/hubs<\/span>"<\/span>);\n<\/span>28<\/span>             hubProxy <\/span>=<\/span> hubConnection.CreateHubProxy(<\/span>"<\/span>HelloWorld<\/span>"<\/span>);\n<\/span>29<\/span> \n<\/span>30<\/span>             InitializeConnection();\n<\/span>31<\/span>         }\n<\/span>32<\/span> \n<\/span>33<\/span>         <\/span>private<\/span> <\/span>void<\/span> Connected()\n<\/span>34<\/span>         {\n<\/span>35<\/span>             <\/span>this<\/span>.Dispatcher.BeginInvoke(() <\/span>=><\/span> MessageBox.Show(<\/span>"<\/span>User baru bergabung.<\/span>"<\/span>));\n<\/span>36<\/span>         }\n<\/span>37<\/span> \n<\/span>38<\/span>         <\/span>private<\/span> async Task Show(<\/span>string<\/span> user, <\/span>string<\/span> pesan)\n<\/span>39<\/span>         {\n<\/span>40<\/span>             <\/span>this<\/span>.Dispatcher.BeginInvoke(() <\/span>=><\/span> ListBox_Chat.Items.Add(user <\/span>+<\/span> <\/span>"<\/span> : <\/span>"<\/span> <\/span>+<\/span> pesan));\n<\/span>41<\/span>         }\n<\/span>42<\/span> \n<\/span>43<\/span>         <\/span>private<\/span> async Task InitializeConnection()\n<\/span>44<\/span>         {\n<\/span>45<\/span>             hubProxy.On(<\/span>"<\/span>connected<\/span>"<\/span>, Connected);\n<\/span>46<\/span>             hubProxy.On<\/span><<\/span>string<\/span>, <\/span>string<\/span>><\/span>(<\/span>"<\/span>show<\/span>"<\/span>, (user, pesan) <\/span>=><\/span> Show(user, pesan));\n<\/span>47<\/span>             await hubConnection.Start();\n<\/span>48<\/span>         }\n<\/span>49<\/span> \n<\/span>50<\/span>         <\/span>private<\/span> <\/span>void<\/span> ApplicationBarIconButton_Send_Click(<\/span>object<\/span> sender, EventArgs e)\n<\/span>51<\/span>         {\n<\/span>52<\/span>             SendMassage(<\/span>"<\/span>WP User<\/span>"<\/span>, TextBox_Message.Text);\n<\/span>53<\/span>         }\n<\/span>54<\/span> \n<\/span>55<\/span>         <\/span>private<\/span> async Task SendMassage(<\/span>string<\/span> user, <\/span>string<\/span> pesan)\n<\/span>56<\/span>         {\n<\/span>57<\/span>             await hubProxy.Invoke(<\/span>"<\/span>Send<\/span>"<\/span>, user, pesan);\n<\/span>58<\/span>             TextBox_Message.Text <\/span>=<\/span> String.Empty;\n<\/span>59<\/span>         }\n<\/span>60<\/span>     }\n<\/span>61<\/span> }\n<\/span>62<\/span> <\/span><\/div><\/pre>\n
<\/div>\n
{Uji Coba<\/em><\/strong>}<\/p>\n
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.<\/p>\n
\"image\"<\/a><\/p>\n
Selamat mencoba :)<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,132,105],"class_list":["post-1694","post","type-post","status-publish","format-standard","hentry","category-softwaredev","tag-asp-net","tag-signalr","tag-windows-phone"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-rk","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1694"}],"version-history":[{"count":1,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1694\/revisions"}],"predecessor-version":[{"id":1695,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1694\/revisions\/1695"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1694"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}