Establishing Communication Between Client and Server in ASP.net Using SignalR Technology

Hey everyone, having some trouble with my SignalR Client here. Every time I try to run it, I get this pesky error popping up: 0x800a139e - JavaScript runtime error: SignalR: Error loading hubs. It's telling me to check my hubs reference, so I need to make sure everything is set up correctly.

The error seems to be originating from this line of code: $.connection.hub.start

I have a ServerHub class located in the HUBS folder within my Server application and that part is working just fine.

If anyone has any insights or solutions, please share them with me. Thanks!

<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:39670/MySignalRServer/signalr/hubs"></script>
 var ChatHubProxy = $.hubConnection("http://localhost:39670/MySignalRServer/signalr/hubs");
        var chat = ChatHubProxy.createHubProxy('ServerHub');

    chat.on("addNewMessageToPage",function (name, message) {
        // Add the message to the page.
          $('#discussion').append('<li><strong>' + htmlEncode(name)
            + '</strong>: ' + htmlEncode(message) + '</li>');
        });
      $.connection.hub.start({jsonp:true}).done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub.
                chat.server.send($('#displayname').val(),       $('#message').val());
                alert("hiii");
                // Clear text box and reset focus for next comment.
                $('#message').val('').focus();
            });
        });

Answer №1

Consider updating your code with the following changes:

<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:39670/MySignalRServer/signalr/hubs"></script>

    var chat = $.connection.ServerHub;  //Update this line

    chat.on("addNewMessageToPage", function(name, message) {
        // Add the message to the page.
        $('#discussion').append('<li><strong>' + htmlEncode(name)
            + '</strong>: ' + htmlEncode(message) + '</li>');
    });

    $.connection.hub.start().done(function() {    //Update this part
        $('#sendmessage').click(function() {
            // Call the Send method on the hub.
            chat.server.send($('#displayname').val(), $('#message').val());
            alert("hiii");
            // Clear text box and reset focus for next comment.
            $('#message').val('').focus();
        });
    });

Ensure that the address is correct -

<script src="http://localhost:39670/MySignalRServer/signalr/hubs"></script>

I usually use this format -

<script src="/signalr/hubs"></script>

Add the HubName Attribute as shown below

[HubName("ServerHub")]
public class ServerHub : Hub
{
    public string Send(string name, string message)
    {
        Clients.All.broadcastMessage(name, message);

        return null;
    }
}

Alternatively, you can update this line of code :

 var chat = $.connection.ServerHub;

to

 var chat = $.connection.serverHub;

Check out the demo project here : https://github.com/czerwonkabartosz/SignalRDemo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reading uploaded .PDF or .DOC files as images without the need for conversion

Lately, I've been brainstorming a new feature where users can upload files such as .pdf or .doc and have them displayed as images on the webpage. I'm curious if there's a way to achieve this without converting them to .jpg or .png using thir ...

Encountering an error while submitting form via Ajax to PHP backend

Currently, I am in the process of developing a form that solicits information from a user, including their name, address, amount1, amount2, and a comment. It seems that the radio inputs for amount1 and amount2 are causing issues with my form. Upon submiss ...

Removing fragment identifier from the URL

If you go to stackoverflow.com/#_=_, the expression window.location.hash will display #_=_. All good so far. But when you run window.location.hash = '' to get rid of the hash, the URL changes to stackoverflow.com/#. (Note the unexpected # at the ...

Verify whether a pop-up window has been opened

Situation: Greetings, I provide a sensitive service to my clients. However, some of them are generating advertisement popups (using JavaScript) on their websites where my service is integrated, causing issues for us. My service involves a .js file hosted ...

creating grunt shortcuts with specified option values

Is it possible to create custom aliases in Grunt, similar to npm or bash? According to the Grunt documentation, you can define a sequence of tasks (even if it's just one). Instead of calling it "aliasing", I believe it should be referred to as "chaini ...

Executing functions in order [Node JS]

There are 2 functions in my code, where one function runs inside the other and the second one utilizes the output of the first function (list). I am looking to run these functions sequentially. Can anyone provide assistance? gm_scrape.search_link(request ...

Utilizing headless Chrome to automatically capture AJAX requests

Chrome officially supports running the browser in headless mode, allowing for programmatic control through the Puppeteer API and/or the CRI library. I've thoroughly explored the documentation but have not discovered a method to programmatically captu ...

How to use AJAX and jQuery .get() to fetch a particular element from an external document

Seeking a method using ajax and jQuery to load specific content from an external document based on a user's action of toggling a switch. The content to be loaded is determined by the name attribute of the toggle switch element. The process begins wit ...

Changing div height based on the height of another dynamic div

Looking to create a box that matches the height of the entire page, live height minus another dynamic div called #wrapping. I have code that offsets it instead of removing the height of the div... function adjustBoxHeight() { var viewPortHeight = $(wind ...

Using DefaultSeo does not override NextSeo in every component

I am looking to dynamically change the Head tag using next-seo. While browser validation will show NEXTSeo for individual pages, Twitter, Firebase's card validation tool, and others will default to next-seo-config.js. Does anyone have a solution? S ...

Trouble arising when attempting to add or remove classes using JavaScript

I've been trying to use JavaScript to toggle the visibility of contact_form_top by adding or removing the hidden class when the button contact_form_btn is clicked, but I'm having trouble getting it to function properly. function hide_unhide_btn( ...

Tips for accessing array or JSON data with ReactJS

As a novice with the MERN stack, I have set up my express app to run on port 3001 with a dbconn route. When I access "localhost:3001/dbconn," it displays the docs array successfully. const mongoose = require('mongoose') const MongoClient = req ...

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

Tips for converting file byte code to file form data

From one folder I am retrieving a file and uploading it to another server. However, when I extract the file from the first folder, I receive a byte code representation of that file. The API for uploading the file to the second folder requires FormData as a ...

Encountering Karma Angular Error: Name 'X' Not Found

After executing Karma Start in my Angular project, I am encountering several errors. All the error messages highlight issues like 'Cannot find name Blob', 'Cannot Find name KeyboardEvent', 'Cannot find name HTMLElement', amon ...

Encountering a problem while attempting to create a React application using Vite

I attempted to create a React app using the following command npm create vite@latest filemanager However, when I tried to run the app using npm run I encountered the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

Enabling a variable to encompass various types within ReactJS

In my code, I have defined two distinct types as follows: type A = $ReadOnly<{ a: ?$ReadOnlyArray<string>, b: ?string, }>; and type B = $ReadOnly<{ c: ?$ReadOnlyArray<boolean>, d: ?number, }>; Now, I am looking to create a ...

Loading screen for specific content section

I currently have a CSS preloader implemented on my WordPress site, but I am facing an issue where the preloader hides the entire page instead of just a part of the content that I want to hide. Specifically, I would like to hide only the main content sectio ...

NodeJS Static method is not a valid function

I have encountered an issue with my NodeJS application where I am trying to access a static Method that performs a calculation Function. However, when attempting to access the Method, I received an error stating "isNotAFunction". Below is the static class ...

Modifying class on button hover using JQuery in ASP.net

I'm a beginner with JQuery and I need some help. I currently have a button that functions correctly with a CSS class, but I want to change the CSS class when hovering over the button. Can anyone provide guidance on how to achieve this effect? This ...