---
title: "How do clients connect to a SignalR Hub and send messages?"  
description: "How do clients connect to a SignalR Hub and send messages?"  
author: "Utpal Vishwas"  
published: 2025-05-21  
updated: 2025-05-21  
canonical: https://www.mindstick.com/interview/34152/how-do-clients-connect-to-a-signalr-hub-and-send-messages  
category: "c#"  
tags: ["c#", "signalr", "chat", "chat app"]  
reading_time: 3 minutes  

---

# How do clients connect to a SignalR Hub and send messages?

## 1. Client Connects to the SignalR Hub

- Clients use the [**SignalR**](https://www.mindstick.com/interview/34149/what-is-signalr-and-how-does-it-work-in-real-time-web-applications) **client library** to establish a connection to the hub endpoint exposed by the server.
- The connection is built using the hub URL, then started asynchronously.

### Example (JavaScript client):

```javascript
// Create a connection to the hub endpoint
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")     // URL of the hub on the server
    .build();

// Start the connection
connection.start()
    .then(() => console.log("Connected to SignalR Hub!"))
    .catch(err => console.error("Connection error: ", err));
```

## 2. Listening for Server Messages

- [Clients](https://www.mindstick.com/interview/34150/how-do-you-set-up-a-basic-signalr-hub-in-an-asp-dot-net-core-application) can register handlers for messages (methods) that the server will call.
- This is done using `.on("methodName", callback)`.

```javascript
connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}: ${message}`);
    // You could also update your UI here to show the message
});
```

## 3. Sending Messages to the Server

- Once connected, clients can invoke methods on the [server hub](https://www.mindstick.com/interview/34151/what-are-the-different-transport-protocols-signalr-can-use-for-communication) using `.invoke("MethodName", args...)`.
- These method names correspond to public methods defined in your Hub class on the server.

```javascript
function sendMessage() {
    const user = "Alice";
    const message = "Hello from client!";
    connection.invoke("SendMessage", user, message)
        .catch(err => console.error(err.toString()));
}
```

## Summary of the Flow

| Step | What happens |
| --- | --- |
| 1. Create connection | Build connection with `HubConnectionBuilder` |
| 2. Start connection | Connect asynchronously with `connection.start()` |
| 3. Register handlers | Use `connection.on()` to handle server messages |
| 4. Send messages | Use `connection.invoke()` to call server hub methods |

## Answers

### Answer by Utpal Vishwas

## 1. Client Connects to the SignalR Hub

- Clients use the [**SignalR**](https://www.mindstick.com/interview/34149/what-is-signalr-and-how-does-it-work-in-real-time-web-applications) **client library** to establish a connection to the hub endpoint exposed by the server.
- The connection is built using the hub URL, then started asynchronously.

### Example (JavaScript client):

```javascript
// Create a connection to the hub endpoint
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")     // URL of the hub on the server
    .build();

// Start the connection
connection.start()
    .then(() => console.log("Connected to SignalR Hub!"))
    .catch(err => console.error("Connection error: ", err));
```

## 2. Listening for Server Messages

- [Clients](https://www.mindstick.com/interview/34150/how-do-you-set-up-a-basic-signalr-hub-in-an-asp-dot-net-core-application) can register handlers for messages (methods) that the server will call.
- This is done using `.on("methodName", callback)`.

```javascript
connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}: ${message}`);
    // You could also update your UI here to show the message
});
```

## 3. Sending Messages to the Server

- Once connected, clients can invoke methods on the [server hub](https://www.mindstick.com/interview/34151/what-are-the-different-transport-protocols-signalr-can-use-for-communication) using `.invoke("MethodName", args...)`.
- These method names correspond to public methods defined in your Hub class on the server.

```javascript
function sendMessage() {
    const user = "Alice";
    const message = "Hello from client!";
    connection.invoke("SendMessage", user, message)
        .catch(err => console.error(err.toString()));
}
```

## Summary of the Flow

| Step | What happens |
| --- | --- |
| 1. Create connection | Build connection with `HubConnectionBuilder` |
| 2. Start connection | Connect asynchronously with `connection.start()` |
| 3. Register handlers | Use `connection.on()` to handle server messages |
| 4. Send messages | Use `connection.invoke()` to call server hub methods |


---

Original Source: https://www.mindstick.com/interview/34152/how-do-clients-connect-to-a-signalr-hub-and-send-messages

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.