@microsoft/signalr

What is @microsoft/signalr?

@microsoft/signalr is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. It allows server-side code to push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

What are @microsoft/signalr's main functionalities?

Establishing a Connection

This code demonstrates how to establish a connection to a SignalR hub. The `HubConnectionBuilder` is used to configure and create a connection to the specified hub URL.

const signalR = require('@microsoft/signalr');

const connection = new signalR.HubConnectionBuilder()
    .withUrl('/chatHub')
    .build();

connection.start().then(() => console.log('Connection started')).catch(err => console.error(err));

Sending Messages

This code shows how to send a message to the server using the `invoke` method. The first parameter is the name of the server method to call, and the subsequent parameters are the arguments to pass to that method.

connection.invoke('SendMessage', 'Hello, World!').catch(err => console.error(err));

Receiving Messages

This code demonstrates how to set up a client-side handler for messages sent from the server. The `on` method is used to specify the name of the server method to handle and a callback function to execute when the method is called.

connection.on('ReceiveMessage', (user, message) => {
    console.log(`${user}: ${message}`);
});

Other packages similar to @microsoft/signalr

socket.io

Socket.IO is a popular library for real-time web applications. It enables real-time, bidirectional and event-based communication. It works on every platform, browser, or device, focusing equally on reliability and speed. Compared to @microsoft/signalr, Socket.IO is more widely used and has a larger community, but it may require more setup and configuration.

primus

Primus is a flexible and extensible library for real-time communication. It abstracts away the different real-time frameworks and provides a unified API. Primus can work with various real-time engines like WebSockets, Engine.IO, and SockJS. It offers more flexibility compared to @microsoft/signalr but might be more complex to set up.

faye

Faye is a simple publish-subscribe messaging system based on the Bayeux protocol. It is designed for low-latency, high-throughput messaging between web clients. Faye is simpler and more lightweight compared to @microsoft/signalr, but it may not offer as many features out of the box.

README

JavaScript and TypeScript clients for SignalR for ASP.NET Core and Azure SignalR Service

Installation

npm install @microsoft/signalr
# or
yarn add @microsoft/signalr

To try previews of the next version, use the next tag on NPM:

npm install @microsoft/signalr@next
# or
yarn add @microsoft/signalr@next

Usage

See the SignalR Documentation at learn.microsoft.com for documentation on the latest release. API Reference Documentation is also available on learn.microsoft.com.

For documentation on using this client with Azure SignalR Service and Azure Functions, see the SignalR Service serverless developer guide.

Browser

To use the client in a browser, copy *.js files from the dist/browser folder to your script folder include on your page using the <script> tag.

WebWorker

To use the client in a webworker, copy *.js files from the dist/webworker folder to your script folder include on your webworker using the importScripts function. Note that webworker SignalR hub connection supports only absolute path to a SignalR hub.

Node.js

To use the client in a NodeJS application, install the package to your node_modules folder and use require('@microsoft/signalr') to load the module. The object returned by require('@microsoft/signalr') has the same members as the global signalR object (when used in a browser).

Example (Browser)

let connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat")
    .build();

connection.on("send", data => {
    console.log(data);
});

connection.start()
    .then(() => connection.invoke("send", "Hello"));

Example (WebWorker)

importScripts('signalr.js');

let connection = new signalR.HubConnectionBuilder()
    .withUrl("https://example.com/signalr/chat")
    .build();

connection.on("send", data => {
    console.log(data);
});

connection.start()
    .then(() => connection.invoke("send", "Hello"));

Example (NodeJS)

const signalR = require("@microsoft/signalr");

let connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat")
    .build();

connection.on("send", data => {
    console.log(data);
});

connection.start()
    .then(() => connection.invoke("send", "Hello"));