5.3 KiB

Raw Blame History

title	author	description	monikerRange	ms.author	ms.custom	ms.date	uid
ASP.NET Core SignalR JavaScript client	tdykstra	Overview of ASP.NET Core SignalR JavaScript client.	>= aspnetcore-2.1	tdykstra	mvc	08/14/2018	signalr/javascript-client

ASP.NET Core SignalR JavaScript client

By Rachel Appel

The ASP.NET Core SignalR JavaScript client library enables developers to call server-side hub code.

View or download sample code (how to download)

Install the SignalR client package

The SignalR JavaScript client library is delivered as an npm package. If you're using Visual Studio, run npm install from the Package Manager Console while in the root folder. For Visual Studio Code, run the command from the Integrated Terminal.

npm init -y
npm install @aspnet/signalr

npm installs the package contents in the node_modules\@aspnet\signalr\dist\browser folder. Create a new folder named signalr under the wwwroot\lib folder. Copy the signalr.js file to the wwwroot\lib\signalr folder.

Use the SignalR JavaScript client

Reference the SignalR JavaScript client in the <script> element.

<script src="~/lib/signalr/signalr.js"></script>

Connect to a hub

The following code creates and starts a connection. The hub's name is case insensitive.

[!code-javascriptCall hub methods]

Cross-origin connections

Typically, browsers load connections from the same domain as the requested page. However, there are occasions when a connection to another domain is required.

To prevent a malicious site from reading sensitive data from another site, cross-origin connections are disabled by default. To allow a cross-origin request, enable it in the Startup class.

[!code-csharpCross-origin connections]

Call hub methods from client

JavaScript clients call public methods on hubs via the invoke method of the HubConnection. The invoke method accepts two arguments:

The name of the hub method. In the following example, the method name on the hub is SendMessage.
Any arguments defined in the hub method. In the following example, the argument name is message.

[!code-javascriptCall hub methods]

Call client methods from hub

To receive messages from the hub, define a method using the on method of the HubConnection.

The name of the JavaScript client method. In the following example, the method name is ReceiveMessage.
Arguments the hub passes to the method. In the following example, the argument value is message.

[!code-javascriptReceive calls from hub]

The preceding code in connection.on runs when server-side code calls it using the SendAsync method.

[!code-csharpCall client-side]

SignalR determines which client method to call by matching the method name and arguments defined in SendAsync and connection.on.

[!NOTE] As a best practice, call the start method on the HubConnection after on. Doing so ensures your handlers are registered before any messages are received.

Error handling and logging

Chain a catch method to the end of the start method to handle client-side errors. Use console.error to output errors to the browser's console.

[!code-javascriptError handling]

Setup client-side log tracing by passing a logger and type of event to log when the connection is made. Messages are logged with the specified log level and higher. Available log levels are as follows:

signalR.LogLevel.Error – Error messages. Logs Error messages only.
signalR.LogLevel.Warning – Warning messages about potential errors. Logs Warning, and Error messages.
signalR.LogLevel.Information – Status messages without errors. Logs Information, Warning, and Error messages.
signalR.LogLevel.Trace – Trace messages. Logs everything, including data transported between hub and client.

Use the configureLogging method on HubConnectionBuilder to configure the log level. Messages are logged to the browser console.

[!code-javascriptLogging levels]

5.3 KiB Raw Blame History Unescape Escape