Signalr Close Connection

Question

I am trying to create a stop button in my webapp. The webapp creates bulk shortcuts to different files. I have tried using $.connection.shortcutHub.stop() however this comes up with an error saying Cannot read property 'shortcutHub' of undefined(anonymous function)

The code is below. I need the connection to be stopped once the stop button has been clicked. The stop button's id is stopButton.

        $(document).ready(function () {
        // initialize the connection to the server
        var progressNotifier = $.connection.shortcutHub;

        // client-side sendMessage function that will be called from the server-side
        progressNotifier.client.sendMessage = function (message, percent) {
            // update progress
            UpdateMessage(message, percent);
        };

        progressNotifier.client.redo = function () {
            redo();
        };

        progressNotifier.client.success = function () {
            success();
        };

        progressNotifier.client.fail = function () {
            fail();
        };


        // establish the connection to the server and start server-side operation
        $.connection.hub.start().done(function () {
            $('#confirmbutton').click(function () {
                jQuery.noConflict();
                document.getElementById('closeButton').setAttribute("class", "btn btn-default hidden");
                $('#myModal').modal('show');
                //document.getElementById('confirmbutton').disabled = true;
                //document.getElementById('barcodepanel').setAttribute("class", "panel panel-default");
                var ticket = getCookie('ticket');
                var path = getCookie('CBSShortcut_Path');
                var checkeddocs = getCheckedBoxes("dcheck");
                var checkedfolders = getCheckedBoxes("fcheck");
                progressNotifier.server.createshortcuts(ticket, path, checkeddocs, checkedfolders);
            });

            $('#stopButton').click(function () {
                document.getElementById('closeButton').setAttribute("class", "btn btn-default");
                document.getElementById('confirmbutton').disabled = false;


                //What do I put here?
            });



        });



        function UpdateMessage(message, percent) {
            // get result div
            var msg = $("#result");
            // set message
            msg.html(message);
            //set value of progress bar
            document.getElementById('closeButton').setAttribute("class", "btn btn-default hidden")
            $('#progressbar').css('width', percent + '%').attr('aria-valuenow', percent);
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }

        function redo() {
            document.getElementById('confirmbutton').disabled = false;
            jQuery.noConflict();
            $('#myModal').modal('hide');
        }


        // Pass the checkbox name to the function
        function getCheckedBoxes(chkboxclass) {
            var checkboxes = document.getElementsByClassName(chkboxclass);
            var checkboxesChecked = [];
            var ids = "";
            // loop over them all
            for (var i = 0; i < checkboxes.length; i++) {
                // And stick the checked ones onto an array...
                if (checkboxes[i].checked) {
                    checkboxesChecked.push(checkboxes[i]);
                    ids = ids + checkboxes[i].getAttribute("Name") + ",";
                }
            }
            // Return the array if it is non-empty, or null
            //return checkboxesChecked.length > 0 ? checkboxesChecked : null;
            return ids;
        }
    }
);`

Any help is appreciated. I have tried everything that google has thrown my way (which has been mostly stackoverflow sites) and I am still having the same problem.

Answer 1

Have you tried:

$.connection.hub.stop().done(function() {
    alert('stopped');
});

it will work.

Answer 2

You want to use the global SignalR Hub client connection because hubs share a single connection (aka don't use progressNotifier to do anything with the connection, only to listen for and send events.)

Your code to test this could look like:

 $('#stopButton').click(function () {
                document.getElementById('closeButton').setAttribute("class", "btn btn-default");
                document.getElementById('confirmbutton').disabled = false;


                $.connection.hub.stop();
                //try to send a server event. Will throw an error 
                //Uncaught Error: SignalR: Connection must be started before data can be sent. Call .start() before .send()
            });

Answer 3

This is a working code that I am using:

let connection;  
let connectionUrl = 'https://someurl/hubEndpoint';

connection = new signalR.HubConnectionBuilder()
    .withUrl(connectionUrl)
    .build();

connection.serverTimeoutInMilliseconds = 60 * 10000;

connection.on("ReceiveMessage", (message) => {                
    console.log(message);     
    // to do appropriate coding
});

connection.start().then(function () {
    console.log('Connected to server');
    subject = new signalR.Subject();           
});

setTimeout(() => {
    connection.stop().then(function() {
        console.log('Closed');
        connection = null;    
    });
}, (2000));