How to connect to a local web service from the Windows Phone 8 Emulator

May 10, 2014

This topic describes how to connect from a Windows Phone app running on the Windows Phone 8 Emulator to a WCF web service running locally on your development computer.

When you create a WCF web service in Visual Studio, by default the service is hosted in IIS Express and only accepts connections at http://localhost/. Apps that target Windows Phone OS 7.1 can connect to the development computer as localhost because the Windows Phone 7.1 emulator uses the network connection of the development computer. The Windows Phone 8 Emulator, however, configures itself as a separate device on the network. As a result, an app running on the Windows Phone 8 Emulator can’t connect to the development computer as localhost.

Before you can connect successfully from the emulator to the local web service, you have to make two changes:

  • You have to configure the local web service and web server to accept connections from other devices on the network.

  • You have to configure the service reference in the Windows Phone app to connect to the service by using the IP address of the development computer on which the service is running.

Important noteImportant Note:

On a corporate domain, the emulator appears as a separate network device that is not joined to the domain. As a result, you may also have to get an exception from your IT department before the emulator can connect to services that are running on the domain-joined development computer.

This topic contains the following sections.

This section provides a quick summary of the solution for those who are familiar with WCF web services and with configuring and hosting services in IIS or IIS Express. For more detailed steps and screenshots, see the subsequent sections and procedures in this topic.

Quick solution with IIS Express

  1. Create a firewall exception to allow HTTP requests through the firewall on the port that IIS Express is using.

  2. Get the IP address of the development computer, if necessary, by running ipconfig.

  3. Find the IIS Express configuration file, applicationhost.config, in the folder %USERPROFILE%\Documents\IISExpress\config\. The USERPROFILE environment variable typically has a value of C:\Users\<your user name>.

  4. Open applicationhost.config with Notepad or another text editor and make the following changes.

    1. Find the site element for the web service, WebServiceForTesting.

      If you don’t see the site element for the web service, you have to deploy the service at least one time to create the element.

    2. Within the bindings section of the site element, copy the binding element and paste a copy directly below the existing binding element to create a second binding.

    3. In the new binding element, replace localhost with the computer’s IP address.

    4. Save the changes.

  5. Run Visual Studio as administrator and open the Visual Studio solution.

  6. In the phone app project, remove the service reference to the service if you have previously added it. Add a new service reference to the reconfigured web service.

    1. In the Add Service Reference dialog box, in the Address box, replace localhost with the IP address of your development computer.

    2. Click Go.

      The second binding for the service in the WCF project is discovered and displayed.

    3. Click OK.

      A new service reference that uses the IP address of the development computer is added to the Windows Phone project.

Quick solution with IIS

  1. Install the Windows feature HTTP Activation for WCF services.

  2. Create a firewall exception to allow World Wide Web Services (HTTP) through the firewall.

  3. Get the IP address of the development computer, if necessary, by running ipconfig.

  4. Run Visual Studio as administrator and open the Visual Studio solution.

  5. In the web service project, on the Web page of project properties, make the following changes:

    1. Deselect the Use IIS Express option.

    2. In the Url text box, replace localhost with the IP address of the development computer.

    3. Click the Create Virtual Directory button.

    4. Save the changes.

  6. In the phone app project, remove the service reference to the service if you have previously added it. Add a new service reference to the reconfigured web service. Notice that the Url displayed in the Add Service Reference dialog box includes the IP address of the development computer.

The Visual Studio solution described in this topic requires the Professional edition or higher of Visual Studio. The Express editions of Visual Studio do not include full support for WCF projects.

To set up the Windows Phone app project and the Visual Studio solution

  1. In Visual Studio 2012 Professional or higher, create a new Windows Phone app. In this test, the project is named PhoneAppForTesting. Give the solution a different name than the project, since the solution will contain two projects. In this test, the solution is named ConnectToLocalWebService. Click OK.

    New project dialog box
  2. In the New Windows Phone Application dialog box, select Windows Phone OS 8.0 as the target version. Click OK. The new solution and new Windows Phone project are created.

    New project version dialog box

To set up the WCF web service project

  1. In Solution Explorer, right-click on the solution and select Add, then select New Project.

  2. In the Add New Project dialog box, in the list of installed templates, select the WCF category.

  3. In the list of WCF project templates, select the WCF Service Application template. In this test, the project is called WebServiceForTesting. Click OK.

    The solution described in this topic requires the WCF Service Application project type. A project of type WCF Service Library runs in a different host process, and cannot be reconfigured as described in this solution.

    New WCF project dialog box

    The new WCF service project is added to the solution.

    Solution Explorer with two new projects
  4. In Solution Explorer, right-click on the service project and select Properties.

  5. In Project Designer, click Web to open the page of web settings. The settings indicate that the project is configured by default to use IIS Express to host the service, and to connect to the service with a localhost URL.

    Project settings using IIS Express and localhost
  6. Build the empty web service project. If you skip this step, you may get an error when you try to add a service reference to the Windows Phone project.

  7. In Solution Explorer, in the web service project, right-click on Service.svc and select View in Browser. Your web browser opens and displays a page indicating that the service is recognized and available.

    Browser page displaying the service

To configure the phone app project for testing the web service

  1. In Solution Explorer, right-click on the Windows Phone app project and select Add Service Reference.

  2. In the Add Service Reference dialog box, click Discover, then click Services in Solution.

    Add Service Reference dialog box
  3. In the Add Service Reference dialog box, click OK. A service reference is added to the Windows Phone project in the Service References folder in Solution Explorer.

  4. On MainPage.xaml, add a TextBlock control to display the result returned by the web service. In this test, the TextBlock is named tbWebServiceResult.

            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <TextBlock x:Name="tbWebServiceResult" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="48"/>
            </Grid>
    
  5. Open the MainPage.xaml.cs code file and add the following code. This code tests the web service by calling its GetData method, which is created by default in a new service project.

            private void TestWebService()
            {
                int testValue = 7;
    
                ServiceReference1.Service1Client clientForTesting = new ServiceReference1.Service1Client();
                clientForTesting.GetDataCompleted += new EventHandler<ServiceReference1.GetDataCompletedEventArgs>(TestCallback);
                clientForTesting.GetDataAsync(testValue);
            }
    
            private void TestCallback(object sender, ServiceReference1.GetDataCompletedEventArgs e)
            {
                this.tbWebServiceResult.Text = e.Result;
            }
    
  6. In the MainPage constructor, after InitializeComponent(), add a line of code to call the TestWebService() method.

            // Constructor
            public MainPage()
            {
                InitializeComponent();
    
                TestWebService();
            }
    

To test connecting from the app running on the emulator to the local web service before configuring the solution

  1. Press F5 to run the project in the emulator. The app tries to connect to the web service running on the development computer with localhost. After a few seconds, the app fails with an exception. You typically see a CommunicationException because the app can’t find the web service at localhost.

    Communication Exception error message

    If you click the View Detail link, the View Detail dialog box opens and displays the following explanation.

    The remote server returned an error: NotFound.

    Communication Exception error details
  2. Press Shift-F5 to stop debugging.

To solve the connection problem caused by the localhost address, you have to configure the web service project and IIS Express to accept connections from other devices on the network. These devices connect to the service by using the IP address of the development computer on which the service is running.

To create a firewall exception for HTTP requests to IIS Express

  1. From the Windows Start screen, search for Windows Firewall. Click to run the program.

  2. On the Windows Firewall screen, click Advanced settings.

  3. On the Windows Firewall with Advanced Security screen, select Inbound Rules. Then click New Rule.

  4. On the Rule Type page of the New Inbound Rule Wizard, select Port. Then click Next.

  5. On the Protocols and Ports page, enter the port number that IIS Express is using in the Specific local ports field. Then click Next.

    You can find the port number on the Web page of project properties in Visual Studio.

    Project settings using IIS Express and localhost
  6. On the Action page, select Allow the connection. Then click Next.

  7. On the Profile page, select Private and, if applicable, Domain. Do not select Public. Then click Next.

  8. On the Name page, type a name for the rule – for example, Local web service for testing. Then click Finish.

To configure the service and IIS Express to accept connections from the network

  1. On the development computer, open a Command Prompt window and run ipconfig to get your IP address.

  2. From the output of ipconfig, write down your IP address from the line of output captioned IPv4 Address.

  3. Be aware of the following limitations.

    • It may appear that you can easily change the address for the service on the Web page of project properties, where the Url of the service is displayed in an editable textbox. However, if you replace the displayed Url with http://<ip address>/, Visual Studio prompts you to create a virtual directory. If you click Yes, this process fails with an error.

      Project settings using IIS Express and localhost
    • It may also appear that you can replace the Url by closing the solution and changing the IISUrl element manually in the .csproj project file. However, if you replace the value of the IISUrl element manually in the .csproj project file, you cannot reopen the project in Visual Studio. The error message includes the following statement:

      You must specify “localhost” for the server name.

  4. Find the IIS Express configuration file, applicationhost.config, in the following folder. The USERPROFILE environment variable typically has a value of C:\Users\<your user name>.

    %USERPROFILE%\Documents\IISExpress\config\

  5. Open applicationhost.config with Notepad or another text editor.

  6. In the configuration file, find the site element for the web service, WebServiceForTesting. The XML elements in the configuration file have the following hierarchy:

    <configuration>
        <application Host>
            <sites>
                <site></site>
            </sites>
        </application Host>
    </configuration>
    

    The site element for the web service, WebServiceForTesting, has content similar to the following. If you don’t see the site element for the web service, you have to deploy the service at least one time to create the element.

       <site name="WebServiceForTesting" id="2">
         <application path="/" applicationPool="Clr4IntegratedAppPool">
           <virtualDirectory path="/" physicalPath="D:\My Projects\ConnectToLocalWebService\WebServiceForTesting" />
         </application>
         <bindings>
           <binding protocol="http" bindingInformation="*:60661:localhost" />
         </bindings>
       </site>
    
  7. Within the bindings section of the site element, copy the binding element and paste a copy directly below the existing binding element to create a second binding.

    Although you cannot remove the default localhost binding, you can create an additional binding that uses the computer’s IP address.

  8. In the new binding element, replace localhost with the computer’s IP address. The bindings section now has content similar to the following:

         <bindings>
           <binding protocol="http" bindingInformation="*:60661:localhost" />
           <binding protocol="http" bindingInformation="*:60661:<ip address>" />
         </bindings>
    
    
  9. Save the changed file.

    You do not have to change the Url on the Web page of project properties, which continues to display localhost.

    To verify that the service reference in the phone app project is using the IP address for the web service, check the endpoint element in the ServiceReferences.ClientConfig file.

  10. If IIS Express is still running in the system tray, right-click its icon and select Exit. You have to restart the web server to load the changed configuration file.

  11. If Visual Studio is still open, close Visual Studio and open it again by selecting Run as administrator. Reopen the solution. To register and connect to the web service at an address other than localhost, you have to run Visual Studio with administrator privileges.

  12. Browse the service again to restart IIS Express.

  13. Right-click on the IIS Express icon in the system tray and select Show All Applications. The IIS Express dialog box opens and shows the 2 bindings for the web service in the solution.

    IIS Express applications list with 2 bindings

