2012-09-30 10 views
8

Ich bin ziemlich neu in SignalR. Meine erste Aufgabe ist es, einfache Chat-App zu machen.Wie bekomme ich eine Liste von verbundenen Clients auf SignalR

Ich habe gelesen und gelesen und schließlich eine Seite gemacht, wo Sie kommen und plaudern und es funktioniert gut.

Jetzt muss ich eine Liste der verbundenen Clients anzeigen. Um dies zu erreichen, habe ich den folgenden Code geschrieben. Das ist mein 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; 
    } 


} 

Und das ist es ... Was nun ?? Gehe ich in die richtige Richtung? Wenn ich dann wie diese Methoden aus der Sicht aufrufen soll? Einige gute Vorschläge werden mir wirklich helfen. prost

EDIT:

ich das folgende Skript hinzugefügt haben, wenn die Nabe starten

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

     }); 

Dies ist die Methode, die die Client-Namen in meinem Hub zurück

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

        }).ToList(); 

     Clients.loadUsers(data); 
     return data; 
    } 

Im Firebug kann ich sehen, dass es etwas wie folgt zurückgibt;

{"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} 

Aber wie würde ich das aus meiner Sicht anzeigen ??

EDIT:

dies die vollständige Sicht bisher

<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: nichts sehen hier:. $ ('# Clientlist') html (data.Result [0] .Vollständiger Name); Firebug sagt: 'Daten ist nicht definiert'

Antwort

6

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; 
} 

Sobald Hub gestartet Chats die öffentlichen Funktionen alle Ihre Hub als JavaScript-Funktionen haben würde. Dies erzeugt der Signalgeber/die Hubs mit der besten verfügbaren Verbindungsmethode zwischen Client und Server.

Umgekehrt hat Ihr C# Hub Zugriff auf alle Javascripts-Funktionen, die Sie eingerichtet haben, z.

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

ps - Sie könnten auch erwägen OnConnectedAsync verwenden, aber natürlich können Sie immer noch diese bestehen bleiben. Ich warte auch auf volle Unterstützung für Webfarm-Unterstützung mit SQL, die in der pipeline ist.

+0

Hallo, Danke für die Antwort. Ich habe genau das versucht, was Sie gesagt haben. Meine Controller-Methode gibt '5' zurück und ich habe diesen Code in meine Ansicht geschrieben. $ .connection.hub.start (function() {connectedUserCount = chat.getConnectedUsersCount(); $ ('# clientList'). append ('

  • ' + connectedUserCount + '
  • ');}) ;. . Aber es gibt etwas zurück "[object Object]" ... Irgendeine Idee, was schief gelaufen sein könnte ?? – kandroid

    +0

    Ich werde die Antwort für einige dieser jetzt aktualisieren – dove

    +0

    Dieses Objekt ist Ihre Liste.Siehe update um zu antworten und vielleicht versuche einfach mit dem Zurückgeben eines einfachen poco oder Wertes zurück an den Client für Anfänger. Es braucht ein wenig, um die Funktionsweise zu verstehen. (ps - meine ursprüngliche Antwort hatte zwei Fehler darin und kann noch, wie ich Pseudo schreibe dies, nicht laufen) – dove

    Verwandte Themen