SignalR- Jquery: $ .connection.chathub renvoie undefined

Question

Je crée une application de chat en utilisant Asp.net MVC, AngularJs, SignalR et Jquery. Dans la vue Conversation, lorsque j'essaie de définir la valeur de l'objet Discussion, la valeur null est indiquée, la référence du code se trouve entre crochets (var chat = $. Connection.chathub;). Aucune autre fonction ne fonctionne à cause de cela. J'utilise "Microsoft.AspNet.SignalR.2.2.2" dans ce projet. Et jquery et signalr des scripts liés tels que 'jquery.signalR-2.2.2.js, jquery-ui-1.12.1.js' et quelques autres bibliothèques jquery ainsi.

Quelqu'un peut-il m'aider? J'ai joint le code pour votre référence.

@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

Ceci est probablement un problème avec le boîtier de chathub. De la "Mise en route avec SignalR 2" documentation:

En JavaScript, la référence à la classe du serveur et ses membres est en chameau. L'exemple de code référence la classe C# ChatHub dans JavaScript comme chatHub.

, changez à

var chat = $.connection.chatHub; 

En outre, <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> référence doit être ajouté avant <script src="~/signalr/hubs"></script>

Answer 2

Vous devriez toujours commencer par une copie exacte du sample from Microsoft. Pas seulement pour la page mais pour toute la solution. Obtenez l'exemple de solution qui fonctionne.

Ceci est vrai pour toute technologie avec laquelle vous n'êtes pas familier. Puis commencez à modifier les choses une chose à la fois pour arriver à votre arrangement.

Et, c'est ma page qui a fonctionné (d'il y a quelque temps). Comparez et voyez ce qui est différent:

@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>