How to add a SignalR dependency for a JavaScript client using NPM
SignalR
SignalR makes it easy for programmers to implement real-time web functionality in their applications. Real-time web functionality is the ability of the server to push content in real-time to the clients. We can add the SignalR functionality to the front end using NPM.
NPM
The Node Package Manager (NPM) lets us add different packages to our JavaScript project. NPM is free to use with over 800,000 code packages.
Add the SignalR library via NPM
First of all, we need to make sure that NPM is installed on our machine. For assistance, we can refer to the
npm init -y
This creates a node.js project inside our project folder with package.json and package.lock.json files. After this, we need to use NPM to fetch and add SignalR to our project. For that, we execute the following command:
npm install @microsoft/signalr
The node_modules folder is created after we execute the command above. This contains all the raw code of all the libraries that the original SignalR uses. This SignalR client can now be added to our NodeJS application.
NodeJS
The node_modules folder now includes SignalR. We can use it in our application. To load SignalR, we use require('@microsoft/signalr').
Example
Let's look at our code example:
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"));
Explanation
Line 1: This line includes the SignalR module present in
node_modulesfolder.Line 3-5: Builds an object that represents a SignalR connection, and specify the URL of the SignalR hub.
Line 7-9: Adds an
event listenernamed "send" to the connection object. When server side triggers this object the data received will be printed on console.Line 11-12: Starts the application and invokes connection object.
Free Resources