SignalR Error: Unable to get property client of undefined or null reference

Hello @everyone

I have an asp.net webform on which there is a dynamic chat box to send messages in 1:1 manner manually it is working fine. I had successfully install SignalR with all the required dependency and it is working with respect to the below url.

https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr

When I modified my chart.js as per the above url then it is showing the below error.

0x800a138f - JavaScript runtime error: Unable to get property 'client' of undefined or null reference

I have tried a lot but unable to figure it out please, help me out.

$(document).ready(function () {
    var arr = []; // List of users 
    $(document).on('click', '.msg_head', function () {
        var chatbox = $(this).parents().attr("rel");
        $('[rel="' + chatbox + '"] .msg_wrap').slideToggle('slow');
        return false;
    });
    $(document).on('click', '.close', function () {
        var chatbox = $(this).parents().parents().attr("rel");
        $('[rel="' + chatbox + '"]').hide();
        arr.splice($.inArray(chatbox, arr), 1);
        displayChatBox();
        return false;
    });
    $(document).on('click', '#sidebar-user-box', function () {
        var userID = $(this).attr("class");
        var username = $(this).children().text();
        if ($.inArray(userID, arr) != -1) {
            arr.splice($.inArray(userID, arr), 1);
        }
        arr.unshift(userID);
        chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
            '<div class="msg_head">' + username +
            '<div class="close">x</div> </div>' +
            '<div class="msg_wrap"> <div class="msg_body"> <div class="msg_push"></div> </div>' +
            '<div class="msg_footer"><textarea class="msg_input" placeholder="Type your message here" rows="4"></textarea></div>  </div>  </div>';
        $("body").append(chatPopup);
        displayChatBox();
    });
    $(document).on('keypress', 'textarea', function (e) {
       if (e.keyCode == 13) {
            var msg = $(this).val();
            $(this).val('');
            var chat = $.connection.chatHub;
            chat.client.broadcastMessage = function (msg) {
                if (msg.trim().length != 0) {
                    var chatbox = $(this).parents().parents().parents().attr("rel");
                    $('<div class="msg-right">' + msg + '</div>').insertBefore('[rel="' + chatbox + '"] .msg_push');
                    $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
                }
            };

            $.connection.hub.start().done(function () {
                chat.server.send($('#displayname').val(), $('#message').val());
                // $('#message').val('').focus();
            });
        }
    });

    function displayChatBox() {
        i = 270; // start position
        j = 260;  //next position
        $.each(arr, function (index, value) {
            if (index < 4) {
                $('[rel="' + value + '"]').css("right", i);
                $('[rel="' + value + '"]').show();
                i = i + j;
            }
            else {
                $('[rel="' + value + '"]').hide();
            }
        });
    }

});

//ChatHub.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

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

//Startup
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(CRMWF.StartupHub))]

namespace CRMWF
{
    public class StartupHub
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Messages.aspx.cs" Inherits="CRMWF.Dashboards.Messages" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link href="../Content/chatbox.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="signalr/hubs"></script>
    <script src="../Scripts/chat.js"></script>
    <div style="background-image:url('../images/Dashboard1.png'); background-repeat:no-repeat;">
        
    </div>
    <div id="chat-sidebar">
        <asp:Repeater ID="rptActiveUser" runat="server">
            <ItemTemplate>
                <div id="sidebar-user-box" class='99 <%# Container.ItemIndex + 1 %>'>
                    <%--<img src='<%# Eval("userDp") %>' />--%>
                    <img src="../Registration/DisplayPics/defaultDp.jpg" />
                    <span id="slider-username"><%# Eval("activeUser") %> </span>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</asp:Content>