angular2 typescript ajax,jquery - Angular 2 TypeScript using SignalR - Stack Overflow

Here's a startup code you can use.

C#

//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

{

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 reference to script files of jQuery and signalR.

JS

You need to install TypeScript definition file for SignalR and jQuery. If you're using TypeScript 2, you don't need to add reference to index.d.ts file while using it. Just install the typings using 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'm using the above code, obviously modified to my needs, and it works fine.

Update 1: This is a pretty old answer and things have changed a lot since then. Install jQuery and SignalR using npm and then load them using angular.json file, like this:

1- Install npm install jquery signalr

2- Load in angular.json -> projects -> your-app -> architect -> build -> options

scripts: [

"./node_modules/jquery/dist/jquery.min.js",

"./node_modules/signalr/jquery.signalR.min.js"

]

Thanks and credits to Robert's answer for update.