Mobile App – Chat application with SignalR

In this post, we will cover the creation of a Mobile App, part of the App Service offering. We will create a simple chat application using SignalR and host it as a Mobile App in Azure.

Prerequisites

  1. As always an active Azure account
  2. Visual Studio Professional 2013 with at least v2.5.1 of the Azure SDK installed, or later.

Create Mobile App

We will start by creating the Mobile App back end in Azure.

From the Azure Portal click New -> Web + Mobile -> Mobile App

img1

In the Mobile App blade

  • Fill in the name for the app
  • Create new resource group
  • Create new hosting plan
  • Select pricing tier
  • In package settings, create the database

img2

Confirm all the changes and click create.

You should see it starting deployment in the notifications window.  

Create New HTML App

In Visual Studio, create an ASP.NET Web Application.

img3

In the next dialog select empty project and click OK

img4

In Solution Explorer, right-click the project and select Add | SignalR Hub Class (v2).

Name the class ChatHub.cs and add it to the project.

This step creates the ChatHub class and adds to the project a set of script files and assembly references that support SignalR.  

img5

Copy the following the ChatHub class

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace MyChatApp
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

In Solution Explorer, right-click the project, then click Add | OWIN Startup Class. Name the new class Startup and click OK.

img6 Replace the code in the new ChatHub class with the following code.

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(MyChatApp.Startup))]
namespace MyChatApp
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

In Solution Explorer, right-click the project. Click Add | HTML Page. Name the new page index.html And set it as a startup page.

Overwrite the content of the file with the following.

<!DOCTYPE html>
<html>
<head>
    <title>My Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

Save and build the project. Publish To Azure In Visual Studio, select Build > Publish > SignalR Chat. In the  Publish Web dialog, select Windows Azure Web Apps.

img7

Next select the Mobile App that we created earlier

img8

Click Publish on the next page

img9

Enable Web Socket in Mobile App

Web Sockets needs to be explicitly enabled in your Mobile App to be used in a SignalR application.

Navigate the Mobile App code > settings >application settings and turn on web sockets and save.

img10

Test Your Application

Copy the application URL into the browser; you will be prompted to enter your name.

img11

Open additional browsers and start chatting.

img12

Enjoy!!!

One Response

  1. Zjihiro June 20, 2016 Reply

Leave a Reply