Angular 2 TypeScript using SignalR

Question

I am trying to configure an Angular 2 application to use Microsoft SignalR. I follow this guide , which, although good, I don’t like the fact that jQuery and SignalR are loaded into the application through script tags in the index.html file, and the fact that both libraries do not use their respective type definitions.

With that in mind, I tried to include jQuery and SignalR in my application using node modules and corresponding type definitions. I searched for the correct type definition files to use through Microsoft TypeSearch .

I only include jQuery in my application due to SignalR's dependence on jQuery.

JQuery

I started by installing the jQuery module in my application, which I also had to add to the Webpack configuration. After it was established, I ran into the problem of “conflict” over Transport. This is described on the Aurelia JS Rocks website. Despite the fact that he offers to remove the protractor sets, I tried another solution at the moment , described in this answer . I do not know if this is the best solution.

SignalR

As for SignalR, I'm a little stuck - it still seems that there is no “official” node module for SignalR. I'm not sure if it is worth including the Microsoft SignalR Javascript library by downloading the file and including it in my application.

The problem is that I set the type definitions for SignalR. But now I'm not sure how to actually use SignalR, because when I type $ or jQuery , for example, I am not offered .connections - this makes sense, since it is not part of the jQuery library.

I am sure that I could misunderstand something in connection with its configuration. What is the best way to use SignalR in an Angular2 TypeScript application?

Answer 1

Here is a startup code that you can use.

WITH#

 //create an interface that contains definition of client side methods public interface IClient { void messageReceived(string msg); } //create your Hub class that contains implementation of client methods public class ChatHub : Hub<IClient> { public void sendMessage(string msg) { //log the incoming message here to confirm that its received //send back same message with DateTime Clients.All.messageReceived("Message received at: " + DateTime.Now.ToString()); } } 

HTML

Add a link to the script jQuery and signalR .

 <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.signalR.min.js"></script> <!--this is the default path where SignalR generates its JS files so you don't need to change it.--> <script src="~/signalr/hubs"></script> 

Js

You need to install the TypeScript definition file for SignalR and jQuery . If you are using TypeScript 2 , you do not need to add a link to the index.d.ts file when using it. Just set the typing using the following commands.

 npm install --save @types/jquery npm install --save @types/signalr 

With all the setup done, you can write a simple TypeScript class to handle the logic for sending and receiving messages.

 export class MessageService { //signalR connection reference private connection: SignalR; //signalR proxy reference private proxy: SignalR.Hub.Proxy; constructor() { //initialize connection this.connection = $.connection; //to create proxy give your hub class name as parameter. IMPORTANT: notice that I followed camel casing in giving class name this.proxy = $.connection.hub.createHubProxy('chatHub'); //define a callback method for proxy this.proxy.on('messageReceived', (latestMsg) => this.onMessageReceived(latestMsg)); this.connection.hub.start(); } private onMessageReceived(latestMsg: string) { console.log('New message received: ' + latestMsg); } //method for sending message broadcastMessage(msg: string) { //invoke method by its name using proxy this.proxy.invoke('sendMessage', msg); } } 

I am using the above code, obviously modified for my needs, and it works great.

Answer 2

You can try

 npm install ng2-signalr --save 

You can read the installation instructions here .
There is also a link to a working demo .

Answer 3

@ Ali Taki's answer is mostly normal, but not perfect (it doesn't even work if you skip ts compiler configuration). Here are my steps for the latest Angular (version 8 at the time of writing):

1. Install jquery runtime and signaling libraries: npm install jquery signalr

2. Tell Angular to load the libraries at runtime as if they were in the <script></script> by setting up angular.json:

    projects: <your-app>: architect: build: options: ... scripts: [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/signalr/jquery.signalR.min.js" ] ... test: options: ... scripts: [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/signalr/jquery.signalR.min.js" ] 

3. Set the types for jquery and signalr so that the ts compiler can recognize them: npm install @types/jquery @types/signalr --save-dev

4. Tell the ts compiler to load the default types by editing the types section in tsconfig.app.json and tsconfig.spec.json:

    compilerOptions: types: [..., "jquery", "signalr"] 

OK, you're done! Good coding SignalR!

 let conn = $.hubConnection("<base-path>"); let proxy = conn.createHubProxy("<some-hub>"); ... 

Note: never try import ... explicitly use jquery in your code, as https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app said

For more information on angular.json configuration, see https://angular.io/guide/workspace-config