A First Try at SignalR

I saw this in MVP Yang's blog. I thought it was something new introduced in NetCore 3, but it turns out it has been around for many years, so it seems to be a fairly mature technology.

Introduction

SignalR is an open-source real-time framework for .NET Core/.NET Framework. SignalR can use Web Socket, Server Sent Events, and Long Polling as underlying transport methods.

SignalR is built on these three technologies and abstracts over them, allowing you to focus more on business problems rather than underlying transport technology issues.

The above introduction comes from a blog. SignalR is divided into client and server. The server runs on AspNetCore, and the client supports frontend, desktop, and mobile. I looked it up, and even Flutter has a corresponding support library.

A Few Concepts

Fallback Mechanism

SignalR supports three underlying transport technologies and can automatically negotiate the transport type based on client compatibility. As shown in the figure

Web Socket is the best and most efficient transport method. If the browser or web server does not support it, it will fall back to SSE, and if that doesn't work either, it will use Long Polling.

RPC

No need to explain too much: Remote Procedure Call. SignalR uses the RPC paradigm for communication between the server and the client.

Hub

Hub is a SignalR component that runs on the server. It is a component used for communication. Hub uses RPC to receive messages from the client and can also send messages to the client.

About Horizontal Scaling

For various underlying communication methods, SignalR has a Sticky Sessions solution, which can ensure that a client's requests during a session are all assigned to the same server. I'll look into the details later when needed.

Getting Started

What I want to build is a chat room, so I only need to write a simple service.

First, create an AspNetCore project and register the SignalR service:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSignalR();
}

Create the ChatService class:

public class ChatService
{
    private readonly List<ChatMessage> _messages;
    private readonly IHubContext<ChatHub> _context;
    public List<ChatMessage> Messages { get => _messages; }
    public ChatService(IHubContext<ChatHub> context)
    {
        _context = context;
        _messages = new List<ChatMessage>();
    }
}

Message entity class:

public class ChatMessage
{
    public string UserName { get; set; }
    public string Content { get; set; }
    public DateTime SendedTime { get; set; }
    public string ClientName { get; set; }
}

Here's the key part: writing the Hub:

You can use SendAsync to make remote calls

public class ChatHub : Hub {
    private readonly ChatService _chatService;
    public ChatHub(ChatService chatService) {
        _chatService = chatService;
    }
    public async Task GetMessages(string connectionId) {
        var data = _chatService.Messages;
        await Clients.Client(connectionId).
            SendAsync("GetMessages", data);
    }
    public async Task SendMessage(string userName, string content, string clientName) {
        var msg = new Models.ChatMessage {
            UserName = userName,
            Content = content,
            SendedTime = DateTime.Now,
            ClientName = clientName
        };
        _chatService.Messages.Add(msg);
        await Clients.All.SendAsync("SendMessage", msg);
    }
    public override Task OnConnectedAsync() {
        GetMessages(Context.ConnectionId);
        return base.OnConnectedAsync();
    }
}

Registering Dependency Injection and Middleware

Dependency injection

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSignalR();
    services.AddSingleton<CountService>();
    services.AddSingleton<ChatService>();
}

Middleware

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>{
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chat");
    });
}

Client

For convenience, I'll just use a web page.

First, write a simple chat UI layout. I won't paste the code here since there's nothing technically interesting. The result looks roughly like this:

First, install signalr.js, which can be done via npm.

Then you need to write the JS:

function setupConnection() {
    connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();

    connection.on("SendMessage", message => {
        console.log(message);
        addMsg(message.userName, message.sendedTimeStr, message.content, message.clientName);
    });

    connection.on("GetMessages", data => {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            let message = data[i];
            addMsg(message.userName, message.sendedTimeStr, message.content, message.clientName);
        }
    });

    connection.on("Finished", () => {
        connection.stop();
        console.log("finished.")
    });

    connection.start()
        .catch(err => console.error(err.toString()));
}

You can remotely invoke server methods with the following code:

connection.invoke("SendMessage", username, content, '网页客户端');

Then you can open multiple browsers to test. This is a screenshot from my phone

PS: To deploy this to a server, I even bought a new Alibaba Cloud server...

References

• Teacher Yang's blog: https://www.cnblogs.com/cgzl/p/9515516.html
• https://juejin.im/post/5c1c7b9c6fb9a049d23606a8
• AspNetCore application deployment: https://article.itxueyuan.com/dX28oy
• Startup configuration: https://www.cnblogs.com/Hai--D/p/5842842.html

Welcome to Discuss

For questions, please leave a message in the WeChat official account backend. I'll reply to every message~

• WeChat official account: 画星星高手
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy
• Column: https://zhuanlan.zhihu.com/deali
• Jianshu: https://www.jianshu.com/u/965b95853b9f