Signalr connection with typescript in asp net core mvc project

Introduction

ASP.NET is a popular programming language used for building web applications. One of the key features of ASP.NET is its ability to handle real-time communication between the server and the client. In this article, we will explore how to establish a connection with TypeScript in an ASP.NET Core MVC project.

Setting up the ASP.NET Core MVC Project

To begin, let's a new ASP.NET Core MVC project. Open Visual Studio and select “Create a new project.” Choose the ASP.NET Core Web Application template and provide a name for your project. Select the MVC template and click “Create.”

Installing SignalR

Next, we need to install the SignalR package in our project. Open the NuGet Package Manager Console and run the :

Install-Package Microsoft..SignalR

Creating a SignalR Hub

A SignalR hub is a that acts as a high-level pipeline for handling client-server communication. Let's create a new class called “ChatHub” that inherits from the “Hub” class:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // Hub methods will be implemented here
}

Configuring SignalR in Startup.cs

In the Startup.cs file, we need to configure SignalR. Open the file and add the following code inside the “ConfigureServices” method:

services.AddSignalR();

Next, add the following code inside the “Configure” method:

Creating a TypeScript File

Now, let's create a TypeScript file to handle the client-side code. Right-click on the wwwroot folder in your project and select “Add” > “New Item.” Choose the TypeScript File template and provide a name for your file, such as “chat.ts”.

to the SignalR Hub

In the TypeScript file, import the SignalR library and create a connection to the SignalR hub:

import * as signalR from "@microsoft/signalr";

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .build();

Handling Server-Side Events

To handle server-side events, we can event handlers for the hub methods. For example, let's handle the “ReceiveMessage” method:

connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}: ${message}`);
});

Sending to the Server

To send messages to the server, we can call hub methods using the connection object. For example, let's send a message when a is clicked:

document.getElementById("sendButton").addEventListener("click", () => {
    const user = document.getElementById("userInput").value;
    const message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message);
});

Starting the Connection

Finally, we need to start the SignalR connection. Add the following code at the end of the TypeScript file:

connection.start().then(() => {
    console.log("SignalR connection established.");
}).catch((error) => {
    console.error(error);
});

Conclusion

In this article, we have learned how to establish a SignalR connection with TypeScript in an ASP.NET Core MVC project. By following these steps, you can enable real-time communication between the server and the client, allowing for interactive and dynamic web applications.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents