Working SignalR Client/Server Needs MVC Display

Question

I have a working implementation of a Windows Service acting as a SignalR client sending a message to a method on a hub in a ASP.NET MVC (server). I just need to know how to use MVC to display my received string in a View or something.

I have the following client code in a Windows Service setting up the hubConnection and calling the "Hello" method:

protected override async void OnStart(string[] args)
        {
            eventLog1.WriteEntry("In OnStart");
            try
            {
                var hubConnection = new HubConnection("http://localhost/AlphaFrontEndService/signalr", useDefaultUrl: false);
                IHubProxy alphaProxy = hubConnection.CreateHubProxy("AlphaHub");

                await hubConnection.Start();
                // Invoke method on hub
                await alphaProxy.Invoke("Hello", "Message from Service");

            }
            catch (Exception ex)
            {
                eventLog1.WriteEntry(ex.Message);
            }
        }

When I start the Service, it calls my MVC app with this hub and method:

public class AlphaHub : Hub
{
    public void Hello(string message)
    {
        // We got the string from the Windows Service 
        // using SignalR. Now need to send to the clients
        Clients.All.addNewMesssageToPage(message);
    }
}

I set up a method on the HomeController:

public ActionResult Messaging()
        {
            return View();
        }

Then the Messaging view:

@{
    ViewBag.Title = "Messaging";
}

<h2>Messaging</h2>
<ul id="messages"></ul>

@section scripts
{  
    <script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function() {
            var alpha = $.connection.alphaHub;
            // Create a function that the hub can call back to display messages
            alpha.client.addNewMessageToPage = function (message) {
                // Add the message to the page. 
                $('<li />').text(message).appendTo('#messages');
            };

            $.connection.hub.start();
        });
    </script>
}

It's not updating the browser at /Home/Messaging

I don't want to use JavaScript if that's what you're asking. I already have the SignalR part so I don't want to use the SignalR JavaScript libraries. i just want to use an MVC View ultimately in user's browsers. — user2471435
SignalR can't communicate with browsers without JavaScript. The best you can do without the JavaScript client is have the hub save incoming messages on the server, and display them next time someone requests a page from MVC. But that defeats the purpose of SignalR. If you aren't doing realtime messaging, you probably don't need SignalR. — Anthony Chu
I am doing real-time messaging from Windows service to the MVC app. I guess I need to realtime the results to the client with the JavaScript client. Can you show in an answer some code to do this with my AlphaHub? — user2471435
Oh and I already setup SignalR in the Startup class to map for the Windows Service client: app.MapSignalR("/signalr", new HubConfiguration()); — user2471435

Anthony Chu Anthony Chu · Accepted Answer · 2014-02-07T18:35:37

There are some really good examples at the SignalR site that are way better than any answer anyone can post here... http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20-and-mvc-5

But in a nutshell (taken almost verbatim from the tutorials above...

In your Razor view:

@{
    ViewBag.Title = "Chat";
}

<ul id="messages"><ul>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. (make sure the version matches your local copy) -->
    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var alpha = $.connection.alphaHub;
            // Create a function that the hub can call back to display messages.
            alpha.client.addNewMessageToPage = function (message) {
                // Add the message to the page. 
                $('<li />').text(message).appendTo('#messages');
            };
            $.connection.hub.start();
        });
    </script>
}

In your hub:

public class AlphaHub : Hub 
{ 
    public void Hello(string message) 
    { 
        Clients.All.addNewMessageToPage(message); 
    } 
}

Working SignalR Client/Server Needs MVC Display

1 Answers