Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

c#
javascript

How to add a SignalR dependency for a JavaScript client using NPM

Daniyal Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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 official website. Once we've installed and configured NPM, open the command terminal inside the project and execute the following command:

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_modules folder.
  • 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 listener named "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.

RELATED TAGS

c#
javascript

CONTRIBUTOR

Daniyal Ahmad
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring