Building Real-time Web Applications with Blazor Server

Blazor Server is a hot new technology in the .NET world that allows developers to build interactive web applications using C# instead of JavaScript. One of the key benefits of Blazor Server is that it provides real-time communication between the server and the client using SignalR, a technology that enables bi-directional communication between the client and the server. In this post, we'll take a look at how you can build real-time web applications using Blazor Server.

First, let's start by creating a new Blazor Server project in Visual Studio. Once the project is created, we need to add the SignalR package to our project. To do this, we can use the NuGet package manager or simply add the following line to our .csproj file:

<PackageReference Include="Microsoft.AspNetCore.SignalR.Core" Version="1.1.0" />

Next, we need to create a SignalR hub that will handle incoming messages from the client. In our Blazor Server project, we can create a new class called ChatHub.cs and add the following code:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace BlazorServerApp.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

This hub defines a method called SendMessage that takes in two parameters: a user and a message. When a client sends a message to the server, the hub will broadcast the message to all connected clients using the ReceiveMessage method.

Next, we need to add the SignalR JavaScript library to our project. To do this, we can add the following line to our index.html file:

<script src="_framework/blazor.server.js"></script>
<script src="/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>

Now that we have everything set up, we can add some UI to our Blazor Server app to allow users to send messages to the server. In our Index.razor file, we can add the following code:

@page "/"
@inject IHubContext<ChatHub> ChatHubContext

<div>
    <input type="text" @bind="user" placeholder="Enter your name" />
    <input type="text" @bind="message" placeholder="Enter your message" />
    <button @onclick="Send">Send</button>
</div>

<ul>
    @foreach (var chatMessage in chatMessages)
    {
        <li>@chatMessage.User: @chatMessage.Message</li>
    }
</ul>

@code {
    private string user;
    private string message;
    private List<ChatMessage> chatMessages = new List<ChatMessage>();

    public async Task Send()
    {
        await ChatHubContext.Clients.All.SendAsync("SendMessage", user, message);
        chatMessages.Add(new ChatMessage { User = user, Message = message });
        user = "";
        message = "";
        StateHasChanged();
    }

    private class ChatMessage
    {
        public string User { get; set; }
        public string Message { get; set; }
    }
}

This code adds a simple UI to our app that allows users to enter their name and a message. When the Send button is clicked, we call the Send method, which sends the user's name and message to the server using the ChatHubContext. We also add the chat message to a list of chat messages and update the UI.

And that's it! We've built a real-time web application using Blazor Server and SignalR. With Blazor Server, we can leverage the power of C# and .NET to build modern, interactive web applications without having to learn JavaScript or a new front-end framework. Plus, with SignalR, we can easily add real-time communication to our apps, making them even more powerful.

But real-time communication is just one of the many features that Blazor Server offers. Blazor Server also provides a rich set of components that we can use to build complex UIs. These components can be easily customized and reused throughout our app, which can save us a lot of time and effort.

Another great feature of Blazor Server is its ability to seamlessly integrate with existing .NET code. Since Blazor Server runs on the server, we can easily access databases, APIs, and other back-end services from our Blazor Server app. This makes it easy to build web applications that integrate with existing systems and services.

In conclusion, Blazor Server is a powerful technology that allows us to build modern, interactive web applications using C# and .NET. With its real-time communication capabilities, rich set of components, and seamless integration with existing .NET code, Blazor Server is quickly becoming the go-to choice for .NET developers who want to build modern web applications. If you haven't tried it yet, I highly recommend giving it a try!

Comments

[SM Hasan]

Love it