none
Asp.net with SignalR cross domain RRS feed

  • Question

  • Hello,

    I am very new to SignalR technology and trying to get my feet wet. I have encountered a road block, hopefully I can get support so that I can move on. I am using VS2013 premium. What I am trying to establish is a cross domain connection so that I can use as basis for further azure development and applications. Since I used to be desktop developer, jumping into asp.net, signalR has been a learning curve for me.

    This is what have done so far:

    Create empty web application to serve to host a signalR:

    1) Add a SignalR Hub Class (v2)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    
    namespace HandleTransientState
    {
        [HubName("echo")]
        public class EchoHub : Hub
        {
            public string sayhello()
            {
                return "Hello from server!";
            }
        }
    }

    2) Add an OWIN startup class to create an entry point

    using System;
    using System.Threading.Tasks;
    using Microsoft.Owin;
    using Microsoft.Owin.Cors;
    using Owin;
    
    [assembly: OwinStartup(typeof(HandleTransientState.Startup))]
    
    namespace HandleTransientState
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.Map("/signalr", map =>
                {
                    map.UseCors(CorsOptions.AllowAll);
                    map.RunSignalR();
                });
            }
        }
    }

    3) Add an HTML page called index.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script src="Scripts/jquery.signalR-2.1.2.js"></script>
        <script src="/signalr/hubs"></script>
        <script>
    
            $(function () {
    
                var cookieName = 'name',
                    hub = $.connection.hub,
                    echo = $.connection.echo;
                $('#hi').text('This is a test');
                var hello = function () {
                    echo.state.name = $("#name").val();
                    setCookie(cookieName, echo.state.name, 7);
                    echo.server.sayhello()
                    .done(function (m) {
                        $('#hi').append($('<li/>').html(m));
                    });
                };
    
                hub.start()
                    .done(function () {
                        hello();
                    });
                $('#sayhello').click(hello);
    
            });
        </script>
    </head>
    <body>
        Name:<input id="name" type="text"/>
        <button id="sayhello">Say Hello!</button>
        <ul id="hi"></ul>
    </body>
    </html>

    When I started the project, the application ran properly.

    The issue occurred when I tried to make it cross domain. My intention is to publish the application above to Azure and have another application calling it.

    So, I created another solution, added an HTML page called index.html (have installed package Microsoft.AspNet.SignalR.JS).

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-1.6.4.js"></script>
        <script src="Scripts/jquery.signalR-2.2.0.js"></script>
        <script src="http://localhost:61772/signalr/hubs"></script>
        <script>
            $(function () {
                var echo = $.connection.echo;
                $.connection.hub.url = "http://localhost:61772/signalr";
                            echo.client.greetings = function (m) {
                    $('#messages').append($('<li/>').html(m));
                };
                echo.client.greetings('Hello from client...');
    
                var hello = function () {
                    echo.server.sayhello()
                    .done(function (m) {
                        $('#messages').append($('<li/>').html(m));
                    })
                    .failed(function () {
                        $('#messages').append($('<li>Error</>').html(m));
                    });
                };
    
                $.connection.hub.start()
                    .done(function () {
                        hello();
                    });
    
                echo.client.greetings('Hello from client after connection...');
    
             });
        </script>
    </head>
    <body>
        <ul id="messages"></ul>
    </body>
    </html>
    

    The port number is the port when I run the previous application. I ran both applications on my machine to make sure I have eliminated potential issue with firewall. The second application ran as well but does not seem to "talk" to my first application. I saw on the screen the first 'Hello' which is right before the connection and the last 'Hello' which is after the connection but it skipped the 'Hello' when it tried to connect. In other word, it never talked to the "server". What I have done incorrectly? How should I go about troubleshooting this? Please help!

    Thanks!

    Monday, April 20, 2015 7:27 PM