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 UiRealTimeCommunicator-developUiRealTimeCommunicator 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
dotnet tool install --global UiRealTimeCommunicator.TypeScriptGenerator
# or update to the latest version
dotnet tool update --global UiRealTimeCommunicator.TypeScriptGeneratorOnce you have generated the TypeScript code, you will be able to use the contract and subscription models in your TypeScript frontend.
For a full walkthrough and more scenarios, see the Full Usage Guide.
In your Program.cs, register the services and middleware:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddUiRealTimeCommunicator();
var app = builder.Build();
app.UseUiRealTimeCommunicator();Define a SignalR Hub for communication:
[UiRtcHub("Weather")] // Optional custom hub name
public class WeatherHub : IUiRtcHub { }Define the sender contract for sending messages to the frontend:
public interface WeatherChannelSenderContract : IUiRtcSenderContract<WeatherHub>
{
[UiRtcMethod("WeatherForecast")] // Optional custom method name
Task SendWeatherForecastAsync(WeatherForecastModel forecast);
}In your service, use the sender contract to send messages:
public class WeatherService(IUiRtcSenderService senderService)
{
public async Task WeatherServiceMethod(WeatherForecastModel model)
{
await senderService.Send<WeatherChannelSenderContract>().SendWeatherForecastAsync(model);
}
}Define the handler contract to receive messages from the frontend:
public class GetWeatherForecastHandler() : IUiRtcHandler<WeatherHub, WeatherForecastRequestModel>
{
public async Task ConsumeAsync(WeatherForecastRequestModel model)
{
// Handle message from frontend
}
}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 ".\Examples\Simple\App-backend\App-backend.csproj" -o ".\Examples\Simple\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.initAsync({
serverUrl: "http://localhost:5064/", // Base URL of the server
activeHubs: "All", // "All" or a list of hub names
});Send a message from the frontend:
import {
uiRtcCommunication,
WeatherForecastRequestModel,
} from "../../communication/contract";
// Call a backend method with a strongly-typed model
await uiRtcCommunication.Weather.GetWeatherForecast({
city: "Kharkiv",
} as WeatherForecastRequestModel); // Strongly typedSubscribe to a message and handle the response:
import {
uiRtcSubscription,
WeatherForecastModel,
} from "../../communication/contract";
// Listen for messages from the backend
uiRtcSubscription.Weather.WeatherForecast(
(data: WeatherForecastModel) => {
// 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.