signalr
  1. signalr-real-time-communication
PreviousNext

Real-Time Communication with SignalR

Syntax

Server side:

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

Client side:

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

connection.on("ReceiveMessage", (user, message) => {
    // do something with received message 
});

await connection.start();

connection.invoke("SendMessage", user, message);

Example

In this example, we will create a simple chat application using SignalR.

Server side:

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

Client side:

<body>
    <div>
        <h1>Chat App</h1>
        <input type="text" id="user-name" placeholder="Your name" />
        <input type="text" id="message-input" placeholder="Type your message" />
        <button id="send-button">Send</button>
        <ul id="messages-list"></ul>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/signalr/dist/browser/signalr.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();
        
        connection.on("ReceiveMessage", (user, message) => {
            const li = $("<li></li>").text(`${user}: ${message}`);
            $("#messages-list").append(li);
        });
        
        $("#send-button").click(async () => {
            const user = $("#user-name").val();
            const message = $("#message-input").val();
            await connection.invoke("SendMessage", user, message);
            $("#message-input").val("");
        });
        
        await connection.start();
    </script>
</body>

Output

When the application is started and the user types in a message and clicks the "Send" button, the message will be displayed for all connected clients:

User1: Hello
User2: Hi there!
User3: How are you?

Explanation

SignalR is a library for ASP.NET that provides real-time communication between server and client. It enables the use of real-time web functionality, such as chat applications, notifications, and real-time data updates.

The ChatHub class on the server side is responsible for broadcasting messages to all connected clients. When a client invokes the SendMessage method, the ChatHub class sends a message to all clients via the ReceiveMessage method.

On the client side, the HubConnection class connects to the server and listens for messages sent from the server via the on method. When a message is received, the client can handle it accordingly. The invoke method is used to call methods on the server.

Use

SignalR can be used in scenarios where real-time communication between server and client is required. This includes chat applications, real-time games, and real-time data updates.

Important Points

  • SignalR is a library for ASP.NET that provides real-time communication between server and client.
  • The ChatHub class on the server side is responsible for broadcasting messages to all connected clients.
  • On the client side, the HubConnection class connects to the server and listens for messages sent from the server via the on method.
  • SignalR can be used in scenarios where real-time communication between server and client is required.

Summary

SignalR is a powerful library that can be used to enable real-time communication between server and client. It is suitable for chat applications, real-time games, and real-time data updates. With SignalR, developers can create real-time web functionality with ease.

SignalRInstallation
Published on: