SignalR-jquery：$ .connection.chathub返回undefined

Question

我使用Asp.net MVC，AngularJs，SignalR和Jquery創建一個聊天應用程序。 在聊天視圖中，當我嘗試設置聊天對象的值時，它通過空值代碼引用位於括號內（var chat = $。connection.chathub;）。沒有其他功能因此而起作用。 我在這個項目中使用「Microsoft.AspNet.SignalR.2.2.2」。 jquery和signalr相關的腳本例如'jquery.signalR-2.2.2.js，jquery-ui-1.12.1.js'以及其他幾個jquery庫。

任何人都可以幫我嗎？我附上了供您參考的代碼。

@section scripts{ 
 
    @*@Scripts.Render("~/Scripts/jquery-ui-1.12.1.min.js") 
 
     @Scripts.Render("~/Scripts/jquery.signalR-2.2.2.min.js")*@ 
 

 
    <!--Reference the autogenerated SignalR hub script. --> 
 
    <script src="~/signalr/hubs"></script> 
 
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> 
 
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script> 
 

 
    <script type="text/javascript"> 
 

 

 
     $(function() { 
 
      StartChat(); 
 
     }); 
 

 

 

 
     function StartChat() { 
 
      alert('StartChat'); 
 
      var chat = $.connection.chathub; 
 
      alert('chat : ' + $.connection.chathub); 
 
      // Get logged in user 
 
      $('#UserIn').val($('#LoggedInUser').val()); 
 
      chat.client.differentName = function (name) { 
 
       return false; 
 
       // Prompts for different user name 
 
       $('#UserIn').val($('#LoggedInUser').val()); 
 
       chat.server.notify($('#UserIn').val(), $.connection.hub.id); 
 
      }; 
 

 
      chat.client.online = function (name) { 
 
       // Update list of users 
 
       if (name == $('#UserIn').val()) 
 
        $('#onlineusers').append('<div class="border" style="color:green">You: ' + name + '</div>'); 
 
       else { 
 
        $('#onlineusers').append('<div class="border">' + name + '</div>'); 
 
        $("#users").append('<option value="' + name + '">' + name + '</option>'); 
 
       } 
 
      }; 
 

 
      // 
 
      chat.client.enters = function (name) { 
 
       $('#chatlog').append('<div ><i>' + name + ' joins the conversation</i></div>'); 
 
       $("#users").append('<option value="' + name + '">' + name + '</option>'); 
 
       $('#onlineusers').append('<div class="border">' + name + '</div>'); 
 
      }; 
 

 
      // Create a function that the hub can call to broadcast chat messages. 
 
      chat.client.broadcastMessage = function (name, message) { 
 

 
       //display the message 
 
       $('#chatlog').append('<div class="border"><span style="color:orange">' + name + '</span>: ' + message + '</div>'); 
 
      }; 
 

 
      chat.client.disconnected = function (name) { 
 
       //Calls when someone leaves the page 
 
       $('#chatlog').append('<div ><i>' + name + ' leaves the conversation</i></div>'); 
 
       $('#onlineusers div').remove(":contains('" + name + "')"); 
 
       $("#users option").remove(":contains('" + name + "')"); 
 
      }; 
 

 
      // start the connection 
 
      $.connection.hub.start().done(function() { 
 
       alert('Send button clicked : ' + $('#message').val()); 
 
       //Calls the notify method of the server 
 
       chat.server.notify($('#UserIn').val(), $.connection.hub.id); 
 

 
       $('#btnsend').click(function() { 
 
        alert('Send button clicked : ' + $('#message').val()); 
 
        // Call the Send method on the hub. 
 
        chat.server.send($('#UserIn').val(), $('#message').val()); 
 

 

 
        // Clear text box and reset focus for next comment. 
 
        $('#message').val('').focus(); 
 
       }); 
 
      }) 
 
     } 
 
    </script> 
 
}

@model ZupChatApp.Models.User 
 
@{ 
 
    ViewBag.Title = "ChatRoomView"; 
 
} 
 

 

 

 

 

 
@Html.Label("LoggedInUser", Model.FirstName, new { id = "" }) 
 
<h2>Zup Chat Room View</h2> 
 
<div class="LeftContent"> 
 

 
    abcccc 
 
</div> 
 
<div class="CenterContent"> 
 
    <div id="container"> 
 
     <input type="hidden" id="nickname" /> 
 
     <div id="chatlog"></div> 
 
     @*<div id="onlineusers"> 
 
       <b>Online Users</b> 
 
      </div>*@ 
 
     <div id="chatarea"> 
 
      <div class="messagelog"> 
 
       <textarea spellcheck="true" id="message" class="messagebox"></textarea> 
 
      </div> 
 
      <div class="actionpane"> 
 
       <input type="button" id="btnsend" value="Send" class="btn btn-success col-md-offset-2 glyphicon-font" /> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div> 
 
<div></div>

Answer 1

這可能是與chathub外殼的問題。從「SignalR 2入門」documentation：

在JavaScript中對服務器類及其成員的引用是駝峯式的。代碼示例在JavaScript中引用C＃ChatHub類作爲chatHub。

因此，將其更改爲

var chat = $.connection.chatHub; 

此外，<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>應補充提及之前<script src="~/signalr/hubs"></script>

Answer 2

你應該總是與sample from Microsoft的精確副本開始。不僅僅是頁面，而是整個解決方案。獲取示例解決方案。

對於任何你不熟悉的技術都是如此。然後開始修改一件東西，一次到達你的安排。

而且，這是我工作過的頁面（前一段時間）。比較看看有什麼不同：

@section scripts { 
    <!--Reference the SignalR library. --> 
    <script src="~/Scripts/jquery.signalR-2.2.0.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 (customMessage) { 
     // Html encode display name and message. 
     var encodedName = $('<div />').text(customMessage.UserName).html(); 
     var encodedMsg = $('<div />').text(customMessage.Message).html(); 
     // Add the message to the page. 
     $('#discussion').append('<li><strong>' + encodedName 
      + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>'); 
     }; 
     // Get the user name and store it to prepend to messages. 
     $('#displayname').val(prompt('Enter your name:', '')); 
     // 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.sendCustomMessage({ "UserName": $('#displayname').val(), "Message": $('#message').val() }); 
      // Clear text box and reset focus for next comment. 
      $('#message').val('').focus(); 
     }); 
     }); 
    }); 
    </script> 

} 

<div class="container"> 
    <input type="text" id="message" /> 
    <input type="button" id="sendmessage" value="Send" /> 
    <input type="hidden" id="displayname" /> 
    <ul id="discussion"></ul> 
</div>