Newly written SignalR with .Net Core 2.0 and TypeScript

"dependencies": {
  "atob": "^2.0.3",
  "btoa": "^1.1.2",
  "eventsource": "^1.0.5",
  "msgpack5": "^3.5.1",
  "websocket": "^1.0.24",
  "xmlhttprequest": "^1.8.0"
},

let hubConnection = new signalR.HubConnection("http://localhost:8080/stocks");

Then we will write streamStocks method which will collect the stock data by calling StreamStocks method of the hub:

function streamStocks (): void {
     hubConnection.stream("StreamStocks").subscribe({
      next: (stock : any) => {
            console.log(stock);
     },
    error: () => {},
       complete: () => {}
     });
}

Then we will invoke the method streamStocks if the market is open and will invoke OpenMarket method if the market is not opened yet:

hubConnection.start().then(() => {
   hubConnection.invoke("GetMarketState").then(function (state : string): void {
   if (state === "Open") {
          streamStocks();
    } else {
            hubConnection.invoke("OpenMarket");
      }
  });
}).catch(err => {
console.log(err);
});

hubConnection.on("marketOpened", function(): void {
streamStocks();
});

Streaming

It is now possible to stream data from the server to the client. Unlike a regular Hub method invocation, streaming means the server is able to send results to the client before the invocation completes.

Not more than one Hub per connection

New SignalR does not support multiple hubs per connection also it is now not required to subscribe Hub methods before the connection starts.

SignalR Server example

As we have created the client, now let us create the hub.

First of all, create an empty web application from Visual Studio 2017 templates:

Then we need to add SignalR reference which you can add from Package console manager as shown below:

Install-Package Microsoft.AspNetCore.SignalR -Pre

which will add the SignalR reference into the project as below:

<ItemGroup>
   <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
   <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha2-final" />
</ItemGroup>

Now create a hub class for Stocks which can communicate with all subscribed clients

using Microsoft.AspNetCore.SignalR; 

namespace SignalRApplication 
{   
public class StockHub: Hub   
{ 
private readonly Stock _stock; 
public StockHub(Stock stock) 
{ _stock = stock; } 

////To take the advantage of streaming you need to create a hub method that returns either a ReadableChannel<T> or an IObservable<T> as shown in above code 
public IObservable<Stock> StreamStocks() 
{ 
return _stock.StreamStocks(); 
} 

public string GetMarketState() 
{ 
return _stock.MarketState.ToString(); 
}     

public async Task OpenMarket() 
{ 
await _stock.OpenMarket(); 
} 

public async Task CloseMarket() 
{ 
await _stock.CloseMarket(); 
}  
 } 
}

Hub has the capability to connect with all the clients which have been subscribed to the hub

Note: Here Stock service contains all important implementation of Open\Close market methods but we will not go into the details of implementation in the current post.

After adding a Hub class you need to configure the server to pass requests sent to the stock hub to SignalR:

public class Startup { 
public void ConfigureServices(IServiceCollection services) 
{ 
services.AddSignalR(); 
services.AddScoped<StockHub>(); 
services.AddSingleton<Stock>(); 
} 

public void Configure(IApplicationBuilder app) 
{ 
app.UseFileServer(); 
app.UseSignalR(routes => { routes.MapHub<StockHub>("stocks"); }); 
} 
}

Once the set up of the server is done, you can invoke hub methods from the client(which we have created in the starting of this post) and receive invocations from the server.

So once we run the client:

• Connection with the hub will be started and GetMarketState will be called which will return the current state of market
• If the market state is opened then StreamStocks will be called which will return the stock data in stream. To take the advantage of streaming you need to create a hub method that returns either a ReadableChannel<T> or an IObservable<T> as shown in above code
• If the market is not opened, market will be first opened and then StreamStocks will be called

Whenever we run the application, it will get the real time stock data as below:

Code sample credit – https://github.com/aspnet/signalr-samples

Hope it helps.