Home > Programming, Silverlight > Creating a Silverlight 4 Duplex Application

Creating a Silverlight 4 Duplex Application


This post assumes you have basic experience with C#, the VS 2010 IDE and the .NET Framework.

Source code: here

Requirements: Windows 7, IIS 7.5, VS 2010 Professional, Ultimate or Express, Silverlight 4 Tools for VS 2010 and…a learning mood ๐Ÿ™‚

First of all: What is duplex?

Duplex basically means having bidirectional communication between two parts.

Both parts can send and receive messages at the same time.

How can this be achieved in a Silverlight application?

0. You need to start up VS 2010 in administrator mode. Right click your VS 2010 shortcut in the Start Menu or wherever you have it and choose Run As Administrator.

1. Create a new project -> Silverlight Application. I named mine TestDuplex.

Then click OK

2. In the following screen click OK:

3. The starting solution should look like this:

<UserControl x:Class="TestDuplex.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">
  </Grid>

</UserControl>

4. I usually remove the Test aspx page and rename the Test html page to Default.html If you do so, make sure that you right click the Default.html page and then select Set as Start Page.

5. Right click on TestDuplex.Web project and Add New Item -> Silverlight-enabled WCF Service.

I named mine DuplexService

6. Now the solution should look like this:

7. Now comes the interesting part. To enable duplex communication server side you need to define a CallbackContract. This is essentially an interface through which we can “push” notifications to the client.

So we create a interface in the DuplexService.svc.cs file. I called mine IDuplexClient and defined an operation called Notify. In the code below void Notify(string message); requires to be decorated with attribute:[OperationContract(IsOneWay = true)] to signal the fact that there is no callback for the operation.


using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;

namespace TestDuplex.Web
{
 [ServiceContract(Namespace = "", CallbackContract = (typeof(IDuplexClient)))]
 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
 public class DuplexService
 {
[OperationContract]
public void DoWork

{

return;

}

[ServiceContract]
public interface IDuplexClient
{
[OperationContract(IsOneWay = true)]
void Notify(string message);
}
}

8. Next we do some changes to the Web.config to enable TCP communication (which is more reliable than the default binary HTTP communication). Please keep in mind that at the moment the netTcpBinding for Silverlight 4 doesn’t support message security. Basically we change the customBinding which is binary HTTP to netTcpBinding and change it’s binding configuration. It should look like this:

9. Now we will define some operations for our duplex service.: Login, Logout and SendMessage. To be able to “push” data to a logged client we’ll need to get the client’s callback channel. This is achieved by calling the OperationContext.GetCallbackChannel<IDuplexClient>() method. These are the defined operations:

10. Before going further we need to publish the website with the duplex service so we can do some more configurations required to allow TCP communications to occur. Right click the TestDuplex.Web project and click Publish.

Change the publish method to File System and click the browse button for the target location. This will bring up the IIS website browser. Click Create a New Web Application and name it TestDuplex. Click Open and then click Publish.

11. Now that the website is published we need to go in and do some configurations. First make sure to copy the clientaccesspolicy.xml file to the C:\inetpub\wwwroot\ as mentioned in this blog post.

Fire up IIS Manager (or simply type inetmgr in the Start Menu).

Right click the Default Web Site and select Edit Bindings. Make sure that there is a net.tcp type binding with Binding Information 4502:* like in the screen below:

12. Drill down the Default Web Site and click on the TestDuplex site. Click on the Advanced Settings in the right Actions pane. Add to the enabled protocols net.tcp like so and then click OK:

13. Now to check that our duplex service is up and running switch to content view and click on the DuplexService.svc and then on the right Actions pane click browse. This should show you something like this:

14. We’re now done with the configuration part. Let’s head over to Visual Studio. Right click the TestDuplex Silverlight project and select Add Service Reference -> and type in the address in the screen above:

http://localhost/TestDuplex/DuplexService.svc?wsdl

Type in a name for the service reference. I named mine DuplexService and then clicked OK:

PS: don’t worry about the URI prefix not recognized error (it’s a Add Service Reference bug)

15. Next thing we need to add some UI to the app. Head over to the MainPage.xaml and change the xaml like so:

16. Go to the MainPage.xaml.cs for the page and initialize the proxy to the web service and add a NotifyReceived event handler to handle the notifications from the server like this:

17. Add the following handlers for the btnLogin click and btnSend click:

18. Right click the solution and Rebuild solution.

19. Right click the TestDuplex.Web project and select Publish then OK

20. Time to test ๐Ÿ™‚ Fire up two browser instances and point them to the IIS website address:

http://localhost/TestDuplex/Default.html

Enter names in each browser then press the login button. Now if you write a message it will appear to all users

This was a very long first post, so I’m very happy I finished it and hope that it was meaningful and helpful to all you developers out there.

Please feel free to ask questions regarding my approach and any other issues that may arise ๐Ÿ™‚

More interesting subjects coming soon ๐Ÿ˜‰

Advertisements
  1. 03/05/2010 at 11:14 pm

    Project sources will be uploaded soon

  2. Radu Olaru
    04/05/2010 at 9:27 am

    Thanks Florin for this great article. I could never get past those configurations. I have some questions though: Why exactly do you need to start Visual Studio as an admin? And why do you need to publish the application on IIS? Can’t you debug it in the Visual Studio web server?

    • 04/05/2010 at 9:43 am

      1. You need to start Visual Studio in admin mode because you can’t publish the website without being in admin mode.
      2. Debugging with the Visual Studio web server is not possible because it doesn’t support the Net.Tcp

  3. Radu Olaru
    04/05/2010 at 9:38 am

    Also, is that 4502 port the default port for net.tcp? Can we change that port? Can you please expand on the web.config part? Can you please explain a bit the sections you have added in web.config?

    • 04/05/2010 at 9:49 am

      Silverlight is limited to TCP ports 4502 – 4534. You can choose any port in that range.

  4. Diana Crisan
    12/05/2010 at 6:32 pm

    A very helpful post. Thanks!

    • 12/05/2010 at 6:37 pm

      You’re most welcome dear colleague ๐Ÿ˜‰

  5. iniside
    18/04/2011 at 9:29 pm

    I’ve fallowed your example. With exception that I changed netTcpBindning to PollingDuplexHttpBinding. Login user works fine, logout also.
    But messages are not send to server from client. I’ve check with debugger, and essentialy Silverlight client dimply do not call method SendMessage.

    No can’t see any errors. Any idea what cloud be wrong ?

  6. nicolas
    13/06/2011 at 3:53 am

    Same problem as iniside… your solution doesn’t work.

    Hope you will answer or update your post.

    Thanks, Nicolas

  1. 04/05/2010 at 10:15 pm
  2. 02/01/2011 at 2:12 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: