Presenting Data from an IOT Device onto a Azure WebSite

  • Article
In this blog I want to expand on the Windows Core IOT project, by presenting the data which is presently being stored in Microsoft Azure  IoT Hub data and presenting this live to a Azure Website.
 
Step 1 Create a Service Bus Consumer Group in Microsoft Azure

In order to allow several consumer applications to read data from the IoT Hub independently at their own pace a Consumer Group must be configured for each one. If all of the consumer applications (the Device Explorer, Stream Analytics / Power BI, the Web site you will configure in the next section) read the data from the default consumer group, one application will block the others.

To create a new Consumer Group for the IoT Hub that will be used by the Stream Analytics job you are about to configure, follow these steps:

  • Open the Azure Portal (https://portal.azure.com/), and select the IoT Hub you created.
  • From the settings blade, click on Messaging
  • At the bottom of the Messaging blade, type the name of the new Consumer Group “WebSiteI” and “local” 
  • From the top menu, click on the Save icon

 

image
Setting the data source

The website needs two different consumer groups:

    • website
    • local (used when debugging)

image

  1. Also take note of the Event Hub-compatible name and Event Hub-compatible endpoint values in the Messaging blade

  2. Browse to the Assets/WebSite folder and open the Web Site project (ConnectTheDotsWebSite.sln) in Visual Studio.

  3. Edit the Web.config file and add the corresponding values for the following keys:

    • Microsoft.ServiceBus.EventHubDevices: Event hub-compatible name.

    • Microsoft.ServiceBus.ConnectionStringDevices: Event hub-compatible connection string which is composed by the Event hub-compatible endpoint and the iothubowner Shared access policy Primary Key

      image image
      Microsoft.Storage.ConnectionString: Storage account endpoint, in this case use the storage account name and storage account primary key to complete the endpoint.

  4. Deploy the website to an Azure Web Site. To do this, perform the following steps.

    1. In Visual Studio, right-click on the project name and select Publish.

    2. Select Microsoft Azure Web Apps.

      Selecting Publish Target

      Selecting Publish target

    3. Click New and use the following configuration.

      • Web App name: Pick something unique.
      • App Service plan: Select an App Service plan in the same region used for Stream Analytics or create a new one using that region.
      • Region: Pick same region as you used for Stream Analytics.
      • Database server: No database.

    4. Click Create. After some time the website will be created in Azure.

      Creating a New Web App

      Creating a new Web App on Microsoft Azure

    5. Click Publish.

      Note: You might need to install WebDeploy extension if you are having an error stating that the Web deployment task failed. You can find WebDeploy here.

  5. After you deployed the site, it is required that you enable Web sockets. To do this, perform the following steps:

    1. Browse to https://portal.azure.com and select your _Azure Web App.

    2. Click All settings.

    3. Click Applicattion settings

    4. Then set Web sockets to On and click Save.

      image

      Enabling Web Sockets in your website

  6. Browse to your recently deployed Web Application. You will see something like in the following screenshot. There will be 2 real-time graphics representing the values read from the temperature and light sensors. Take into account that the Universal app must be running and sending information to the IoT Hub in order to see the graphics.

image

  1. Web Site Consuming the IoT Hub data

  2. Note: At the bottom of the page you should see “Connected.”. If you see “ERROR undefined” you likely didn’t enable WebSockets for the Azure Web Site.

    check step 5

If your interested in learning more about IOT Hub and Raspberry head over to  https://github.com/MsftImagine and there are number of Repos which contain IOT resources.