如何在接收到消息時使SignalR客戶端有所作爲？

Question

我想在客戶端通過SignalR集線器收到消息時做些什麼。

我已經整理了一個基本的聊天應用程序，但希望人們能夠「喜歡」聊天評論。我想這樣做的方法是在客戶端的頁面上找到聊天消息，並使用JavaScript更新它。與此同時，爲了「證明這個概念」，我只想在客戶端機器上彈出一個警告彈出窗口，讓另一個用戶看到該評論。

麻煩是，我不知道該把它放在哪裏。 （我努力尋找SignalR文檔是誠實的。）無法讓我的腦袋在這裏叫什麼。

我ChatHub類如下：

public class ChatHub : Hub 
    { 
     public void Send(string name, string message) 
     { 
     // Call the broadcastMessage method to update clients. 
     Clients.All.broadcastMessage(name, message); 
     } 

    } 

我的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. 
      var divContent = $('#discussion').html(); 
      $('#discussion').html('<div class="container">' + 
             '<div class="content">' + 
              '<p class="username">' + encodedName + '</p>' + 
              '<p class="message">' + encodedMsg + '</p>' + 
             '</div>' + 
             '<div class="slideout">' + 
              '<div class="clickme" onclick="slideMenu(this)"></div>' + 
               '<div class="slidebutton"><img id="imgid" onclick="likeButtonClick(this)" src="Images/like.png" /></div>' + 
               '<div class="slidebutton"><img onclick="commentButtonClick(this)" src="Images/comment.png" /></div>' + 
               '<div class="slidebutton" style="margin-right:0px"><img onclick="redcardButtonClick(this)" src="Images/redcard.png" /></div>' + 
             '</div>' + 
            '</div>' + divContent); 

     }; 
     // Set initial focus to message input box. 
     $('#message').focus(); 
     // Start the connection. 
     $.connection.hub.start().done(function() { 
      $('#sendmessage').click(function() { 
       // Call the Send method on the hub.     
       chat.server.send($('#lblUser').html(), $('#message').val()); 
       // Clear text box and reset focus for next comment. 
       $('#message').val('').focus(); 
      }); 
     });  

Answer 1

它需要在ChatHub的方法：

public void sayHello() 
    { 
     Clients.All.sayHello(); 
    } 

然後在JQuery的：

$(function() { 
      ... 
      chat.client.sayHello = function() { 
       alert("Hello"); 
      }; 
      ... 
      $.connection.hub.start().done(function() { 
       $('#sayHello').click(function() { 
        // Call the SayHello method on the hub.     
        chat.server.sayHello(); 
       }); 
      ... 
      } 
     });