CODEWITHSUNDEEP
c#asp.netsignalr
wotney
wotney

Reputation: 1046

Push messages from code behind to client using SignalR

I am importing records from an excel spreadsheet. I want to update the client screen with the progress of each record. I was advised that SignalR is the way ahead.

I've started with the ChatHub example and stripped it back a bit.

Edit... It appears that the broadcastMessage function is working, but is behaving strangely. Here's a short video of what is happening: https://www.youtube.com/watch?v=wRqiyaQ2hD0

ASPX Page

<form id="form2" runat="server">

    <ul id="progressReport"></ul>

    <asp:Button Text="Push message" ID="btn" OnClick="btn_Click" runat="server" />

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.0.3.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. 
                $('#progressReport').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };

            // Start the connection.
            $.connection.hub.start().done(function () {
                chat.server.send($('#displayname').val(), $('#message').val());
            });
        });
    </script>
</form>

ASPX.CS

using SignalRChat;
using System;

namespace SignalR_Test
{
    public partial class form2 : System.Web.UI.Page
    {
        protected void btn_Click(object sender, EventArgs e)
        {
            ChatHub ch = new ChatHub();
            for ( int i = 0; i <= 10; i++)
            {
                ch.Send("Code Behind", i +" has been imported");
            }
        }
    }
}

ChatHub.CS

using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
            // Call the broadcastMessage method to update clients.
            context.Clients.All.broadcastMessage(name, message);
        }
    }
}

Upvotes: 0

Views: 2818

Answers (2)

SOfanatic
SOfanatic

Reputation: 5573

Try adding this to your aspx page and check if it's logging the calls in the javascript console:

$.connection.hub.logging = true;
$.connection.hub.start();

Your class is called ChatHub and you are doing a connection.chatHub in your client side (notice the lowercase c vs uppercase). Try adding a HubName attribute to your Hub class:

[HubName("chatHub")]
public class ChatHub : Hub

Also, try adding ~/ to your script src:

<script src="~/signalr/hubs"></script>

Upvotes: 2

st4hoo
st4hoo

Reputation: 2204

Are you missing required Startup class? See example here.

Do JS scripts versions(jquery.signalR-2.0.3.min.js, jquery-1.8.2.min.js) match with scripts that you have in 'Scripts' directory?

Upvotes: 0

Related Questions