Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
jQuery
✓ import jQuery from 'jquery'; // Or ensure global jQuery is loaded via script tag
✗ import { $ } from 'jquery'; // While technically possible, SignalR expects global `jQuery` or `$`
The `signalr` client operates as a jQuery plugin. Ensure jQuery is loaded *before* the SignalR client. In a modern bundler, you might `import 'jquery'` for its side effects, followed by `import 'signalr'`.
$.hubConnection
✓ import 'jquery'; import 'signalr'; // Then `$.hubConnection` is available globally or via `jQuery.hubConnection`
✗ import { hubConnection } from 'signalr'; // This package is not an ES module with named exports.
After jQuery and the SignalR client script are loaded, the `hubConnection` factory becomes available as a method on the global jQuery object. There is no direct ES module import for `hubConnection` from `signalr`.
$.connection
✓ import 'jquery'; import 'signalr'; // Then ensure /signalr/hubs is loaded; `$.connection` becomes available
✗ import { connection } from 'signalr'; // This package is not an ES module with named exports.
This object is used to access proxies for server-side hubs. It becomes available on the global jQuery object after the SignalR client and the `signalr/hubs` script (auto-generated by the ASP.NET SignalR server) are loaded in the correct order.
This example demonstrates how to load the SignalR client, establish a connection to an ASP.NET SignalR server, define a client-side method, and invoke a server-side method for basic real-time communication within an HTML page.
<!-- index.html (full example demonstrating loading order) -->
<!DOCTYPE html>
<html>
<head>
<title>SignalR Client Example</title>
</head>
<body>
<div id="discussion"></div>
<input type="text" id="message" placeholder="Enter message"/>
<input type="button" id="sendmessage" value="Send" />
<!-- 1. Ensure jQuery is loaded first -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<!-- 2. Then the SignalR client -->
<script src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.4.3.min.js"></script>
<!-- 3. Then the auto-generated hub proxies from your server -->
<!-- This URL MUST point to your ASP.NET SignalR server's hubs endpoint -->
<script src="http://localhost:5000/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
console.log("jQuery and SignalR client scripts loaded.");
// $.connection contains proxies for server-side hubs (e.g., $.connection.chatHub).
// The /signalr/hubs script makes this available.
if ($.connection && $.connection.hub) {
const hubConnection = $.connection.hub; // The main SignalR connection object
// Define a client-side method that the server can call
hubConnection.client.addMessage = function (name, message) {
console.log(`Server called addMessage: ${name}: ${message}`);
$('<li>').text(`${name}: ${message}`).appendTo('#discussion');
};
// Start the connection to the SignalR server
hubConnection.start()
.done(function () {
console.log("Connected to SignalR hub. Connection ID: " + hubConnection.id);
$('#sendmessage').click(function () {
const message = $('#message').val();
if (message) {
// Invoke a server-side method. 'Send' is a common method name.
// 'ChatHub' is the name of your server-side hub class.
// Arguments follow the method name.
hubConnection.invoke('Send', 'ClientUser', message)
.fail(function(error) {
console.error('Error invoking server method:', error);
});
$('#message').val('');
}
});
})
.fail(function (error) {
console.error("Could not connect to SignalR hub: " + error);
});
} else {
console.warn("SignalR client or hub proxies not fully loaded. Check script loading order and server /signalr/hubs endpoint.");
}
});
</script>
</body>
</html>
Errors
Common errors & fixes
Uncaught TypeError: $(...).hubConnection is not a function
The jQuery SignalR plugin was loaded before jQuery, or jQuery was not loaded at all.
fixEnsure jQuery is loaded *before* `jquery.signalr.js` in your HTML or bundler configuration.
Uncaught ReferenceError: jQuery is not defined
jQuery script was not loaded or was loaded incorrectly.
fixVerify the `<script>` tag for jQuery is present, points to the correct path, and is loaded before any scripts that depend on it.
WebSocket connection to 'ws://...' failed: Error during WebSocket handshake: Unexpected response code: 404
The SignalR server endpoint or specific hub could not be found, often due to incorrect URL or server-side configuration.
fixCheck the URL provided to `$.connection.hub.url` (or the default `/signalr` route). Ensure your ASP.NET SignalR server is running and the hub route is correctly mapped (`RouteTable.Routes.MapHubs();`).
Error: SignalR: Connection has not been started. Call .start() before using any of the hubs.
Attempting to invoke a server method or perform other connection actions before `$.connection.hub.start()` has successfully completed.
fixEnsure all client-side hub invocations (e.g., `hubConnection.invoke()`) and other connection-dependent logic are placed within the `.done()` callback of `$.connection.hub.start()`.
Audit
Dependencies
jqueryrequiredThe SignalR client is implemented as a jQuery plugin, requiring jQuery to expose its API via `$.hubConnection`.