To configure the Windows Phone app to connect to IIS Express with an IP address

  1. In Visual Studio, in the Windows Phone project, right-click the service reference in the Service References folder and select Delete. This step removes the service reference that uses the localhost address.

  2. In the Add Service Reference dialog box, click Discover, then click Services in Solution.

    Add Service Reference dialog box
  3. In the Add Service Reference dialog box, in the Address box, replace localhost with the IP address of your development computer. Then click Go.

  4. In the Add Service Reference dialog box, click OK. A new service reference that uses the IP address of the development computer is added to the Windows Phone project.

There are fewer steps to configure the solution when hosting the service with Internet Information Services (IIS) than when hosting the service with IIS Express.

The following procedure assumes that IIS is installed and running on your development computer.

To install HTTP Activation for WCF services

  1. From the Windows Start screen, search for Turn Windows features on or off. Click to run the program.

  2. In the Windows Features dialog box, expand .NET Framework 4.5 Advanced Services, then expand WCF Services.

  3. Under WCF Services, check the box next to HTTP Activation. Click OK to install this feature.

    Installing the HTTP Activation feature

To create a firewall exception for HTTP requests to IIS

  1. From the Windows Start screen, search for Allow an app through Windows Firewall. Click to run the program.

  2. In the Allowed apps dialog box, click Change settings.

  3. In the Allowed apps and features list, check the box next to World Wide Web Services (HTTP) to create a firewall exception for calls to the web service. Click OK.

    Firewall exception for World Wide Web service

To configure the service and IIS to accept connections from the network

  1. Start or restart Visual Studio with the Run as administrator option and reopen the ConnectToLocalWebService solution.

  2. In the WCF service project, right-click on the project and select Properties.

  3. In Project Designer, click Web to open the page of web settings.

  4. Deselect the Use IIS Express option. The Url displayed in the Project Url text box changes.

  5. In the Url text box, replace localhost with the IP address of the development computer.

    Service properties when hosted by IIS
  6. Click the Create Virtual Directory button. After a few seconds, a message indicates that the virtual directory has been created.

  7. Save the changes made in Project Designer.

To configure the Windows Phone app to connect to IIS with an IP address

  1. In Visual Studio, in the Windows Phone project, right-click the service reference in the Service References folder and select Delete. This step removes the existing service reference.

  2. In the Add Service Reference dialog box, click Discover, then click Services in Solution. The service in the WCF project is discovered and displayed. Notice that the Url includes the IP address of the development computer.

    Discovering the service when hosted by IIS
  3. In the Add Service Reference dialog box, click OK. A new service reference that uses the IP address of the development computer is added to the Windows Phone project

After configuring the solution, retest your app. Now the app successfully finds and connects to the WCF web service running locally on the development computer.

To test connecting from the app running on the emulator to the local web service after configuring the solution

  1. Press F5 to run the project in the emulator. The emulator starts and runs the app. After a few seconds, the result from the web service is displayed.

    App running successfully in the emulator
  2. Press Shift-F5 to stop debugging.

Internet Explorer running on Windows Phone 8 cannot display responses that it receives from a web service in SOAP or XML format. If you use the browser on your phone to browse to a web service that sends responses in SOAP or XML format, the browser displays a blank screen.

To find answers and solve problems as you work with the tools in Windows Phone SDK 8.0, visit the Tools for Windows Phone Development forum. To see all the forums for Windows Phone development, visit Windows Phone Development Forums. To review other support options, visit MSDN Troubleshooting and Support.

Show:
© 2014 Microsoft