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'