SignalR- Jquery:$ .connection.chathub返回未定义 [英] SignalR- Jquery : $.connection.chathub returns undefined

问题描述

我正在使用Asp.net MVC，AngularJs，SignalR和Jquery创建一个聊天应用程序. 在聊天视图"中，当我尝试为聊天对象设置值时，它传递了null值，代码参考位于方括号内(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库.

I'm creating a chat application using Asp.net MVC, AngularJs, SignalR and Jquery. In the Chat View when I'm trying set the value for chat object it passes null value the code reference is inside the brackets ( var chat=$.connection.chathub;). No other function works because of this. I'm using "Microsoft.AspNet.SignalR.2.2.2" in this project. And jquery and signalr related scripts such as 'jquery.signalR-2.2.2.js ,jquery-ui-1.12.1.js' and few other jquery libraries as well.

有人可以帮我吗?我已附上代码供您参考.

Can anyone help me out? I have attached the code for your reference.

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

推荐答案

这可能与chathub的大小写有关.从"SignalR 2入门"中

This is probably an issue with the casing of chathub. From the "Getting Started with SignalR 2" documentation:

在JavaScript中，对服务器类及其成员的引用是驼峰式的.该代码示例将JavaScript中的C#ChatHub类引用为chatHub.

因此，将其更改为

var chat = $.connection.chatHub;

此外，应在<script src="~/signalr/hubs"></script>

这篇关于SignalR- Jquery:$ .connection.chathub返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！