How to get a list of connected clients on SignalR

Question

I am quite new to SignalR. My first assignment is to make simple chat app.

I have been browsing and reading and finally made a page where you come and chat and it works fine.

Now I need to show a list of connected clients. To achieve this I have wrote the following code. This is my HUB.

public class ChatHub: Hub
{

    chatEntities dc = new chatEntities();
    public void Send(string message,string clientName)
    {
        Clients.addMessage(message,clientName);

    }

    // I want to save the user into my database, when they join 
    public void Joined(string userId,string userName)
    {

        CurrentChattingUsers cu = new CurrentChattingUsers();
        cu.ConnectionId = userId;
        cu.UserName = userName;

        dc.CurrentChattingUsers.AddObject(cu);
        dc.SaveChanges();


       Clients.joins(userId, userName);
    }

    // This will return a list of connected user from my db table.
    public List<ClientModel> GetConnectedUsers()
    {
        var query = (from k in dc.CurrentChattingUsers
                     select new ClientModel()
                     {
                         FullName = k.UserName,
                         UserId = k.ConnectionId
                     }).ToList();
        return query;
    }   


}

And thats it...Now what?? Am I going to the right direction? If, I am then how to call this methods from the view? Some good suggestions will really help me out. cheers

EDIT:

I have added the following script when the hub start

$.connection.hub.start(function () {
            chat.getConnectedUsers();

        });

This is the method that returns the client names in my Hub

  public List<ClientModel> GetConnectedUsers()
    {
        var data = (from k in dc.Users
                     select new ClientModel()
                     {
                         FullName = k.UserName

                     }).ToList();

         Clients.loadUsers(data);
        return data;
    }

in firebug i can see it returns something as follows;

{"State":{},"Result":[{"FullName":"mokarom","UserId":null},  {"FullName":"aka8000","UserId":null},{"FullName":"johnnyno5","UserId":null},{"FullName":"reza","UserId":null},{"FullName":"amyo","UserId":null},{"FullName":"rezatech","UserId":null}],"Id":"0","Error":null,"StackTrace":null}

But, how would I display that in my view??

EDIT:

this the complete view so far

<script type="text/javascript">
    var chat;
    var myClientName
    $(document).ready(function(){

      myClientName = '@Request.Cookies["ChatterName"].Value';


        // Created proxy
        chat = $.connection.chatHub;
        // Assign a function to be called by the server
        chat.addMessage = onAddMessage;

        // Register a function with the button click
        $("#broadcast").click(onBroadcast);


        $('#message').keydown(function (e) {
            if (e.which == 13) { //Enter
                e.preventDefault();

                onBroadcast();

            }
        });

        // Start the connection
        $.connection.hub.start(function () {
           chat.getConnectedUsers();

        });

        chat.loadUsers = function (data) {
            loadUsers(data); 

         };
    });


    function onAddMessage(message,clientName) {
        // Add the message to the list
        $('#messages').append('<div class="chatterName">' + clientName + ' </div><div class="chatterMessage"> ' + message + '</div><div class="clear">');

    }
    function onBroadcast() {
        // Call the chat method on the server
        chat.send($('#message').val(), myClientName);
        $('#message').val('');
    }
    function loadUsers(data) {
        $('#clientList').html(data.Result[0].FullName);

    }
</script>

Problem: don't see anything here: $('#clientList').html(data.Result[0].FullName); firebug says 'data is not defined'

Answer 1

JavaScript

var chats = $.connection.chatHub;
chats.loadUsers = function (data) { loadUsers(data); };
var connectedUserCount = 0;

$.connection.hub.start(function () 
         { chats.getConnectedUsers(); });

function loadUsers =  = function (data) {
  console.log(data); //so you can see your data in firebug.etc
            //which signal r will have converted to json so you could try
  var numberOfUsers = data.length;  
}

Once hub is started chats would have all the public functions of your hub available as javascript functions. This is what the signalr/hubs creates using the best available connection method between client and server.

In reverse your C# hub will have access to any javascripts functions you setup, e.g.

Clients.loadUsers(query);  
//add this to you server side just before you return query

ps - you might also consider using OnConnectedAsync, though of course you might still persist these. I'm also waiting for full support for web farm support using sql, which is in the pipeline.