Ui Real Time Communicator is a .NET Core 8 library that enables seamless two-way communication with strong compile-time typing between a C# ASP.NET app and a TypeScript client using SignalR.
$ dotnet add package UiRealTimeCommunicatorUiRealTimeCommunicator is a NuGet library designed to enable seamless strongly-typed message exchange between a C# .NET 8 server-side application and a TypeScript client-side application using SignalR. This library simplifies WebSocket-based communication by providing strict type safety and an intuitive API, making it easy to implement real-time features like live updates, notifications, and interactive communication.
Install the UiRealTimeCommunicator library via NuGet:
dotnet add package UiRealTimeCommunicator
Additionally, install the CLI tool for generating TypeScript code:
dotnet tool install --global UiRealTimeCommunicator.TypeScriptGenerator
# or update to the latest version
dotnet tool update --global UiRealTimeCommunicator.TypeScriptGenerator
Once you have generated the TypeScript code, you will be able to use the contract and subscription models in your TypeScript frontend.
In your Program.cs, configure and add the UiRealTimeCommunicator to your services:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddUiRealTimeCommunicator(); // Add the service to DI container
...
var app = builder.Build();
app.UseUiRealTimeCommunicator(); // Enable real-time communication in the app pipelineDefine a SignalR Hub for communication:
[UiRtcHub("Weather")] // Declare a SignalR Hub with a specific name (Weather)
public class WeatherHub : IUiRtcHub { }Define the sender contract for sending messages to the frontend:
public interface WeatherChannelSenderContract: IUiRtcSenderContract<WeatherHub>
{
// Declare method and data for sending message to frontend
[UiRtcMethod("WeatherForecast")]
Task SendWeatherForecast(WeatherForecastModel forecast);
}In your service, use the sender contract to send messages:
public class WeatherService(IUiRtcSenderService senderService)
{
public async Task WeatherServiceMethod(WeatherForecastModel model)
{
// Send message to frontend with strongly-typed contract
await senderService.Send<WeatherChannelSenderContract>().SendWeatherForecast(model);
}
}Define the handler contract to receive messages from the frontend:
[UiRtcMethod("GetWeatherForecast")]
public class GetWeatherForecastHandler() : IUiRtcHandler<WeatherHub, WeatherForecastRequestModel>
{
public async Task ConsumeAsync(WeatherForecastRequestModel model)
{
// Handle message from frontend
// Process the incoming request
}
}Define your data models and mark them for TypeScript code generation:
[TranspilationSource]
public class WeatherForecastModel
{
public string City { get; set; }
public double Temperature { get; set; }
// Add additional fields
}
[TranspilationSource]
public class WeatherForecastRequestModel
{
public string City { get; set; }
}We utilize Tapper for model generation. For more details, visit the Tapper GitHub repository (external link).
Use the CLI tool to generate TypeScript models and contracts from your C# project:
# -p Path to the project file (Xxx.csproj)
# -o Output directory and file
dotnet-uirtc -p ".\App-backend\App-backend.csproj" -o ".\app-frontend\src\communication\contract.ts"Install SignalR in your TypeScript project. You can find more details on the SignalR npm page (external link).
npm install @microsoft/signalr
# or
yarn add @microsoft/signalrIn the TypeScript client, initialize the SignalR connection:
import { uiRtc } from "./communication/contract.ts";
await uiRtc.init({
serverUrl: "http://localhost:5064/", // Your server URL
activeHubs: "All", // Specify which hubs to subscribe to
});Send a message from the frontend:
import {
uiRtcCommunication,
WeatherForecastRequestModel,
} from "../../communication/contract";
// Call a backend method and send a strongly-typed model
uiRtcCommunication.Weather.GetWeatherForecast({
city: "Kharkiv",
} as WeatherForecastRequestModel); // Strongly typedSubscribe to a message and handle the response:
import {
uiRtcSubscription,
WeatherForecastResponseModel,
} from "../../communication/contract";
// Listen for messages from the backend
uiRtcSubscription.Weather.WeatherForecast(
(data: WeatherForecastResponseModel) => {
// Handle received data
console.log("Weather data received: ", data);
}
);⚡ Start building real-time applications today! The library ensures a seamless and type-safe communication layer for your .NET and TypeScript applications.